How do I get this div to be 100% width?

Hi all,

I’m using a jquery and css based menu I found here to create the menu on [URL=“http://www.stefverbeeck.be/test2.htm”]my site. As you can see, it works great, but I would like the green bar to stretch the complete width of my browser window, like the blue bar above.

Thing is, it kinda looks like the script just uses the width of my floating “menu” div the main “ul” is contained in. Is there a way to make sure it is wider/ignores this width?

The css:

/* top of page */
div#top{
width: 100%;
height: 56px;
background-image: url(/gui/top_background.jpg);
background-repeat: repeat-x;
}

div#header{
width: 900px;
margin: 0 auto 0;
}

    div#logo{
    float: left;
    width: 120px;
    }
    
    div#menu{
    float: right;
    }

/* jquery menu */
.droplinetabs{
overflow: hidden;
}

.droplinetabs ul{
font: bold 11px arial, sans-serif;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
}

.droplinetabs li{
display: inline;
margin: 0 0 0 0;
padding: 0;
}


.droplinetabs a{
float: left;
color: #ffffff;
text-decoration: none;
letter-spacing: 1px;
}

.droplinetabs a:link, .droplinetabs a::visited, .droplinetabs a:active{
color: #ffffff;
}

.droplinetabs a span{
float: left;
display: block;
cursor: pointer;
}

.droplinetabs a span{
float: none;
}


.droplinetabs a:hover{
color: #ffffff;
}

.droplinetabs a:hover span{
background-color: transparent;
}

/* Sub level menus*/
.droplinetabs ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #67ba3e; /*sub menu background color */
visibility: hidden;
}

/* Sub level menu links style */
.droplinetabs ul li ul li a{
font: 11px Arial;
padding: 6px;
padding-right: 8px;
margin: 0;
background: #67ba3e; /*sub menu background color */
}

.droplinetabs ul li ul li a span{
background: #67ba3e; /*sub menu background color */
}

.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onMouseover. Add rounded edges in capable browsers */
background: #714421;
-webkit-border-radius: 5px;  
-moz-border-radius: 5px; 
-khtml-border-radius: 5px;  
border-radius: 5px;
}

The HTML


<!-- top of page -->
<div id="top">
<div id="header">
    
    <div id="logo"><a href="http://www.stefverbeeck.be"><img src="/gui/logo_stefverbeeck.jpg" border="0" alt="Stef Verbeeck" /></a></div>
    <div id="menu">
    
        <div id="droplinetabs1" class="droplinetabs">
        <ul>
        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','gui/menu_home02.jpg',1)"><span><img src="gui/menu_home01.jpg" alt="homepagina" name="home" width="57" height="56" border="0" id="home" /></span></a></li>
        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('book','','gui/menu_book02.jpg',1)"><span><img src="gui/menu_book01.jpg" alt="mensen als merken" name="book" width="53" height="56" border="0" id="book" /></span></a>
          <ul>
          <li><a href="#">Activities 1</a></li>
          <li><a href="#">Activities 2</a></li>
          <li><a href="#">Activities 3</a></li>
          <li><a href="#">Activities 4</a></li>
          <li><a href="#">Activities 1</a></li>
          <li><a href="#">Activities 2</a></li>
          <li><a href="#">Activities 3</a></li>
          <li><a href="#">Activities 4</a></li>
          <li><a href="#">Activities 1</a></li>
          <li><a href="#">Activities 2</a></li>
          </ul>
        </li>
        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('articles','','gui/menu_articles02.jpg',1)"><span><img src="gui/menu_articles01.jpg" alt="artikels en tools" name="articles" width="65" height="56" border="0" id="articles" /></span></a>
          <ul>
          <li><a href="#">Traveling 1</a></li>
          <li><a href="#">Traveling 2</a></li>
          <li><a href="#">Traveling 3</a></li>
          <li><a href="#">Traveling 4</a></li>
          <li><a href="#">Traveling 5</a></li>
          </ul>
        </li>
        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('speaker','','gui/menu_speaker02.jpg',1)"><span><img src="gui/menu_speaker01.jpg" alt="Stef als spreker" name="speaker" width="66" height="56" border="0" id="speaker" /></span></a>
          <ul>
          <li><a href="#">Traveling 1</a></li>
          <li><a href="#">Traveling 2</a></li>
          <li><a href="#">Traveling 3</a></li>
          <li><a href="#">Traveling 4</a></li>
          <li><a href="#">Traveling 5</a></li>
          </ul>
        </li>
        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','gui/menu_about02.jpg',1)"><span><img src="gui/menu_about01.jpg" alt="over Stef Verbeeck" name="about" width="73" height="56" border="0" id="about" /></span></a>
          <ul>
          <li><a href="#">Traveling 1</a></li>
          <li><a href="#">Traveling 2</a></li>
          <li><a href="#">Traveling 3</a></li>
          <li><a href="#">Traveling 4</a></li>
          <li><a href="#">Traveling 5</a></li>
          </ul>
        </li>
        <li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','gui/menu_contact02.jpg',1)"><span><img src="gui/menu_contact01.jpg" alt="contact opnemen" name="contact" width="76" height="56" border="0" id="contact" /></span></a></li>
        </ul>
        </div>
    </div>

</div>
</div>
<!-- end top of page -->

The javascript (if useful)

var droplinemenu={

arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 0}, //customize down arrow image
animateduration: {over: 200, out: 200}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)
            $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        if (this.istopheader)
                            $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
                        if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                            $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                        $targetul.slideDown(droplinemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(droplinemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    }) //end document.ready
}
}


If it’s the menu that drops down, you might want to change the .droplinetabs to include the property width:100%;

I don’t see a green background until I do hover over the navigation menu.

Is this what you are referencing?

If this does not work, you can also try setting the width once section at a time; not ideal but there aren’t many sections to see if it displays the way you want it to.

A few additional things to consider:
Is this the only stylesheet. If you have your own and the jQuery code you are using has it’s own, the last will override the first.

The same goes inside of the code CSS document. I see there is a z-index of 100 which makes the menu appear above the document in which the default is 0, so it looks like the structure should have no issues.

Chris