SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    li not floating on right? :(

    hey all i m trying to create a webpage in which i have couple li, inside ul. i m applying float:right to li class .navbar but it don't apply. i can't leave it to be just li coz other li in the page float on right too. where am i going wrong?
    [HIGHLIGHT="CSS"][#nav{ width:100%; background:black; height:50px;padding-right:5px; 10px; 5px; 0}
    .navbar li{float:right; color:white;}/HIGHLIGHT]
    Code HTML4Strict:
        <div class="submenu"
            <ul id="nav">
                <li class="navbar">HOME &nbsp;|</li>
                <li class="navbar">ABOUT US &nbsp;|</li>
                <li class="navbar">BLOG &nbsp;|</li>
                <li class="navbar">TESTIMONIAL &nbsp;|</li>
                <li class="navbar">PORTFOLIO &nbsp;|</li>
                <li class="navbar">CONTACT US &nbsp;|</li>
                <li class="navbar">SIGN IN</li>
            </ul>
        </div>
    All those who wander aren't lost.

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have the full code:html and css or an url.

    The code you posted is incorrect: padding-right:5px; 10px; 5px; 0????
    Also your submenu div misses the bracket: <div class="submenu"> instead of <div class="submenu"

    in the meantime this floats them:

    Code CSS:
    ul {
    list-style-type : none;
    }
     
    #nav{ 
    width:100%;  height:50px;padding-right:5px; 
    }
     
    #nav li{
    float:right; color:black;
    }

    Except if you have another div called nav on your page
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You also have an error in your "li" selector. You have it as .navbar li in your css, that is saying target a "li" within the li class .navbar
    You really would not need the "li" combined with the class in this case. I really don't see a need for all those li classes anyway. Just target the li.

    I would do away with the pipes and the &nbsp; tags and just set up a right border on my "li". Then you just need one class on the last item to pull the border off from. Keep in mind when you do right floats like that your last item needs to come first. That would put your "Home" link last in the list.

    See if this is closer to what you were trying to do

    (BG colors added so you can see what is happening)

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
     
    <style type="text/css">
     
    #nav{ 
        width:100%;
        margin:0;
        padding:10px 0;
        background:#000;
        overflow:hidden; 
    }
    #nav li{
        float:right;
        padding-right:5px;
        border-right:1px solid #FFF;
        background:blue;
        color:#FFF;
        list-style:none;
    }
    #nav li.last{border-right:0;padding-right:10px;}
     
    #nav li a{
        float:left;
        margin-left:5px;
        padding:2px 5px;
        background:red;
        text-decoration:none;
        color:#FFF;
    }
    #nav li a:hover{
        background:lime;
        color:#000;
    }
    </style>
    </head>
    <body>
     
    <div class="submenu">
        <ul id="nav">
            <li class="last"><a href="#">SIGN IN</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#">PORTFOLIO</a></li>
            <li><a href="#">TESTIMONIAL</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">HOME</a></li>
        </ul>
    </div>
     
    </body>
    </html>

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good catch on the last li Ray. Escaped my weary eye
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Luki_be View Post
    The code you posted is incorrect: padding-right:5px; 10px; 5px; 0????
    lol @ me. dumb me. sorry i was too sleepy while coding this page i didn't knew i wanted padding instead of padding-right.lol
    All those who wander aren't lost.

  6. #6
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,829
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ammark View Post
    lol @ me. dumb me. sorry i was too sleepy while coding this page i didn't knew i wanted padding instead of padding-right.lol
    When you are giving individual measurements for padding (or margin), just put a space between each measurement, then a semi-colon at the end of the list. ie,
    Code CSS:
    padding: 5px 10px 5px 0;

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    yep that i know.thnx for heads up
    All those who wander aren't lost.


Bookmarks

Posting Permissions

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