• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

DIV's mit position:relative in einer Reihe

M

Marin

New member
Hallo zusammen,

ich stehe vor einem Problem und habe mich deshalb jetzt mal hier registriert. Ich habe quasi heute erst angefangen mich wirklich mit CSS auseinander zu setzen und bekomme eine Sache einfach nicht hin.

Ich habe ein Div welches zentriert ist und darin drei divs mit position:relative also wie ich es verstanden habe, einer Positionierung abhängig vom Eltern DIV. Nun tritt das problem auf, dass obwohl alle drei den wert top:20px haben, sie trotzdem untereinander angezeigt werden. Bei Google finde ich immer die Information alle auf float:left zu setzen. Dann funktioniert die Positionierung aber nicht mehr richtig da die beiden Propertys sich wohl widersprechen.

Die Frage ist jetzt, wie kann ich die DIV's in einer Reihe und trotzdem richtig positioniert haben?

Hier mein Script:
Code: 
<div id="wrapper" style="position:absolute;background-color:#ffffff;width:1024px;height:576px;left: 50%;top:50%;margin-left: -512px;margin-top: -288px;">
<div id="eins" style="background-color:#000000;position:relative;top:20px;left:50px;width:96px;height:48px;z-index:1;overflow:hidden;float:left"></div>
<div id="zwei" style="background-color:#000000;position:relative;top:20px;left:250px;width:96px;height:48px;z-index:2;overflow:hidden;float:left"></div>
<div id="drei" style="background-color:#000000;position:relative;top:20px;left:450px;width:96px;height:48px;z-index:3;overflow:hidden;float:left"></div>
<div id="mover" style="position:relative;width:100px;height:50px;top:100px; left:0px;float:left;overflow:hidden;z-index:0;"><img src="front.jpg" style="position:absolute" height="50" width="100" alt="our img" /></div>
</div>

Vielen Dank im Voraus
 
Da Du gerade anfängst CSS zu lernen, habe ich Dir mal ein Bsp. gebastelt.
Wobei darauf zu achten ist, das ich das wrapper-div nicht mit Deinen Maßen versehen habe, da Du von 1024x576 Pixeln ausgegangen bist, was aber nicht unbedingt alle so haben.
Auch habe ich auf die absolute Positionierung verzichtet, da die i. d. R. sinnfrei ist.
Eventuell kannst Du Dich ja mit einem Bsp. aus der Praxis anfreunden.
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Titel</title>
			<style type="text/css">
				body{margin:0;padding:0;}
				#wrapper{width:328px;margin:0 auto;}
				#eins,#zwei,#drei{width:96px;height:48px;float:left;margin:50% 0 0 20px;background:#000;}
				#eins{margin:50% 0 0 0;}
			</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="eins">x</div>
			<div id="zwei">x</div>
			<div id="drei">x</div>
		</div>
	</body>
</html>
 
Ich bin so richtig froh, dass wir den Grünen wieder haben. Man braucht ihn ständig. An dieser Stelle nochmal Danke an mo.
 
Vielleicht ist er bei dieser Passage ins stolpern gekommen:
Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente a4 bis a6 des Beispiels zeigen: relativ nämlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit absolute, fixed oder relative positioniert. Falls kein von static abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das body-Element.
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben