killbox

Chciałbym pokazać Wam szybki i prosty sposób jak zrobić zakładki nawigacji z tekstem wycentrowanym w pionie. Zakładki te będą miały stałą szerokość, będzie także można użyć w nich dwóch (a nawet więcej) wierszy tekstu. No to zaczynamy.

Powiedzmy, że nasz kod CSS wyświetlający zakładki wygląda mniej więcej tak:

#tabnav {
	margin: 0;
	padding: 0;
	height: 42px;
	background: url(tab_bottom.gif) repeat-x bottom;
}
#tabnav li {
	list-style: none;
  	display: inline;
}
#tabnav li a {
	padding: 5px;
	color: #838843;
	text-decoration: none;
	border: 1px solid #D7CB80;
	background: #EFEFD3;
	float: left;
	text-align: center;
	width: 100px;
	height: 30px;
	margin: 0 3px;
}

A teraz prosty kod HTML:

Strona główna
Aktywny link
Bardzo długi trzeci link
Kontakt

W rezultacie powstają ładne zakładki, ale tekst nie jest jeszcze odpowiednio wyrównany. Jak go wyrównać? Nie ma co bawić się w display: table bo to jest dobre dla elementów blokowych lub większych ilości tekstu. W naszym przypadku wystarczy nadać odpowiednią wartość dla line-height.

Zwróćcie uwagę, że #tabnav li a ma wysokość 30px. W takim razie do #tabnav li dodajemy line-height: 30px;. W ten sposób wyrównaliśmy zakładki z jednym wierszem tekstu. Teraz zajmiemy sie zakładką czwartą w której są 2 wiersze… Dodajemy nową klasę:

#tabnav li.double {
	line-height: 15px;
}

Mamy 2 wiersze więc dzielimy 30px na 2 i stąd wzięło się 15px dla line-height. Jeśli chcieli byśmy zrobić 3 wiersze to ustawiamy wysokość zakładki na np. 60px i analogicznie dzielimy przez 3 co daje nam line-height: 20px (oczywiście wysokość może być mniejsza lub większa, wedle uznania). Należy także nadać klasę .double odpowiedniemu

#tabnav {
	margin: 0;
	padding: 0;
	height: 42px;
	background: url(tab_bottom.gif) repeat-x bottom;
}
#tabnav li {
	list-style: none;
	display: inline;
        line-height: 30px;
}
#tabnav li.double {
	line-height: 15px;
}
#tabnav li a {
	padding: 5px;
	color: #838843;
	text-decoration: none;
	border: 1px solid #D7CB80;
	background: #EFEFD3;
	float: left;
	text-align: center;
	width: 100px;
	height: 30px;
	margin: 0 3px;
}

Strona główna
Aktywny link
Bardzo długi trzeci link
Kontakt