how to make background 100% on a top menu


Tags: html,css,html5,css3

Problem :

iam trying to do a top menu with the width of the background color to 100%. and keep the content of my menu inside my wrap id which 960px.

Can somebody explain me how to do it.

Demo: http://jsfiddle.net/NnCVv/246/

html:

<div id="wrap">
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  <li><a href="#">Link 9</a></li>
</ul>
</div>

CSS

*
{
    padding: 0px;
    margin: 0px;
}

#wrap
{
    width: 960px;
    margin: 0px auto;
    margin: 0px auto;
}

ul
{
    background: navy;
    overflow: hidden;
}

ul li
{
    float: left;
    list-style: none;
}

ul li a
{
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
}


Solution :

Try this

 <!DOCTYPE html>

<html>


<head> 

   <style>
*
{
    padding: 0px;
    margin: 0px;
}
#banner
{
  width:100%;
  background-color:green;
}
#wrap1
{
background-color:black;
    width: 960px;

}

#wrap
{

    margin: 0px auto;
    margin: 0px auto;
}

ul
{
    background: navy;
    overflow: hidden;
}

ul li
{
    float: left;
    list-style: none;
}

ul li a
{
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
}

</style>
</head>


<body>
 <div id="banner">
<div id="wrap1">


<ul id="wrap">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>

  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>

  <li><a href="#">Link 8</a></li>

</ul>
</div>
</div>
</body>
</html>

    CSS Howto..

    How can i add a line-break on a costume tooltip?

    How to handle text wrapping in CSS? [duplicate]

    Bootstrap: navbar showing a line

    How to size relative div which haven't a content?

    How to apply jQuery on css selector :before [duplicate]

    How to replace only the text of this element with jQuery?

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    How to set input text color, but not placeholder color, in IE11

    CSS how to place an image to the right of variable width text on roll over?

    How to color specific word in a container using CSS

    How to make a tag go to the right as far as possible? [closed]

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    how to translate this xpath into css selector

    How to make a html div vertically scrollable after it's height reaches 100% height of the page?

    How to find out and get rid of unused CSS code? [closed]

    How to start css animation on speciefic height of webpage

    How to show divs inline. css html

    How to DRY Sass code using variables?

    CSS: How can I have a
    within a expand the table horizontally?
    To answer your first question and to supplement LJ's answer: Here is the relevant part of the spec to explain why the table expands to contain the inner div and...
    Read more

    How can i hide certain table column in a HTML table using CSS

    How to create dropdown navigationbar without float?

    How do browsers read and interpret CSS?

    How can I apply CSS to elements created with javascript in IE?

    How do I use CSS to let one or more elements fill remaining space?

    How to style a “list item > link” in jquery mobile

    How to preload style image to use it when server is down?

    How to correct CSS formatting problem in Visual Studio

    How do you use csslint from the command line?

    How to move all content (relative,absolute,…) down?

    How to set z-index in css?