HTML
Komentarz: 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;
}Komentarz: 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;
}
Komentarz: 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;
}
Komentarz: 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
...
CSS
.case3 ul li a{
display: table-cell;
vertical-align: middle;
height: 50px;
text-align: center;
padding: 0px 10px;
}
Komentarz: 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
