width vs. padding
willie.de
- css
hallo,
ich habe ein kleines problemchen mit positonierung und abständen. wenn ich in einem dokument einen bereich als 'fixed', einen daneben als 'absolute' angebe (um ein feststehendes menü zu erzeugen) bekomme ich die beiden zwar in die gleiche höhe, sowie ich aber für den den linken bereich ein 'padding' definiere, rechnet Mozilla den zur gesamtbreite hinzu. das führt dazu, dass sich die bereiche überlappen, was ich gerade nicht möchte.
ich denke, dass das mit verschachtelten 'div's zu umgehen ist, möchte es aber gerne einfacher lösen. falls jemand rat weiß: vielen dank!
die seite (die 'z-index' hab ich zur verdeutlichung hinzugefügt):
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { margin:0; }
.menu { background-color:maroon; color:white; width:200px; position:fixed; top:0px; z-index:1; padding:10px; }
.content { background-color:green; color:white; position:absolute; left:200px; top:0px; z-index:0; padding:10px; }
-->
</style></head>
<body>
<div class="menu">menu<br>
menu<br>
menu</div>
<div class="content">bla wurbel zeuch quark bla wurbel zeuch quark... für scrolleffekt bis zum erbrechen kopieren ;-)</div>
</body>
</html>
danke für eure kommentare!
willie.de *jemandderkeineahnunghat*
Hallo,
sowie ich aber für den den linken bereich ein 'padding' definiere, rechnet Mozilla den zur gesamtbreite hinzu.
Tja, so ist es nunmal im Standard [1,2] definiert. Und so machen es Mozilla, Opera, Konqueror, IE6 im standards-compliance Mode,...
Wenn Du Rücksicht auf veraltete IEs nehmen willst, dann wirst Du meines Wissens um verschachtelete divs nicht herum kommen.
Viele Grüße
Carsten
[1] http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
[2] http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property
PS: Opera möchte statt body { margin:0; } gerne ein body { padding:0; } haben, schreib also body { margin:0; padding:0; }
Tja, so ist es nunmal im Standard [1,2] definiert. Und so machen es Mozilla, Opera, Konqueror, IE6 im standards-compliance Mode,...
danke für die info! ich finds n bissel irreführend, aber definition is wohl bindend.
Wenn Du Rücksicht auf veraltete IEs nehmen willst, dann wirst Du meines Wissens um verschachtelete divs nicht herum kommen.
is M$IE6.0 SP1 veraltet? egal...
PS: Opera möchte statt body { margin:0; } gerne ein body { padding:0; } haben, schreib also body { margin:0; padding:0; }
is schon klar. hatte aufs wesentliche kürzen wollen.
grüße!
willie.de *jemandderkeineahnunghat*
Hallo,
is M$IE6.0 SP1 veraltet? egal...
Wie gesagt: IE 6 im standards-compliant Mode (http://www.styleassistant.de/tips/tip52.htm) kann es. Bei Deinem Code bleibt er aber im Quirks Mode und verhält sich genau so wie seine veralteten Brüder.
Viele Grüße
Carsten
hallo nochmal,
Wie gesagt: IE 6 im standards-compliant Mode (http://www.styleassistant.de/tips/tip52.htm) kann es. Bei Deinem Code bleibt er aber im Quirks Mode und verhält sich genau so wie seine veralteten Brüder.
ich hatte mich schon mal damit rumgeschlagen und es wieder vergessen. ich musste damals feststellen, dass der IE5 in seiner urvariante (installtion von Win98 ohne updates) *sehr* weit verbreitet ist.
außerdem gehöre offensichtlich ich zu denjenigen, denen spielereien wie farbige scrollbars gut gefallen ;-)
grüße!
willie.de *jemandderkeineahnunghat*