title image


Smiley schmalbandiges horizontales Menü: float-Problem in Firefox und Co.
Hallo,



ich möchte eine horizontales Menü erstellen, habe jedoch Probleme mit der Ausdehnung

des übergeordneten Container.



Normalerweise kann man den übergeordneten Container mit gefloateten Inhalten dadurch

ausdehnen, indem der übergeordnete Container selbst gefloatet wird.



Das klappt in meinem Fall aber nicht.



Der Menü-Container (ein zentriertes DIV) ist 85% breit,

in ihm befindet sich ul (float: right),

darin befinden sich die Listenelemente (float: left).



CSS:

#menue {

margin: 4px auto 0 auto;

width: 85%;

font-size: 0.9em;

color: inherit;

background-color: #8F9FAF;

border: 1px solid #8F9FAF;

}

#menue ul {

float: right;

list-style-type: none;

}

#menue li {

float: left;

border-left: 1px solid #CFDFEF;

}

#menue li a, #menue li span {

padding: 0 7px;

line-height: 120%;

}

#menue li a {

color: #FFFFFF;

text-decoration: none;

background-color: #8F9FAF;

}

#menue li a:hover, #menue li a:focus {

color: #000000;

background-color: #FFFFFF;

}

#menue li span {

color: #000000;

background-color: #CFDFEF;

}



HTML:

<div id="menue">

<ul>

<li><span>Seite 1</span></li>

<li><a href="#">Seite 2</a></li>

<li><a href="#">Seite 3</a></li>

<li><a href="#">Seite 4</a></li>

<li><a href="#">Seite 5</a></li>

<li><a href="#">Seite 6</a></li>

<li><a href="#">Impressum</a></li>

</ul>

</div>



#menue fällt auf eine Null-Höhe zusammen, da sein Inhalt (ul) gefloatet ist.



Da dachte ich mir, berechne doch einfach die Höhe mit line-height und font-size.

0.9em * 120% = 1.08em



Das klappt aber nicht in Firefox und Konsorten.

Im IE6 sieht es auch ohne Höhe gut aus.



Habt ihr möglicherweise noch ein paar Ideen?



mfg Achim

geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: