Coloring a menu through the div that contains the menu

Hi,

im trying to create a menu but to give it color, instead of coloring the background through the <a> tags, coloring it through the <div> container of the menu, in my case "cabecera".

<div id="cabecera" style="background: green">

    <ul id="navlist" >
        
        <li style="float:left"><a href="#">Item 1</a></li>
        <li style="float:left"><a href="#">Item 2</a></li>
    
    </ul>

</div>

HTML:

For me it doesn't work.

What should i do to create it in that way I mention?

In Facebook main navigation bar is made it in that way.

Regards

Javi

 

You made the LI floats, and as such neither the DIV or the UL inside it are growing to contain the floats in standards compliant browsers (though you'll find what you did works in IE).

add this to the UL: "overflow:hidden; zoom:1;" and it will now behave as you expect.

NOT that ANY of that belongs in your markup. Pretty much if you are actually using the style attribute on the page, you are screwing up... NOT that I suspect that DIV around the UL is necessary either - being one of the classic screwups too.

<ul id="navlist" >
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
</ul>

Code (markup):

Lose the div as pointless, lose the style attributes, and in your stylesheet do:

#navList {
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats IE */
	list-style:none;
	background:#0C0;
}

#navList li {
	display:inline;
}

#navList a {
	float:left;
	display:inline; /* prevent IE margin doubling */
}

Code (markup):

Though I'd have to see what you are doing for appearance to say 100% for certain. Being facebook much of that might be beyond your control.