Kod dla wszystkich przypadków:
HTML
Linki zawarte w liście, dlaczego? Bo menu to przecież lista linków.
CSS
ul{
list-style: none;
padding: 0px;
margin: 0px;
width: 500px;
}
ul li{
float: left;
} Kod ustawia marginesy i paddingi w
liście na 0px, wyłącza wypunktowanie(list-style), zmienia orientację
listy z pionowej na poziomą(ul li{float: left; }) oraz ustawia szerokość
menu na 500 pikseli
Przypadek 1 –pozycje o stałej szerokości, krótkie etykiety
ZOBACZ PRZYKŁAD
CSS
.case1 ul li a{
display: block;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
}
display: block; – zmienia tryb
wyświetlania z liniowego na blokowy, co pozwala na ustawienie wysokości i
szerokości elementu, width i height – szerokość i wysokość elementu,
line-height – tu się dzieje cała magia, atrybut ten odpowiada za
wysokość lini tekstu w wierszu. Ustawienie wartości takiej samej jak
wysokość elementu sprawia że tekst jest wyśrodkowany w pionie.
text-align – ustala wyrównanie tekstu, w tym przypadku wyśrodkowuje go.
Przypadek 2 –pozycje o stałej szerokości, długie etykiety
ZOBACZ PRZYKŁAD
HTML
...
Etykieta 2 dłuższa
...
Powyższy sposób jest bardzo dobry, dopóki nie pojawia się sytuacja
przedstawiona we wstępnie, atrybut line-height ustawia wysokość dla
każdej linii(50px), zatem jeżeli w etykiecie tekst przeskoczy do
kolejnej linii(50px + 50px), to spowoduje przepełnienie i rozsypanie się
layoutu:
Problem dało by się rozwiązać rezygnując z line-height i stosując
ustawienie górnego paddingu, jednak według mnie jest to rozwiązanie
dosyć niewygodne, zwłaszcza jeżeli menu generowane jest przez CMS, gdyż
wymusza ono stylowanie każdego niestandardowego elementu. Ponad to
jeżeli zmienimy wielkość czcionki w etykietach, to będzie trzeba również
zmieć wartości paddingów aby utrzymać pionowe wyśrodkowanie. Jako że
jestem człowiekiem leniwym poniżej przedstawiam sposób na ominięcie tych
niedogodności.
Przypadek 3 –pozycje o stałej szerokości, długie etykiety, bez line-height
ZOBACZ PRZYKŁAD
CSS
.case2 ul li a{
display: table-cell;
vertical-align: middle;
width: 100px;
height: 50px;
text-align: center;
}
Myśląc nad rozwiązaniem problemu
przypomniały mi się tabelki i ich właściwość która sprawiła że
standardowo zawartość komórek jest wyśrodkowana w pionie, zatem
wystarczyło zmienić tryb wyświetlanie elementu na komórkę tabeli:
display: table-cell; oraz ustawić pionowe wyrównanie na środek:
vertical-align: middle co w całkiem elegancki sposób rozwiązuje problem.
Przypadek 4 –pozycje o różnej szerokości, długie etykiety, bez line-height
ZOBACZ PRZYKŁAD
Gdy w naszym menu elementy mają mieć różne szerokości, to zazwyczaj
możemy stosować rozwiązanie przedstawione w przypadku pierwszy, jednakże
jeżeli z jakiegoś powodu potrzebujemy aby któraś z pozycji miała
etykietę składającą się z kliku wierszy możemy zastosować poniższe
rozwiązanie w którym należy ręcznie wymusić złamanie wiersza:
HTML
...
Etykieta 2
dłuższa
...
.case3 ul li a{
display: table-cell;
vertical-align: middle;
height: 50px;
text-align: center;
padding: 0px 10px;
}
kod niemal identyczny jak w przypadku 3, jednak usuwamy atrybut width i dodajemy padding definiujący odstęp od boków elementu
Rozwiązania zostały sprawdzone i działają na IE8, Chrome, FF 3.5, Opera 10.10
