2 replies [Last post]
nashienet
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-05-12
Posts: 41
Points: 0

is it possible to have a <li> element which is set to a specific pixel width?

I am trying to create a horizontal navigation bar with 5 links, each one in a red rectangle of 93 pixels width. I am trying to do this but the width doesn't seem to work on li.

Can I only do this with either a series of Divs or... dare i say it a 1 row 5 column table?

Basically it will look something like that...

http://www.seligo.com/images/navbar.jpg

#top-nav { margin:0; padding:10px 0 0 0; }

#top-nav li
{
display:inline;
margin:0;
padding:0;
width:90px;
}

#top-nav ul { margin:0; padding:0 0 0 10px; display:inline; }

#top-nav ul li {
width:90px;
}

#top-nav ul li a { border:1px #666666; font-size:11px; font-weight:bold; padding:2px 10px 0 10px; background-color:#FF3A3A; text-decoration:none; color:#fff; }

#top-nav ul li a.active, #top-nav ul li a:hover, #top-nav ul li.expanded a { background-color:#FFF; }

.clearnav {clear:both;}

<div id="top-nav">
<ul>
<li class="collapsed"><a href="">Home</a></li>
<li class="collapsed"><a href="">Agent Functions</a></li>
<li class="collapsed"><a href="">Affiliates</a></li>
<li class="collapsed"><a href="">Contact Us</a></li>
<li class="collapsed"><a href="">Company Info</a></li>
</ul>
<br class="clearnav" />
</div>

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

&lt;li&gt; &amp; width

The problem is you have conficting ideas here.

When you have

#top-nav li
{
display:inline;
width:90px;
} 

It will ignore the width because you've made the li's inline elements and inline elements don't have a width property.

If you want li elements on a single like AND having a width you must keep them as block level elements and float them left (or right) to get them to appear on the same line.

Try looking here for all manner is listy goodness.

http://css.maxdesign.com.au/listamatic/

nashienet
Offline
Regular
Last seen: 14 years 5 weeks ago
Joined: 2005-05-12
Posts: 41
Points: 0

&lt;li&gt; &amp; width

haha! thanks - fixed it now. good link as well. I'm so crap! Smile