CODEWITHSUNDEEP
htmlcssmenuwidth
John Doe
John Doe

Reputation: 21

CSS Horizontal Menu

I am having an issue with this horizontal menu bar. It is suppose to fit the window (width wise) but continues a little bit further than it should. It is also suppose to be top:0;left:0;

Everything I do either one of two things works. Either I align it the top left but the width is too large, or it's not aligned and the width does fit.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Website Title</title>
    </head>
    <body>
    <style>
    body{
    }

    .bg{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000;
    }
    #cssmenu ul {
        list-style-type:none;
        width:100%;
        position:absolute;
        display:block;
        height:33px;
        font-size:.6em;
        background: #76B3F1 url(images/menu-bg.png) repeat-x top left;
        font-family:Verdana,Helvetica,Arial,sans-serif;
        border:1px solid #000;
        margin:0;
        padding:0;
        top:0;
        left:0;
    }

    #cssmenu li {
        display:block;
        float:left;
        margin:0;
        padding:0;
    }

    #cssmenu li a {
        float:left;
        color:#A79787;
        text-decoration:none;
        height:24px;
        padding:9px 15px 0;
        font-weight:normal;
    }

    #cssmenu li a:hover,.current {
        color:#fff;
        background: #A3BAE6 url(images/menu-bg.png) repeat-x top left;
        text-decoration:none;
    }

    #cssmenu .current a {
        color:#fff;
        font-weight:700;
    }
    </style>

    <div id="cssmenu">
        <ul>
           <li class='active '><a href='#'><span>Home</span></a></li>
           <li><a href='#'><span>Products</span></a></li>
           <li><a href='#'><span>Company</span></a></li>
           <li><a href='#'><span>Contact</span></a></li>
        </ul>

    </div>
    <div id="background">
        <img src="background/001.JPG" class="bg"/>
    </div>


    </body>
    </html>

Upvotes: 1

Views: 1843

Answers (5)

Jason Lydon
Jason Lydon

Reputation: 7180

Instead of using a border, how about using an inset box-shadow? You'd need to get your prefix on, and it wouldn't work in older IE. As far as I'm concerned, the industry has turned the corner on older IE and understands that it's not worth the trouble giving it all the shadows and rounded corners.

box-shadow:inset 0 0 1px 0 #000;

Upvotes: 0

meustrus
meustrus

Reputation: 7315

If you don't want to use the CSS3 property box-sizing as Rockafella suggested, you can try this edit of your CSS.

I got rid of your position: absolute, added 1px padding to the <div> container, and added -1px margin to the <ul>. This way, the width: 100% on the <ul> makes the width of the content box not include the 1px border you specified.

Upvotes: 0

Thomas Lai
Thomas Lai

Reputation: 895

add overflow-x: hidden to your body

Upvotes: 0

Dave
Dave

Reputation: 46249

The answers so far seem cumbersome, so to re-post my comment as an answer:

Simply change the width:100% to left:0;right:0 in the ul style. This is supported in everything better than IE6. If you need to support IE6, use its expression syntax:

width:expression((this.parentNode.offsetWidth-2)+'px')

Upvotes: 2

aroundtheworld
aroundtheworld

Reputation: 782

Add the box-sizing: border-box; css property.

This tells the menu to take the border into account when calculating '100%'

Upvotes: 2

Related Questions