Forum PHP.pl > [HTML] Menu poziome na wybraną szerokość

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML] Menu poziome na wybraną szerokość

kilas88

7.08.2010, 17:38:41

Witam,

Chcę zrobić menu poziome o długości powiedzmy 600px. Menu posiada kilka (nieznana ilość) pozycji, które mają jakieś tam tło. Chciałbym, aby pozycje te były rozciągnięte na długość całego menu. Oto przykład:

[HTML] pobierz, plaintext 
<style>
ul, li {
	list-style-type: none;
}
 
ul {
	display: block;
	width: 800px;
	background-color: orange;
	margin: 0;
	padding: 0;
}
 
li {
	display: inline-block;
	background-color: yellow;
}
</style>
 
 
<ul>
	<li>Menu 1</li>
	<li>Menu 2</li>
</ul>
[HTML] pobierz, plaintext

W wyniku czego otrzymuje:

Chciałbym aby żółty kolor był rozciągnięty na całe menu (zasłaniał kolor pomarańczowy). Kombinuję już trochę i nic mi nie przychodzi do głowy, choć zadanie wydaje się łatwe.

Proszę o pomoc.

mkdes

7.08.2010, 18:05:24

Daj znacznik LI na float: left, usuń display: inline, bo wtedy nie można ustawiać width. Ustaw LI width procentowo % w skrypcie php w zależności od ilości elementów menu i wklejaj kod stylu dla kontenera LI w nagłówku <head> strony. Zastosuj klasy styli albo ID aby style stosować tylko do wybranych kontenerów.

Damonsson

7.08.2010, 18:15:23

Chyba Cię po******liło.

Co do tematu:

[CSS] pobierz, plaintext 
#a {
  width:9999px;
}
ul, li {
	list-style-type: none;
}
 
ul {
	display: block;
	width: 800px;
	background-color: orange;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
 
li {
	display: inline-block;
	background-color: yellow;
}
li:last-child {
        min-width: 90%;
	display: inline-block;
	background-color: yellow;
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<ul>
    <div id="a">		
	<li>Menu 1</li>
	<li>Menu 2</li>
	<li>Menu 3</li>
	<li>Menu 4</li>
    </div>
</ul>
[HTML] pobierz, plaintext

kilas88

7.08.2010, 18:27:42

Cytat(mkdes @ 7.08.2010, 19:05:24 )

Odpada. Musi być zrobione wyłącznie w CSS.

Cytat(Damonsson @ 7.08.2010, 19:15:23 )

Chyba Cię po******liło.

Co do tematu:

[CSS] pobierz, plaintext 
#a {
  width:9999px;
}
ul, li {
	list-style-type: none;
}
 
ul {
	display: block;
	width: 800px;
	background-color: orange;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
 
li {
	display: inline-block;
	background-color: yellow;
}
li:last-child {
        min-width: 90%;
	display: inline-block;
	background-color: yellow;
}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<ul>
    <div id="a">		
	<li>Menu 1</li>
	<li>Menu 2</li>
	<li>Menu 3</li>
	<li>Menu 4</li>
    </div>
</ul>
[HTML] pobierz, plaintext

Działa, choć niekoniecznie o taki efekt mi chodziło :-) Chciałbym, aby menu było wyrównane.

Jak na razie rozwiązałem to następująco:

[CSS] pobierz, plaintext 
ul, li {
	list-style-type: none;
	table-layout: fixed;
}
 
ul {
	display: table;
	width: 800px;
	background-color: orange;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
 
li {
	display: table-cell;
	background-color: yellow;
}
[CSS] pobierz, plaintext

Niestety, nie zadziała pod IE 7 i niżej, a klient chce by na IE 7 także śmigało. Zabieram się więc za kombinowanie z IE...

Chyba, że ktoś ma jeszcze jakieś propozycje :-)

erix

7.08.2010, 18:41:38

Cytat

Niestety, nie zadziała pod IE 7 i niżej, a klient chce by na IE 7 także śmigało. Zabieram się więc za kombinowanie z IE...

Łupnij expression do CSS, dla IE nie ma litości.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.