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 to print javascript within HTML id tag

    How to have dynamic image as CSS background?

    How can I apply styles to a label whose checkbox is checked using only CSS?

    How to make Online iPhone “Card Game” with HTML5 [closed]

    How to transition a CSS class between two separate additional classes?

    How to use ASP.NET DropDownList in Bootstrap navbar

    element doesn't show padding in Opera, Safari, IE

    How to put borders closer to the text and image and make background gray in CSS?

    How to view embedded image in a CSS file

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    How to make a disabled select box look like a normal text box(css only)

    How to position a background image like wanderfly.com?

    How to hide a parent div if an inner div has a certain class, with javascript

    CSS - How to add dot between navigation title

    How to display a border-bottom only if table cells are not empty (CSS)

    CSS how to change the color of a link within a class

    css3 : how to make div go up to bottom of page?

    How to double an image size in HTML using only CSS?

    How to remove all CSS attributes in this situation

    How do I make these HTML blocks of info stay the same size?

    How to give shadow to a border

    How the browser identifies the CSS framework? [closed]

    How to make submenus have the same width as the menu CSS/HTML5

    How do you create different CSS for dynamically generated elements?

    How can I create a status bar with bootstrap?

    How can I scale element height and width using CSS?

    How to change class named active into link's active attribute in javascript

    How to make this CSS hamburger menu entirely clickable?

    How to make pure css floating tooltips (absolutely positioned span) dynamically resize to accommodate text

    JQuery, fade out table row and contents (on scroll) in ratio to how much the row is hidden by containing div