Horizontale Liste über variable Breite

[Oliver]

Hallo zusammen,

stehe grade auf dem Schlauch:

Ich habe eine horizontale Navigation mit (immer) vier Punkten und Trennstrichen (als Grafik) dazwischen:

Punkt1 | Punkt2 | Punkt3 | Punkt4

Nun möchte ich den Abstand der Punkte nach links/rechts so breit bekommen, dass die Navigation immer die ganze (variable) Fensterbreite einnimmt. Ob die Trenner Images oder BG-Grafiken werden, ist egal. Im IE muss es nicht funktionieren.

Meine Lösung sieht bisher so aus, dass die vier normalen li eine Breite von 24.5% (ca. 1/4) und die Trenner-li eine Breite von 1px bekommen.

Problem: Die vier normalen li sind gleich breit. Damit haben die Menütitel links und rechts nicht alle den gleichen Abstand zu den Trennstrichen, da nicht alle Menütitel gleich lang sind:

.AAA..|.BBB..|CCCCCC|.DD...

Die li sollten also proportional breit zu ihren Menütiteln sein, wofür ich wohl padding statt width anpassen müßte, aber wie?

Kennt jemand einen besseren Ansatz?

Hier das HTML & CSS:

<div id="navigation">
<ul>
<li class="hi"><a href="">Punkt_1_aaa</a></li>
<li class="divider"><a href="">&nbsp;</a></li>

	<li><a href="">Punkt\_2\_bbbbbbb</a></li>  
	<li class="divider"><a href="">&nbsp;</a></li>  
	  
	<li><a href="">Punkt\_3\_cc</a></li>  
	<li class="divider"><a href="">&nbsp;</a></li>  
	  
	<li><a href="">Punkt\_4\_dddd</a></li>  
</ul>  
<div class="clear"></div>  

</div>

Das äußere div#navigation ist noch für eine BG-Grafik drum, kann aber auch weg, wenn die Grafik in li/a geht.

#navigation {
background:url('../images/nav_bg.png') repeat-x 0 0;
min-height:46px;
padding:0;
        margin:0;
}

#navigation ul {
margin:0;
padding: 0;
list-style: none;
font-size:0.75em;
}

#navigation ul li {
float:left;
display:block;
width:24.5%;
padding:0;
text-align:center;
list-style-type:none;
}

#navigation ul li a {
display:block;
text-decoration:none;
padding:15px 0 15px 0;
color:#CCCCCC;
}

#navigation ul li.divider {
background:url('../images/nav_trenner.png') no-repeat center 0;
width:1px;
}

#navigation ul li.hi a {
background:url('../images/nav_bg_high.gif') no-repeat center bottom;
color:#FFFFFF;
}

[Beat]

Punkt1 | Punkt2 | Punkt3 | Punkt4

Die li sollten also proportional breit zu ihren Menütiteln sein, wofür ich wohl padding statt width anpassen müßte, aber wie?

Du musst ganz einfach keine width vorgeben.

Aber da du es über die zur Verfügung stehende Breite strecken willst:
Mit JS die Länge des Labels bestimmen, und padding Werte setzen.

übrigens würde dir display:table-cell das lösen.

Falls du vorhast, deine Labels auszutauschen, springen die Labels.
Seite 1 |   home   |   news   | articles | contact |
Seite 2 |home|articles|some_very_long_label|contact|

<li class="divider"><a href="">&nbsp;</a></li>

Das ist Quälcode. Nutze border!

mfg Beat

[suit]

übrigens würde dir display:table-cell das lösen.

"würde" im Sinne von "wenns denn alle verbreiteten Browser verstünden"

<li class="divider"><a href="">&nbsp;</a></li>

Das ist Quälcode. Nutze border!

Oder ein Hintergrundbild, wenn der Trenner etwas gefinkelter aussehen soll.

[Gunnar Bittersmann]

@@suit:

nuqneH

übrigens würde dir display:table-cell das lösen.

Da glaub ich nicht ganz dran.

"würde" im Sinne von "wenns denn alle verbreiteten Browser verstünden"

„Im IE muss es nicht funktionieren.“ [OP]

Qapla'