CODEWITHSUNDEEP
htmlcss
Pedro
Pedro

Reputation: 1450

how to make background 100% on a top menu

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;
}

Upvotes: 0

Views: 62

Answers (1)

shubham khandelwal
shubham khandelwal

Reputation: 181

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>

Upvotes: 1

Related Questions