asked on

css horizontal menu - equally spacing menu items and right edge alignment

I am using a list for a menu, and I need all <li> items equally spaced withing given container. Plus the last item of menu (contact) should be aligned against the right edge of container. So the last letter of the last word is actually touching the right edge.
I tried to do float and use padding, but it is obviously not what i need.

Thank you,

Stacy

flob9

Please, provide a sample of the html page.

ctasik

ASKER

<div id="header">
<h1>portfolio</h1>

<ul>

<li><a href="index.htm" class="current">HOME</a></li>
<li><a href="curr_act.htm">CURRENT ACTIVITIES</a></li>
<li><a href="gallery.htm">GALLERY</a></li>
<li><a href="theatre.htm">THEATRE</a></li>
<li><a href="teaching.htm">TEACHING</a></li>
<li><a href="contact.htm" class="last">CONTACT</a></li>

</ul>
</div> 

css
------------------------------------------
#header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      bottom: 0px;
      width:700px;
      font-size: 1.1em;
      right: 0px;
            }

#header li {
      float: left;
      }

#header li a:link, #header li a:visited {
      display:block;
      background: #FFFFFF;
      padding: .2em 0em;
      text-decoration: none;
      color:#000000;
      /*margin-right: .5em*/
      margin-left:20px;
      font-family: Arial, Helvetica, sans-serif;
      }


#header li a:hover, #header li a:active {
      color:#666666;
      background:#FFFFFF;
            }

#header li a.current, #header li a.current:hover, #header li a.current:active {
      color:#666666;
      background: #FFFFFF;
      cursor: default;
}

ASKER CERTIFIED SOLUTION

flob9

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ctasik

ASKER

* width:700px;*/
float:right; /* added */
I tried to float it right, but then Firefox puts all menu items <li> backwards... and Safari doesn't.

flob9

It is working for me with safari 4 and firefox 3.5.

"Firefox puts all menu items <li> backwards" <<< what do you mean ?

russianryebread

If the elements are backwards, float them the other way... You can re-arrange the order of a floated list by the direction you float the <li> elements inside the <ul>

ctasik

ASKER

Actually it didn't work:)
The distance between menu item is control by margin-left: 20 px
ul float right & il float left still leaves a distance to the right, because the space occupied by font of <li> items + space in between them still doesn't equal 100%.

I need somehow to tell them to occupy all the space inside ul edge to edge, 100 %. I tryed using percentage value, but each word is different length. So equal percentage method doesn't work.

ctasik

ASKER

so my question now is

How to make <li> items

<li><a href="index.htm" class="current">HOME</a></li>
<li><a href="curr_act.htm">CURRENT ACTIVITIES</a></li>
<li><a href="gallery.htm">GALLERY</a></li>
<li><a href="theatre.htm">THEATRE</a></li>
<li><a href="teaching.htm">TEACHING</a></li>
<li><a href="contact.htm" class="last">CONTACT</a></li>

spread inside lu edge to edge with equal spaces between them.