Log In · Register

 
Horizontal Nav-bar problem.
Maccabee
post Nov 10 2008, 09:52 PM
Post #1


Senior Member
*******

Group: Official Designer
Posts: 5,880
Joined: Nov 2007
Member No: 593,382



Here is my CSS:

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;?
 

Posts in this topic


Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members: