Menü mit Listen in dynamischer Breite

[fettyteddy]

Hallo,

ich habe ein Menü mit einer dynmaischen Anzahl von Menüpunkten. In unserem Beispiel gehen wir von 5 Menüpunkten aus. Das ul hat eine feste Breite von 800px und nun möchte ich einfach wie bei einer Tabelle die li dynamisch auf die Breite des ul anpassen ohne eine feste Breite zu definieren. Wie ist das möglich?

Vielen Dank
Marcel

body {
	background-color: #fff;
}

* {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type:none;
	height: 40px;
	width: 800px;
	border:1px solid #000;
	white-space:nowrap;
}

li {
	float: left;
	display:inline;
	border:1px solid #F00;
}


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

 

[Maik]

Hi,

wie wäre es mit der prozentualen Breiteneinteilung?

Bei 5 Menüpunkten entspricht dies 20%.

mfg Maik

 

[fettyteddy]

richtig und bei 6 Menüpunkten 20% .. aber genau das soll dynamisch angepasst werden ohne das ich in PHP einen code schreibe, der diese Berechnung durchführt.

Hab ich z.B. eine Tabelle.. im <table> definiere ich eine feste Breite von 800px alle <td> passen dynamisch ihr größe auf die Breite der Tabelle an, egal ob ich 5 oder 6 spalten definiert habe. Genauso möchte ich das in einem Menü. Es gibt eine feste Gesamt-Breite und die Menüpunkte sollen unabhängig von der Anzahl ihre Breite anpassen.

 

[Maik]

richtig und bei 6 Menüpunkten 20%

100% / 6 != 20% :suspekt:

Versuch es mal über die Tabelleneigenschaftswerte der display-Eigenschaft.

Aber Achtung: Diese werden in der IE-Familie erst seit dem IE8 interpretiert!

mfg Maik

 

[fettyteddy]

na ich probier das mal..
erstmal hab ichs durch ne PHP Funktion gelöst, welche die Breiten berechnet...

        $i = floor($menu_total_width / $menu_total);
	$arrLiWidth = array();
	for ($j=0; $j<$menu_total; $j++) {
		if ($j == ($menu_total-1)) {
			$arrLiWidth[$j] = ($menu_total_width - (($menu_total-1)*$i));
		} else $arrLiWidth[$j] = $i;
	}

100% / 6 != 20% hatte mich verschrieben

Also vielen Dank für die Antworten

 

[Maik]

Versuch es mal über die Tabelleneigenschaftswerte der display-Eigenschaft.

Aber Achtung: Diese werden in der IE-Familie erst seit dem IE8 interpretiert!

Hinsichtlich der Browserkompatibilität würde ich es beim Script belassen, sofern du den IE7 und älter hier berücksichtigen möchtest.

mfg Maik