nicht angemeldet
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>