CODEWITHSUNDEEP
htmlcss
Pedro
Pedro

Reputation: 1450

how to make background 100% on a top menu

I am trying to make a top menu which should be 100% filled with background-color and also keep the content of my menu inside my wrap id which 960px.

Can somebody explain me how to do it.

Demo: JSFiddle

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: 1

Views: 75

Answers (2)

AlexG
AlexG

Reputation: 5919

Add a section as wrapper around it. And since you might want to re-use your wrap declare it as class.

CSS:

#header {
  background: navy;
}

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

ul {
  overflow: hidden;
}

HTML:

<section id="header">
  <div class="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>
</section>

JSFiddle

Upvotes: 1

Rinto Antony
Rinto Antony

Reputation: 297

Try this

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

#wrap
{
    width: 100%;
    margin: 0px auto;
    margin: 0px auto;
}

ul
{
    background: navy;
    overflow: hidden;
}

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


    ul li a {
    display: block;
    padding-top: 20%;
    padding-bottom: 20%;
    color: white;
    text-decoration: none;
  

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

Upvotes: 2

Related Questions