14 replies [Last post]
Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

Hi,

Can anyone direct me to a tutorial which explains how to make a fixed width horizontal menu using a list. I have looked at css play, alistapart and all the usuals but cant seem to find one that I can specify an exact width. Of course I can specify the width of the <li> but thats not really the point, if one of the list items is a longer wonrd than the others it looks weird so I would like this to be auto?

If I sound confused, Im not, Im just dum!

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 23 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Fixed width horizontal menu

What do you mean by "fixed width menu"?

Verschwindende wrote:
  • CSS doesn't make pies

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

What do I mean?

Ok,

I have a navbar that I want to be 760px wide. It has 7 links in it. A couple of the links are short words a couple are long words. I cant make the list items 108.57142857px wide so there is always a slight gap at the end. Am I missing something completely? I was hoping the the individual links could be sized according to thier needs rather than having them all the same size.

Does that make sense or have I lost it completely?

Thanks

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Fixed width horizontal menu

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

Not quite

Hi,

yeah Ive seen this one but I cannot work out how to control the total width og the menu easily. It does work i firefox but I cant find a work around for ie!

Thanks anyway

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Re: Not quite

Mircle wrote:
Hi,

yeah Ive seen this one but I cannot work out how to control the total width og the menu easily. It does work i firefox but I cant find a work around for ie!

Thanks anyway

Mircle; what problems are you having exactly? I've used this menu a number of times with no problems. You can see a test of it here...
http://www.redhorseoil.com/test/rssa/index1.asp where I'm using the centered version at 760px wide.... I got rid of the borders between items and a couple other cosmetic changes but that's all I did with the code.

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

Fixed width horizontal menu

Thanks for your reply,

Ok I wanted to keep the borders and this of course shows up the fact that the nav bar doesnt quite make 760px wide. I end up with borders at either end a few pixels from the full width.

Ok so heres a sample:

In firefox itsokand in ie its to thin, I wanted it to be the same width as the banner above
http://www.allriders.net/sample.html

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Fixed width horizontal menu

what happens if you enclose the menu in a div?

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

Enclosed in a div!

It is inside a div

<div id="nav"></div>

I have just amde the div the same background color so u can see what happens....dam its annoying

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Fixed width horizontal menu

Sorry... didn't look at your code to see it was in a div... how bout this?

#menu1 {
  width:760px;
  padding:0 1px; 
  margin:0 auto; 
  list-style-type:none;
  }
#menu1 li {
  float:left;
  width:106px;
  border:1px solid #ff0; 
  }
#menu1 a {
  display:block;
  width:106px;
  color:#000; 
  background:#d4d4d4; 
  text-align:center; 
  padding:4px 0; 
  text-decoration:none; 
  float:left; 
  }
#menu1 a:hover {
  color:#fff; 
  background:#08c;
  }

<ul id="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">Program</a></li>
<li><a href="#">Checklist</a></li>
<li><a href="#">Bikes</a></li>
<li><a href="#">Ibiza</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Contact</a></li>
</ul>

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

Hi Again

Hi,

Mate I really appreciate your time here, this problem has me stuffed. I have tried this but it only works under the perfect conditions as soon as a word is longer than normal it screws everything up.

I have put a sample here

http://www.allriders.net/rmfred.html

You can see what I mean.

Thanks again

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 4 years 7 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Fixed width horizontal menu

OK... I see what you're getting at... it doesn't work with my example cuz I made the width 106px for each link.... but you want fluid width for each link...yet still be 760px wide

Gotta run now, but I'll take another stab in the am unless someone beats me to it.

later

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

Well put

I couldnt find the words to explain what I was after, and yes you are correct

I want fluid width for the items but a fixed width for the whole menu

Thanks

m23
Offline
newbie
Last seen: 16 years 33 weeks ago
Joined: 2006-04-12
Posts: 7
Points: 0

Fixed width horizontal menu

Honestly, I don't think there is way to do what you want.

Correct me if I am wrong, but you seem to want a way for all menu item widths to resize to the width of the widest item, based on the text inside that item.

You can make all the items match width, but not based on the text inside any single item.

When you set the widths, that would be the minimum width for each item. Any text that would push the item width to expand would affect only that particular item.

Does that make sense?

Mircle
Offline
Regular
Last seen: 14 years 17 weeks ago
Timezone: GMT+10
Joined: 2006-04-11
Posts: 13
Points: 0

HI

Yeah, it does make sense, but, if I cant have fluid width on the list items surely I can control the individual items width seperately from each other?

I have tried this but Im clearly missing something cos I dont seem to be able to