Topic: Constant Navigation

This has really troubled me in the past and right now I'm just fed up! How is this done!!!

I need to make a constant navigation i.e that each nav item has a constant width and height. I place the width and height values in the CSS for the li element and I get nothing... I have to rely on padding instead but padding adjusts according to the amount of text in the item.

For example, if I have two items one with 'products' and the other with say 'offers' then the space between 'products' and it's preceeding item is going to be greater than that of 'offers'... is anyone getting this!! My navigation is inline if it was plain then this wouldn't have been much of a bother to me but now it is!!

So far this is what I have in my CSS for the navigation:

#nav {

  border-bottom: 1px solid black;

  margin: 21px 0 0 0;

}



#nav ul {

  padding: 0; margin:0;

  text-align: right;

}



#nav li {

  border-right: 1px solid black;

  display: inline;

  list-style-type: none;

  width: 79px;

}

I've removed the padding because that is definitly not what I want

Where am I messing up?? I tried ALA but nothing even Google's let me down I know I am messing up somewhere, I ALWAYS do!! BUT WHERE!!!!!

quote:

---

but padding adjusts according to the amount of text in the item

---

No it doesn't

If you specifcy 2px padding, it will be 2px whether you have 2 letters or 2 sentences.

quote:

---

My navigation is inline..

---

This is where the problem comes in. An inline element is only as wide as it's content...

To make this work with a fixed width, take out the "display:inline;" and instead give them a "float:left;"

This will leave them as a block level element, which will allow you to set the width however you choose.

quote:

---

DL-44 said:

quote:but padding adjusts according to the amount of text in the item

No it doesn't

If you specifcy 2px padding, it will be 2px whether you have 2 letters or 2 sentences.

---

Ah but it wouldn't be 80px wide though - they'd be the actual width plus 2px either side

I agree with DL - set it to block. Also specify a height as that helps.

For inspiration have a look at what Eric Meyer does here:

http://www.meyerweb.com/eric/css/edge/

___________________
Emps

The Emperor dot org | Justice for Pat Richard | FAQs: Emperor | Site Reviews | Reception Room

if I went 'round saying I was an Emperor just because some moistened bint had lobbed a scimitar at me, they'd put me away!

quote:

---

Ah but it wouldn't be 80px wide though - they'd be the actual width plus 2px either side

---

right, but he said it actually adjusts according to the content...which is not the case.

And of course, it's not a matter of "not wanting" padding....padding is good, and should be specified in most cases like this....but it isn't what you want to use for the purpose of setting your width - that's not what it's for. Obvious as it may sound, it has apparently caused confusion: width is for width...padding is for...well, padding.

=)



(Edited by DL-44 on 02-22-2005 20:15)

Sorry I couldn't reply apparently after all this time of silence my modem burnt out!! Why does this all have to happen to me...

Anyways I tried that out and it worked I never figured I could use float for that... looks like I need to do more research into this 'float'. Thanks let you know if anything comes up

HOUSTON! WE HAVE 'ANOTHER' PROBLEM

The nav's great but another problem has just arisen... you see the layout I have is like so:



If you notice there's a gap between the nav and the content box. It's supposed to be like that after deploying the CSS. Always great Opera and FF don't add the space before the CSS is edited (for the space that is) but all hail the crem-da-la'crem of browsers IE adds the space before I even do any adjusting in the CSS! Apparently it's linked to the newly added float in the nav... how do I get rid of that? Just for a check I did inline and the space was gone in all the browsers but the nav was wrecked.

If you need the CSS just let me know overall there's not much change since what I've shown earlier.