LI-Elemente innerhalb eines DIVs horizontal ausfüllend positionieren

[josDesign]

Hallo!

Ich habe einen DIV id="menu" Container welche eine ul/li Menüliste enthält.

Wenn ich jedem A oder LI eine Breite zuweise in Prozent, sodass immer die Prozentuelle Anteil der vorhandenen Listenelemente gefüllt wird auf 100% werden die Prozentwerte nicht richtig interpretiert. Der DIV "menu" wird nie ganz gefüllt. Gibt es dafür einen Trick in CSS?

Mit bestem Dank im Voraus,
jos

 

[Maik]

Hi,

zeig doch bitte mal deinen CSS-Code.

mfg Maik

 

[josDesign]

			<div id="menu"><ul><li><span>Navigation</span><ul><li class="first-child menu2"><a href="index.php?id=2">Hotel-Resort</a></li><li class="menu3"><a href="index.php?id=3">Restaurant &amp; Bar</a></li><li class="menu4"><a href="index.php?id=4">Wellness &amp; Sport</a></li><li class="menu6"><a href="index.php?id=6">Tagungen</a></li><li class="menu7"><a href="index.php?id=7">Kontakt</a></li><li class="menu5"><a href="index.php?id=5">Familien-Arrangements</a></li><li class="menu8"><a href="index.php?id=8">Buchung</a></li></ul></li></ul></div>

#menu {
position: absolute;
width: 850px;
height: 25px;
top: 175px;
left: 50%;
margin-left: -425px;
}

#menu span { display: none; }

#menu ul {
margin: 0;
padding: 0;
}

#menu li {
margin: 0;
padding: 0;
list-style: none;
display: block;
float: left;
}

#menu ul li ul { width: 100%; }

#menu ul li ul li a {
display: block;
float: left;
color: #000099;
text-decoration: none;
text-align: center;
/*padding: 0 0 0 30px;*/
white-space:nowrap;

}

/* Folgende Zeile wird dynamisch je nach Menupunktanzahl definiert */
#menu ul li ul li a { width:121px;}

#menu ul li ul li a:hover, #menu ul li ul li.active a {
background: url(../img/li_over.png) no-repeat 10px 0;
font-weight: bold;
}

#menu ul li ul li.first-child a {
/*padding: 0 0 0 20px;*/
background: url(../img/li_over.png) no-repeat 0 0;
}

Sprich, meine horizontal angezeigten LIs sollten sich so verhalten wie eine TD ohne definierte Breite in einer definierten "Tabelle". ANDERS gesagt: Die LI's sollten sich an der definierten Breite von UL ausrichten. Die Menüpunkte sind wie sichtbar, unterschiedlich lang.


Liebe Grüße

 

[Maik]

Was ergibt denn 7 * 121px bzw. 850px / 7?

Dezimalzahlen sind hier auch möglich, und werden durch einen Punkt ausgezeichnet.

Aber Achtung: der IE ist kein mathematisches Genie, wenn's um das Auf- oder Abrunden geht.

mfg Maik