Tumša horizontāla navigācija

Tēma: Tumša horizontāla navigācija Sestdiena Novembris 17, 2012 2:46 pm

Izmēri : 900x30 [WIDTHxHEIGHT]

1. Ielādējam šīs abas bildes, savā failu menedžerī, mapītē "images".
http://skyr.ucoz.lv/images/nav.png
http://skyr.ucoz.lv/images/nav-hover.png

2. Ievietojam šo kodu savā HTML, vietā, kur gribam redzēt navigāciju.

Kods:: <div id="navigation">
<li><a href="/"> Sakums</a></li>
<li><a href="/forum"> Forums</a></li>
<li><a href="/index/about/0-5"> Par Mums</a></li>
<li><a href="/blog"> Video</a></li>
<li><a href="/load"> Faili</a></li>
</div>

3. Un visbeidzot, ievietojam šo savā CSS kodā & failā.

Kods:: #navigation {
background: url(/images/nav.png);
width:900px;
height:30px;
font-size:11px;
font-weight: bold;
position:relative;
font-family: sans-serif;
}

#navigation li {
float:left;
list-style-type:none;
position:relative;
display:block;
border-right: 1px solid #000000;
}

#navigation li a {
float:left;
text-decoration:none;
color:white;
text-shadow: #000000 0 2px 2px;
position:relative;
padding:7px 16px 0 17px;
height:23px;
}

#navigation li a:hover {
background: url(/images/nav-hover.png);
text-decoration:none;
color:#FFFFFF;
}