I have a task on my hands, and that is to help everyone try and learn efficient CSS and XHTML for their websites, I am going to show you how to create a perfect navigation:
HTML
Code:
<ul>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
<li><a href="#"><img src="images/image.png" alt="Link" /></a></li>
</ul>
CSS ...the clever bit
Code:
li {
list-style: none;
list-style-position:inside;
display: inline;
}
..thats the easy bit now if you want to add rollovers...
HTML
Code:
<ul>
<a href="#"><li id="nav1"></li></a>
</ul>
CSS
Code:
li.nav1{
background: url(image/norm.png) no-repeat;
}
li.nav1 a:hover{
background: url(image/roll.png) no-repeat;
}
maybe someone learnt something I dont know..
Alex