CODE
div#navbar2 {
width:800px;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a.nav:link, a.nav:active, a.nav:visited {
background-image: url(/design-images/link.gif);
width: 100px;
height: 30px;
display:block;
color: #FFFFFF;
text-align: center;
text-decoration: none;
font-size: 10px;
font-style: italic;
line-height: 23px;
}
div#navbar2 li a.nav:hover {
background-image: url(/design-images/hover.gif);
width: 100px;
height: 30px;
display:block;
color: #FFFFFF;
}
And here is my HTML:
CODE
<div id="navbar2">
<ul>
<li><a class="nav" href="http://www.wefuze.com/">Home</a></li>
<li><a class="nav" href="/contact/">Contact</a></li>
<li><a class="nav" href="/photoshop-tutorials/">Photoshop Tutorials</a></li>
<li><a class="nav" href="/image-hosting/">Image Upload</a></li>
<li><a class="nav" href="/anonymous-email">Anonymous E-mail</a></li>
</ul>
</div>
Everything works fine but because the links blocks (display:block) The links are stacking on top of eachother! And I want them to be side by side.
The reason the links are blocks is because they have to 100x30.
Cause thats how big the background is. So is there away to make the link 100x30 but not have the display:block;?