Li not floating on right? :(

HTML & CSS
1

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?

[#nav{ width:100%; background:black; height:50px;padding-right:5px; 10px; 5px; 0}
.navbar li{float:right; color:white;}/HIGHLIGHT]

```html4strict
    <div class="submenu"
        <ul id="nav">
            <li class="navbar">HOME  |</li>
            <li class="navbar">ABOUT US  |</li>
            <li class="navbar">BLOG  |</li>
            <li class="navbar">TESTIMONIAL  |</li>
            <li class="navbar">PORTFOLIO  |</li>
            <li class="navbar">CONTACT US  |</li>
            <li class="navbar">SIGN IN</li>
        </ul>
    </div>
2

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:


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 :wink:

3

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   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 :wink:

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

<!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

Good catch on the last li Ray. Escaped my weary eye :eye:

5

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

6

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,

padding: 5px 10px 5px 0;
7

yep that i know.thnx for heads up