Home/ Questions/Q 538693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T10:03:30+00:00

I want to create a navbar with images on each end to make it

  • 0

I want to create a navbar with images on each end to make it purty.

So, I created the HTML and CSS below and it worked great. My menu items are in a ul/li list.

When I style the list to put the items all on one line, the images on the ends disappear. What’s up with that? How do I fix it?

The culprit is float: left; below.

— test.html —

<html>
<head>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div id="container">
        <div id="header-usernav" class="span-6 last large">
            <div id="header-usernav-leftside"><div id="header-usernav-rightside">
                <ul>
                    <li>Register</li>
                    <li>Signin</li>
                    <li>Signout</li>
                </ul>
            </div></div>
        </div>
    </div>
</body>
</html>

— test.CSS —

#container #header-usernav {
    background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
    height: 28px;
    background-repeat: repeat;
}
#container #header-usernav-leftside {
    background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
    background-position: top left;
    background-repeat: no-repeat;
}
#container #header-usernav-rightside {
    background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
    background-position: top right;
    background-repeat: no-repeat;
}

#container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
}

#container #header-usernav li {
    float: left;
    padding: 0;
    margin: 0 0.2em;
}

The images are different so the html/css can be copied pasted to test it.

What’s the deal? What am I doing wrong?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d recommend adding overflow:hidden; (and zoom: 1; to maintain cross browser compatability for IE6) to the container div rather than adding a clearing div. Clear adds bloat to your source code.

    #container #header-usernav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 10px;
    overflow: hidden;
    zoom: 1;
    height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
}
    • 0