Efektní CSS záložky

Nacházíte se zde: Novinky » Weblog » 2004 » Leden » Efektní CSS záložky

Zhruba před rokem jsem vytvořil jednoduché navigační CSS záložky, kupodivu se tehdy dočkaly docela dobré odezvy. Pro potřeby jednoho webu jsem si nyní vytvořil obdobné záložky, jen ještě trochu více zjednodušené (zejména po stránce kódu). Můžete si je prohlédnout…

Technické specifikace

Záložky jsou vytvořeny pomocí relativních jednotek EM, což má za úkol zabránit „rozsypání“. Zároveň se okraje, šířka čar atd. přizpůsobují aktuální velikosti písma.

Stránku jsem zatím otestoval ve Windows verzích Internet Exploreru 5.5 a 6.0, Mozille 1.6b a Opeře 7.21, vše běhalo tak, jak má. Problémy jsem zaznamenal až u staré verze Internet Exploreru 5.0.

CSS kód

body {
	font-family: verdana, sans-serif; 
	font-size: 0.7em
}
div#nav {
	padding: 0.4em; /*Stejné jako div#nav ul li a {padding: xy}*/
	border-bottom: 0.1em solid #000;
	text-align: center
}
div#nav ul {
	margin: 0; 
	padding: 0; 
	list-style: none
}
div#nav ul li {
	display: inline
}
div#nav ul li a {
	padding: 0.4em;
	border: 0.1em solid #000;
	text-decoration: none;
	background: #eee
}
div#nav ul li#active a {
	padding-top: 0.7em;
	border-bottom: 0.1em solid #fff;
	background: #fff
}
div#nav ul li a:hover {
	padding-top: 0.7em;
	border-bottom: 0.1em solid #fff;
	text-decoration: underline;
	background: #fff
}

XHTML kód

<div id="nav">
<ul>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li id="active"><a href="#"><strong>Aktivní</strong></a></li>
	<li><a href="#">Lorem Ipsum</a></li>
	<li><a href="#">Lorem Ipsum</a></li>
</ul>
</div>

Trvalý odkaz: http://www.vitdlouhy.cz/weblog/2004/01/efektni-css-zalozky.html
Vloženo: 13.1.2004, 20:36


Copyright © 2004 Vít Dlouhý, Všechna práva vyhrazena ®
XHTML 1.1, CSS 2.1, Dogma W4