Div bewegt sich bei MouseOver

R

romeo046

Grünschnabel
Anhang anzeigen 63188Hallihallo :)

ich arbeite gerade an der Startseite für eine Website und komme nicht mehr weiter -.-
Ich bin soweit, dass ich ein Bild einladen kann, und dieses bei MouseOver einen div rechts von sich öffnet. Nun ist aber das Problem, dass sich besagtes div ganz rechts am Bildschirmrand (bzw Browserfenster) öffnet und sich mein Bild nach links verschiebt.
Was ich eigentlich möchte ist, dass das Bild an Ort und Stelle bleibt, nähmlich in der Mitte des Fenster, und sich in einem gewissen Abstand das div öffnet....
Ich habe es schon mit Position absolut für das div probiert, allerdings funktionierte diese Lösung immer nur für eine Browserfenster größer. Wenn ich den Browser halbiert habe z.B. hat es wieder nicht gepasst. Allerdings ist das Bild an seiner Stelle geblieben....

Ich hoffe, dass mir jemand helfen kann! Bin am verzweifeln! Anbei mein Code:

HTML: 
<div name="Hobby" id="marg" align="middle">	
			
				<img class="Hobby" src="Visualisierungsversuch/Icons/Hobby.png" alt="Hobby">	
				
				<div id="hobby">
					<img src="Visualisierungsversuch/Biene.jpg" alt="Baumkrone" width="40px" height="60px" >
				</div>
				
				<script type="text/javascript">
					$('.Hobby').on('mouseover', function() {
					$(this).next('#hobby').slideToggle("slow");
					})
				</script>				
</div>


CSS: 
.marg{
	margin: 30px;
	left:50%;	
}

#hobby{	
	border:2px solid;
	width:350px;
	height:150px;
	display:none;
	float:right;
}
 

Anhänge

  • AUsgang.JPG
    AUsgang.JPG
    39,9 KB · Aufrufe: 5
  • Capture.JPG
    Capture.JPG
    62,7 KB · Aufrufe: 7
Zuletzt bearbeitet von einem Moderator:
romeo046 hat gesagt.:
Ich habe es schon mit Position absolut für das div probiert, allerdings funktionierte diese Lösung immer nur für eine Browserfenster größer.
Zum Vergrößern anklicken....
In diesem Fall wird einfach zusätzlich das Elternelement marg relativ positioniert - so beziehen sich die absoluten Positionsangaben auf seine Boxengrenzen, und nicht mehr auf den Dokumentkörper <body>.

Das neue CSS lautet hier dann so:
CSS: 
#marg{
margin:30px;
position:relative; /* relative Positionierung */
text-align:center /* Elementinhalt (Bild) horizontal zentrieren */
}

#hobby{
border:2px solid;
width:350px;
height:150px;
display:none;
position:absolute; /* absolute Positionierung */
top:0; /* Startposition von oben */
right:0 /* Startposition von rechts */
}

Nachtrag 19:25h

romeo046 hat gesagt.:
Wenn ich den Browser halbiert habe z.B. hat es wieder nicht gepasst. Allerdings ist das Bild an seiner Stelle geblieben....
Zum Vergrößern anklicken....
Um beim Verkleinern der Browserfensterbreite das Überlagern der Elemente zu vermeiden, empfiehlt sich die Angabe einer Mindestbreite:
CSS: 
#marg{
margin:30px;
position:relative; /* relative Positionierung */
text-align:center; /* Elementinhalt (Bild) horizontal zentrieren */
min-width:940px /* Mindestbreite (von mir frei gewählt) */
}
 
Zuletzt bearbeitet:
Hallo spicelab,

vielen Dank erstmal für deine Antwort :)

Ich habe das nun versuch. Das Ergebnis ist, dass mein Bild zwar an der selben stelle bleibt wie es soll, das div jedoch nicht. Das heißt, dass bei voller Browsergröße ich das natürlich wunderbar positionieren kann, aber bein einer verkleinerung sich das div bewegt.
D.h. es passt sich der angegebenen right größe an.
min-width hat nicht den gewünschten Effekt gebracht.... habe da etwas mit den Werten gespielt, jedoch ihne Erfolg :(
 
Wenn die Mindestbreite hier bislang keine Abhilfe gegen die Elementüberlagerung beim schmäleren Viewport schafft, liegt es an deren Breitenmaße, die in der Summe einen höheren min-width-Wert ergeben und zur Funktionalität voraussetzen, als von mir im CSS gewählt/empfohlen.
 
Zuletzt bearbeitet:
Hallo spicelab,

ich habe nun eine Lösung gefunden (indem ich den Hintergrund mit min-width belegt habe) allerdings gefällt mir die Lösung nicht, da man dann immer in die Mitte scrollen muss, wenn das Browserfenster kleiner ist....
Gibt es da nicht was eleganteres?

/CSS

#marg{
margin: 30px;
position:relative;
text-align:center;
min-width: 500px;
}

#hobby{
border:2px solid;
width:350px;
height:150px;
display:none;
position:absolute;
top:0px;
right:450px;
}


/HTML

<body background="Visualisierungsversuch/Himmel.jpg" style=" margin-top:50px; min-width:1900px;" >
 
Naja, soweit ich das überblicke, liegt's an min-width:500px für #marg im Gegensatz zur Mindestbreite von 1900px für den Dokumentkörper.

Wieso nutzt du nicht diese ebenso für #marg? Eleganter dürfte es kaum gehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück