nicht angemeldet
Hallo Andreas,
Ist content aber höher als der Viewport, wird bei Deiner Methode immer noch der content unter das Menü fließen.
Nur daß der Effekt erst bei Überschreiten der Viewport-Höhe eintritt, nicht schon vorher.
margin-left funktioniert unabhängig von der Höhe des Menüs.
Soll der linke Streifen (in dem das Menü sitzt) auf der gesamten Seitenhöhe eine andere "Hintergrundfarbe haben, kann man auch mit border-left arbeiten …
Du hast Recht, danke!
Ich habe jetzt mal ein bisschen mit Margin experimentiert, um dessen Bedeutung bei gefloateten und nicht gefloateten Elementen zu verstehen. Ich dachte ja bisher, dass das keinen Unterschied mache, aber weit gefehlt:
Während die Außenabstände von gefloateten Elementen sich zu den Außenabständen gefloateter Geschwisterelemente hinzuaddieren, scheinen die von nicht-gefloateten Blockelementen mit denjenigen ihrer geloateten Geschwister zusammenzufallen (IE) oder sich dann sogar auf das Elternelement zu beziehen (Mozilla) oder sogar gleichzeitig beides (Opera).
Auf die unterschiedliche Darstellung des folgenden Quellcodes in den von mir getesteten Browsern (Mozilla 1.7.2, Opera 7.54, IE 6.0, jeweils unter Win98) mache ich mir dennoch keinen richtigen Reim:
Vorübergehend auch hier zu sehen.
Welcher Browser stellt es denn nun eigentlich dem Standard entsprechend dar?
Warum steht der Text meiner nicht gefloateten Boxen bei Opera nicht innerhalb der entsprechnden Rahmen und im Falle von Mozilla darüber hinaus sogar offensichtlich zweimal an derselben Stelle?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Margintest</title>
<style type="text/css">
<!--
* {
font-family:sans-serif;
font-size:14px;
}
html, body {
margin:0;
padding:0;
}
.floatblock {
margin:50px;
float:left;
height:50px;
width:50px;
border:solid 1px #00CC00;
padding:2px;
}
.pureblock {
margin:50px;
height:50px;
width:50px;
border:solid 1px #CC0000;
padding:2px;
}
-->
</style>
</head>
<body>
<div class="floatblock">float block</div>
<div class="pureblock">pure block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="floatblock">float block</div>
<div class="pureblock">pure block</div>
<div class="floatblock">float block</div>
</body>
</html>
Kann mir das jemand erklären?
Gruß Gernot