1

For an assignment I need to make a small website, I wanted to make a navbar that had a gradient run through the whole thing. But when I add it, I has a space where the words are.

How can i make it do through the whole bar?

.navlist {
  list-style-type: none;
  width: 100%;
  height: auto;
  padding: 15px;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(91, 91, 91, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#5b5b5b', GradientType=0);
}
.navlist li {
  float: right;
  width: 16.666%;
}
<ul class="navlist">
  <li><a href="What'son.html">What's on</a></li>
  <li><a href="History.html">History</a></li>
  <li><a href="specialoffers.html">Special offers</a></li>
  <li><a href="contactus.html">contat us</a></li>
  <li><a href="otherstores.html">other stores</a></li>
</ul>

1
  • Can you please update your html code.
    – stanze
    Jun 5, 2015 at 4:39

2 Answers 2

2

Which is because of floated li elements.A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accommodate the floats Reference.Put overflow:auto or hidden to the parent which is having floated elements or try some clearfix hack. Here your snippet

.navlist {
  list-style-type: none;
  width: 100%;
  padding: 15px;
  overflow:hidden;
  margin:0;
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(91, 91, 91, 1)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#5b5b5b', GradientType=0);
}
.navlist li {
  float: right;
  width: 16.666%;
}
<ul class="navlist">
  <li><a href="What'son.html">What's on</a></li>
  <li><a href="History.html">History</a></li>
  <li><a href="specialoffers.html">Special offers</a></li>
  <li><a href="contactus.html">contat us</a></li>
  <li><a href="otherstores.html">other stores</a></li>
</ul>

0

You should add float left to .navlist because you use float right to your li.

You can also use:

.navlist li{
display:inline;
width:16.666%;
margin: 0 5%; /*it depends on what margin you want*/
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.