hey,

 

I'm trying to space this horizontal menu evenly:

 

My link

 

I'm still trying to get my head around the css, I've taken it from a tutorial. Is there a css property or a simple, clean way of doing this?

 

This is my css:

#Header #nav {padding:0; margin:0; list-style:none; height:38px; background:#00638f; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#Header #nav li.top {display:block; float:left; height:38px;}
#Header #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:normal; padding:0 0 0 0px; cursor:pointer;}
#Header #nav li a.top_link span {float:left; display:block; padding:0 0px 0 0px; height:35px;}
#Header #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px;}

#Header #nav li:hover a.top_link {color:#fff;}
#Header #nav li:hover a.top_link span {}
#Header #nav li:hover a.top_link span.down {}

/* Default list styling */

#Header #nav li:hover {position:relative; z-index:200;}

#Header #nav li:hover ul.sub
{left:1px; top:38px; background: #00638f; padding:3px; border:1px solid #00638f; white-space:nowrap; width:90px; height:auto; z-index:300;}
#Header #nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#Header #nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #00638f;}
#Header #nav li ul.sub li a.fly
{background:#00638f url(arrow.gif) 80px 6px no-repeat;}
#Header #nav li:hover ul.sub li a:hover 
{background:#0984ba; color:#fff; border-color:#fff;}
#Header #nav li:hover ul.sub li a.fly:hover
{background:#0984ba url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}


#Header #nav li:hover li:hover ul,
#Header #nav li:hover li:hover li:hover ul,
#Header #nav li:hover li:hover li:hover li:hover ul,
#Header #nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #bbd37e; padding:3px; border:1px solid #5c731e; white-space:nowrap; width:90px; z-index:400; height:auto;}

#Header #nav ul, 
#Header #nav li:hover ul ul,
#Header #nav li:hover li:hover ul ul,
#Header #nav li:hover li:hover li:hover ul ul,
#Header #nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

 

 

cheers for any help

If you give the top level li tags a width, some will be too wide for the text while others will not have enough width, so don't give a width to the top level li tags (I don't think you have) then rely on side padding for the li tags and the spacing between long and short words will be the same.

 

The drop down levels which seem to have a fixed width of 90px will then be a different width from the top level but they seem to be left-aligned so you could leave them like that or give each a class and a different margin-left to center under the top level li tag.

 

See item 4 here for an example:-

http://www.wickham43.net/dropdownmenus.php

If you give the top level li tags a width, some will be too wide for the text while others will not have enough width, so don't give a width to the top level li tags (I don't think you have) then relay on side padding for the li tags and the spacing between long and short words will be the same.

 

The drop down levels which seem to have a fixed width of 90px will then be a different width from teh top level but they seem to be left-aligned so you could leave them like that or give each a class and a differnt margin-left to center under the top level li tag.

 

See item 4 here for an example:-

http://www.wickham43.net/dropdownmenus.php

 

hey wickham, cheers for the link, I've had a look at the CSS, its pretty complex - to me anyway, but I do get some of it...

 

I cant figure out where the current spacing/padding on my links is coming from, I've inserted 10px padding on the right of where I thought it should go but it hasnt made a difference:

 

#Header #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:normal; padding:0 10 0 0px; cursor:pointer;}

 

This is the rest of the css for top links:

 

#Header #nav {padding:0; margin:0; list-style:none; height:38px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#Header #nav li.top {display:block; float:left; height:38px; padding: 0 10 0 0px}
#Header #nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#ccc; text-decoration:none; font-size:11px; font-weight:normal; padding:0 10 0 0px; cursor:pointer;}
#Header #nav li a.top_link span {float:left; display:block; padding:0 0px 0 0px; height:35px;}
#Header #nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px;}

 

I dont know what I'm doing wrong?

You could remove padding from

#Header #nav li a.top_link

#Header #nav li a.top_link span

#Header #nav li a.top_link span.down

 

and just apply to #Header #nav li.top

 

#Header #nav li.top {display:block;
float:left;
height:38px;
padding:0 25px 0 0;}

You could remove padding from

#Header #nav li a.top_link

#Header #nav li a.top_link span

#Header #nav li a.top_link span.down

 

and just apply to #Header #nav li.top

 

#Header #nav li.top {display:block;
float:left;
height:38px;
padding:0 25px 0 0;}

 

 

Thats worked, cheers