nicht angemeldet
Komische Darstellung im Firefox
Hallo
Ich will eine Navigationsbar machen,die horizontal ist.
Hab das mit Liste und float:left gemacht, leider stellt der firefox die Liste nicht im div, sondern unter dem div dar..Wieso??
hab schon alles versucht, was mir in den sinn gekommen ist.
kann jemand helfen
Code: ~~~html
<html>
<head>
<title>Untitled</title>
</head>
<link rel="stylesheet" href="STIL.css" type="text/css">
<body>
<div style="text-align:center; border:1px solid black; width:100%;">
<ul id="list-nav" >
<li><a href="#" id="aktiv">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul></div>
<div style="width:750px; height:200px; background-color:green; clear:both;">
</div>
</body>
</html>
CSS:
~~~css
/* Auszeichnung der Leiste mit den Links*/
/*Auszeichnung der Liste, mit Position*/
ul#list-nav{
margin:0 auto 0 auto;
list-style:none;
width:750px;
}
ul#list-nav li{
float:left;
}
ul#list-nav li a {
/*Auszeichnung der Links: FORM*/
width:150px;
height:24px;
background:url(glass_bg.png) transparent top repeat;
display:block;
/*Auszeichnung der Links: SCHRIFT*/
font-family:century gothic;
color:black;
text-decoration:none;
}
/*Links wenn Maus drauf ode Aktiv*/
ul#list-nav li a:hover, ul#list-nav li a#aktiv {
background:url(nav_current.png) transparent top repeat;
color:white;
}
-
Hab das mit Liste und float:left gemacht, leider stellt der firefox die Liste nicht im div, sondern unter dem div dar..Wieso??
works as designed, ein floatendes element wird aus dem textfluss entfernt und wirkt sich nicht mehr seine elternelemente aus, ggf interessiert dich die eigenschaft "clear" um den textfluss nach dem menü, aber innerhalb des elements,welches "gestreckt werden soll"
mache nicht den fehler, dich an internet-explorer-darstellung zu gewöhnen, der machts pauschal falsch und streckt die elemente ;)
-
works as designed, ein floatendes element wird aus dem textfluss entfernt und wirkt sich nicht mehr seine elternelemente aus, ggf interessiert dich die eigenschaft "clear" um den textfluss nach dem menü, aber innerhalb des elements,welches "gestreckt werden soll"
mache nicht den fehler, dich an internet-explorer-darstellung zu gewöhnen, der machts pauschal falsch und streckt die elemente ;)
Wo sollte ich deiner Meinung nach clear benutzen??
Beim nachfolgenden div habi ichs benutzt, und das funktioniert, aber wenn ich clear im umrahmenden div benutze macht das keinen unterschied..Das mit dem IE hab ich auch schom bemerkt vorallem beim zentrieren mit margin:-D
-
Wo sollte ich deiner Meinung nach clear benutzen??
nach deinem menü, innerhalb des elements, welches gestreckt werden soll
die dreckige variante ist ein clear-div einzufügen <div class="clear"></div> mit 0 höhe, zeilenhöhe usw sowie der eigenschaft clear: both; da diese geschichte auch der internet explorer versteht
nachdems der ie aber sowieo falsch macht, können wir auf diesen verzichten und es gleich richtig machen, mit einem pseudo-element
-
-