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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Navbar error?

    I have my navbar, but the links are showing up in reverse order, ie: not Home, About Us, Gallery, Contact Us. it is Contact Us, Gallery, About Us, Home.

    my css code:
    .navbar ul li{
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    background-image:url(button.png);
    background-repeat:no-repeat;
    height:40px;
    width:100px;
    text-align:center;
    padding-top:10px;
    float:right;
    text-decoration:none;
    list-style:none;
    }


    my html code:
    <div class="navbar">
    <ul>
    <a href="#"><li>Home</li></a>
    <a href="#"><li>About Us</li></a>
    <a href="#"><li>Gallery</li></a>
    <a href="#"><li>Contact Us</li></a>
    </ul>
    </div>

    Any one know what the hell is going on?

  • #2
    New Coder
    Join Date
    Jun 2012
    Location
    Burnley, Lancashire UK
    Posts
    12
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Hi VaMoose,

    You need to float the links to the left not the menu itself but the links inside the menu, try this -

    .navbar li a{
    float:left;
    }

  • #3
    New Coder
    Join Date
    Sep 2012
    Location
    Boulder, CO
    Posts
    56
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Instead of floating right, float them left. Here is the coding:

    Code:
    .navbar ul li{
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
    background-image:url(button.png);
    background-repeat:no-repeat;
    height:40px;
    width:100px;
    text-align:center;
    padding-top:10px;
    float:left;
    text-decoration:none;
    list-style:none;
    }
    Notice, I changed float:right to float: left and that fixed it.


  •  

    Tags for this Thread

    Posting Permissions

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