CODEWITHSUNDEEP
htmlcsswebgradient
furthoc
furthoc

Reputation: 91

HTML gradients and CSS classes

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>

Upvotes: 1

Views: 115

Answers (2)

Henry
Henry

Reputation: 1

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

Upvotes: 0

Vivek Vikranth
Vivek Vikranth

Reputation: 3505

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>

Upvotes: 2

Related Questions