nicht angemeldet
float nicht verstanden
Hi,
hier mal eine ungewöhnliche Fragestellung: Ich habe eine Navigation gebaut, die funktioniert und frage mich nun, warum sie funktionert:
Es geht um das untenstehende Navigationsmenü. Wenn man mit der Maus über einen Navi-Punkt geht (:hover), so klappt darunter das Untermenü auf. Natürlich ist alles pures (x)html und css.
Funktiniert suboptimal, wenn ich dem div mit der id "navi" die Eigenschaft "float:none;" mitgebe (-> 1. Zeile im css-Block).
In diesem Fall wird das Untermenü aufgeklappt, verschiebt jedoch den darunterstehenden Inhalt nach unten bzw. nach rechts.
Funktioniert hingegen ausgezeichnet, wenn ich dem Navigations-Div die Eigenschaft "float:left;" mitgebe: Der Inhalt bleibt wo er ist und die Navigation legt sich darüber.
Davon abgesehen, das dies genau das gewünschte Verhalten ist, verstehe ich diesen Effekt nicht. Das Navigations-Div kann doch ohnehin nicht umflossen werden, da es eine Breite von 100% hat. Und wenn ich eine Eigenschaft float mitgebe, warum führt dies dazu, daß sich das Navigationsmenü _über_ den Inhalt legt, statt sich von diesem umfliessen zu lassen?
Ich hofe, Ihr könnt mich aufklären...
Grüße
Mrs. Olivander
Hier der Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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>Test Positionierung</title>
<style type="text/css">
<!--
#navi {
float:left; /* Damit der Inhalt nicht nach unten verschoben wird */
position:relative;
z-index:3;
width:100%;
height:2.0em; font: bold 100% sans-serif;
}
#navi ul.navi-ebene2 { display:none; }
#navi li.navi-ebene1:hover ul.navi-ebene2 {
display:block;
position:relative;
left:0px;
z-index:3;
margin-left:0px; /*margin-left fuer opera mitgeben*/
margin-bottom:0.3em;
padding-bottom:0.4em; /* bessere Usability bei Auswahl des untersten Navi-Punktes */
background-color:#eee; border: 1px #666 solid; width:8em; font-weight: normal;
}
#navi a.navi-ebene1, #navi a.navi-ebene2 { font-size: 100%; text-decoration: none; color: #933; }
#navi li.navi-ebene1, #navi li.navi-ebene2 { padding: 0px 0.5em 0px 0.5em; list-style-type:none; }
#navi ul.navi-ebene1, #navi ul.navi-ebene2 { padding:0em; margin:2px;}
#navi li.navi-ebene1 { float:left;width:8em; margin:0;}
#navi ul.navi-ebene1 { width:100%; margin-left:0; /* margin-left fuer opera */}
#navi li.navi-ebene2 { width: 7em; }
#navi li.navi-ebene2:hover { background-color: silver;}
#navi li.navi-ebene2:hover a{ color:red; text-decoration: underline;}
-->
</style>
</head>
<body>
<!-- Navigation fuer alle ausser den IE -->
<div id="navi">
<ul class="navi-ebene1">
<li class="navi-ebene1">
<a class="navi-ebene1" href="#">Navipunkt 1</a>
<ul class="navi-ebene2">
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 11</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 12</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 13</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 14</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 15</a></li>
</ul>
</li>
<li class="navi-ebene1">
<a class="navi-ebene1" href="#">Navipunkt 2</a>
<ul class="navi-ebene2">
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 21</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 22</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 23</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 24</a></li>
<li class="navi-ebene2"><a class="navi-ebene2" href="#">Navipunkt 25</a></li>
</ul>
</li>
</ul>
</div>
<div id="inhalt">
<h1 id="inhalt-titel">Navigationstest
<!--[if IE]>
<br />Sorry, dieser Navigationstest funktioniert nicht für den Internet Explorer
<![endif]-->
</h1>
<div id="inhalt-info">
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
<p>Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt Mein Inhalt </p>
</div><!--Ende div id="inhalt-info" -->
</div><!--Ende div id="inhalt" -->
</body>
</html>
-
Ein Float fließt nicht 'um ein Element herum' sondern sorgt für einen rechts oder links ausgerichteten Kasten innerhalb des Elements.
Ein Float beeinflusst die positionierung der einzelnen Elemente (mit der Ausnahme des Floats) normalerweise in keinster Weise, das einzige was geändert wird, ist der Bereich, in dem sich Text befindet.