4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Need help on <ul>, <li> codes problem

by shipwrecked
3 replies
  • WEB DESIGN
    • |
Hi,

I have never used the <ul> and <li> tags before, but I think I should on this new site version I am coding.

I am going to add this to my horizontal main menu buttons, but it creates terrible distortions.
I managed to get rid of the bullets and align the buttons horizontally, but the problem is:

-the buttons appear cramped in the centre (aligned in the middle) and don't stretch to left and right of the nav button wrapper DIV
-additional white space has appeared above and below the buttons and want to get rid of that


Nav button CSS:

Code:
#nav-buttons-cell{margin: 0px 0px 0px 0px; height: 37px; list-style-position: inside;}

The button CSS:

Code:
.btn{
  margin-right: 1px;
  float: left;
  background: #30A3C4;
  background-image: -webkit-linear-gradient(top, #30A3C4, #118CAF);
  background-image: -moz-linear-gradient(top, #30A3C4, #118CAF);
  background-image: -ms-linear-gradient(top, #30A3C4, #118CAF);
  background-image: -o-linear-gradient(top, #30A3C4, #118CAF);
  background-image: linear-gradient(to bottom, #30A3C4, #118CAF);
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  text-shadow: 1px 1px 3px #05424F;
  font-family: Arial;
  color: #ffffff;
  font-size: 16px;
  padding: 8px 15px 8px 15px;
  text-decoration: none;
}

.btn:hover {
  margin-right: 1px;
  background: #B472CC;
  background-image: -webkit-linear-gradient(top, #B472CC, #9061A9);
  background-image: -moz-linear-gradient(top, #B472CC, #9061A9);
  background-image: -ms-linear-gradient(top, #B472CC, #9061A9);
  background-image: -o-linear-gradient(top, #B472CC, #9061A9);
  background-image: linear-gradient(to bottom, #B472CC, #9061A9);
  text-decoration: none;
}

The button line:

Code:
<ul type="none"><li><a class="btn" href="service1.htm">Service 1</a></li><li><a class="btn" href="service2.htm">Service 2</a></li><li><a class="btn" href="service3.htm">Service 3</a></li><li><a class="btn" href="service4.htm">Service 4</a></li><li><a class="btn" href="service5.htm">Service 5</a></li><li><a class="btn" href="service6.htm">Service 6</a></li><li><a class="btn" href="service7.htm">Service 7</a></li><li><a class="btn" href="service8.htm">Service 8</a></li><li><a class="btn" href="service9.htm">Service 9</a></li><li><a class="btn" href="service10.htm">Service 10</a></li><li><a class="btn" href="service11.htm">Service 11</a></li></ul>
Of course, there are other things, details on the page, but before adding the <ul> and <li> tags, it was PERFECTLY aligned.

Again, my problem: the buttons don't stretch horitontally to the DIV, they appear centered, the last button appears centered under the others.

I could give you a link if you PM me, if you can't help me like this - I'd give a million thanks for the one who helps
#&ltli&gt #&ltul&gt #<li> #<ul> #codes #problem

Trending Topics