• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

left, right, bottom docking

heureka

Neues Mitglied
Warum wird der schwarze Balken im IE richtig (nur innerhalb des grünen divs), im FF und Opera aber falsch (vom linken Browserfenster Rand) gezeichnet?

Code:
<body>
<div style="width:100%;height:100%;background-color:grey">
<div style="width:18em;height:100%;background-color:blue;float:left"></div>
<div style="width:100%;height:100%;background-color:green">
	<div style="position:relative;left:0px;top:0px;width:100%;height:100%">
		<div style="position:absolute;right:0px;top:0px;width:40px;height:30px;background-color:yellow"></div>
		<div style="position:absolute;right:10px;top:40px;width:20px;height:70px;background-color:red"></div>
		<div style="position:absolute;left:0px;bottom:0px;width:100%;height:20px;background-color:black"></div>
	</div>
</div>
</div>
</body>
 
Also 1. wenn einer was falsch macht dann ist es meist der IE ;)

2. Es ist doch vollkommen logisch, dass der Balken so handelt.
Wenn du ein Element mit position absolut deklarierst schert es sich einen Dreck um sein Elternelement und richtet sich am Seitenrand aus.
Desweiteren sind die Conatainer unlogisch, es kann gar nicht funktionieren, selbst mit relative,

Überdenk das nochmal, ich glaube es hilft grad nix wenn ich dir die Lösung vorlege... Google position relative css, o.Ä., oder les dir http://www.css4you.de/position.html durch


MfG
 
Zuletzt bearbeitet:
Aber wenn ich

Code:
<body>
<div style="width:100%;height:100%;background-color:grey">
<div style="width:18em;height:100%;background-color:blue;float:left"></div>
<div style="width:100%;height:100%;background-color:green">
	<div style="position:[B][COLOR="Red"]absolute[/COLOR][/B];[B][COLOR="Green"]left:0px;top:0px[/COLOR][/B];width:100%;height:100%">
		<div style="position:absolute;right:0px;top:0px;width:40px;height:30px;background-color:yellow"></div>
		<div style="position:absolute;right:10px;top:40px;width:20px;height:70px;background-color:red"></div>
		<div style="position:absolute;left:0px;bottom:0px;width:100%;height:20px;background-color:black"></div>
	</div>
</div>
</div>
</body>

daraus mache, dann habe ich das Problem, dasss der Zwischencontainer nicht mehr richtig in seinem Elterncontainer positioniert wird!
 
Deshalb lasse alle absoluten Angaben weg, weil die "absolut" unnötig sind.
Positioniere besser mit margin und float.
 
Indem du den BALKEN relative postionierst, wie ich bereits sagte.
(Und dann noch die restlichen Fehler rausmachst.)
zB ist brauchst du das eine Element, in dem du den Code verfärbt hast, gar nicht...

MfG
 
Zurück
Oben