Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts

    more css nav problems

    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.

    Code:
    #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
    Code:
    <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.

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Try:

    Code:
    #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
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    its not perfect but it will do, thanks rep added (if allowed)

  • #4
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Yeah, I noticed that there was a slight indentation on the left hand side, but the right was flush!

    (course it's allowed )
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •