...

View Full Version : more css nav problems



rafiki
07-30-2007, 12:19 AM
more navbar problems.
http://rafiki.freehostia.com/upload/index.php
you can see the nav in harmony without the bits in between on hover.
the problem is if you look at the first bit it overlaps to the left, heres the CSS im using.



#navlist {
padding : 3px 0;
margin : 0;
border : none;
text-align : left;
letter-spacing: 2px;
color : #666;
background : #6FBF20;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
text-decoration : none;
padding : 3px 1.2em;
margin : 0;
margin-left: -6px;
border :none;
color : #333;
background : #cbeea8;
}
#navlist li a:link {
color : #333;
background : #b9e588;
}
#navlist li a:visited {
color : #333;
background : #b9e588;
}
#navlist li a:hover {
border : 0 solid #d2dcc9;
color : #fff;
background : #75c22a;
}
#navlist li a#current {
text-decoration : none;
color : #fff;
background : #75c22a;
border : none;
}
with the html

<div id="navcontainer">

<ul id="navlist">
<li id="active"><a id="current" href="/index.php">Homepage</a></li>
<li><a href="/upload.php">Upload It!</a></li>
<li><a href="/contact.php">Contact Us</a></li>
<li><a href="/about.php">About Us</a></li>
<li><a href="/advertise.php">Advertising</a></li>
<li><a href="affiliate.php">Affiliate With Us</a></li>
<li><a href="link.php">Link Back</a></li>
</ul>
</div>
thanks in advance..
rafiki.

ahallicks
07-30-2007, 12:29 AM
Try:



#navlist {
padding : 2px 0;
margin : 0;
letter-spacing: 2px;
color : #666;
background : #6FBF20;
}
#navlist li {
list-style : none;
margin : 0;
float: left;
padding-left: 4px
}

rafiki
07-30-2007, 12:35 AM
its not perfect but it will do, thanks :D rep added (if allowed)

ahallicks
07-30-2007, 08:57 AM
Yeah, I noticed that there was a slight indentation on the left hand side, but the right was flush!

(course it's allowed :p)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum