7 replies [Last post]
Jay Tea
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 4
Points: 0

Hello,

I am trying to make a horizontal nav bar. I would like it to allocate equal horizontal space to each item. Currently I have a table, with anchor tags in each cell. Two questions...

1) Is there a way to accomplish this using only the padding and margin properties of the anchor tags, and ditching the table altogether?

2) I am trying to get the padding of the anchor to fill the table cell. I set the margin of the anchor to 0px, and the padding of the cell to 0px. It seemed like there should be anything between the border of the anchor and the border of the cell, but there is. What is it?

Thanks for any help you can give.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5147
Points: 2745

Navigation menu - horizontal

Hi Jay Tea,
1) Setting the display property of the link to block and the width of the link should make it easier to get the links the same size, then you can work on the space between them.

2) The extra space might be border-spacing.

Hope that helps

Jay Tea
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 4
Points: 0

Navigation menu - horizontal

Thanks for the suggestions. It doesn't look like border-spacing was it, either. I set the borders to be visible, and I could see that the border of the cell was distinct from the border of the anchor it enclosed.

A follow up question on setting the display property to 'block'...Since I've got five elements, I set the width to 20%, figuring it would take 20% of the parent div container, which I thought it was supposed to do. But, it looks like it took 20% of the browser window. Did I misunderstand what was supposed to happen here? I can get pretty close to what I want by just setting the width to 19.5%, but, well, that seems awfully klugey.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5147
Points: 2745

Navigation menu - horizontal

Hi Jay Tea,
Can you provide a link, it makes it much easier to see what you are trying to do and where you are having problems.

Jay Tea
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 4
Points: 0

Navigation menu - horizontal

I certainly can. http://members.lycos.co.uk/codeandchord/ . The stylesheet is called all.css, and the file with the menu in it is header.php. I'm currently not using the table approach.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5147
Points: 2745

Navigation menu - horizontal

Hi Jay Tea,
You have to take into account things like borders padding and margin when calculating widths.
Putting the page into standards mode would help a little as then IE would calculate closer to the standards. But I'm not sure if you have access to change the doctype at lycos.

Hope that helps

Jay Tea
Offline
newbie
Last seen: 10 years 35 weeks ago
Timezone: GMT-5
Joined: 2004-03-21
Posts: 4
Points: 0

Navigation menu - horizontal

Thanks, although I thought I was.

My understanding was that, in the situation I have...
< div class="outer" >
< div class="inner" >
< div class="mainmenu >
< 5 anchors >
< /div >
< /div >
< /div >

...the margins for inner would stretch only to the padding of outer, and the margins for mainmenu would stretch only to the padding of inner. That seems to be how the content gets laid out. Or to say it another way, "inner" is essentially the content of "outer," and therefore all of the margins for "inner" should fall inside the margins, border, and padding of "outer," and therefore, the width of "inner" is less than the width of "outer." Similarly, the width of "mainmenu" is less than the width of "inner," and since I gave the anchor tags display:block properties, setting the width to 20%, and the margins to 0 should make each of them 20% of the parent container, that is, "mainmenu." Did I understand wrong?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5147
Points: 2745

Navigation menu - horizontal

Hi Jay Tea,
What I was trying to explain is the anchors have borders on them so if you are trying to get them all to sit on the same horizontal plane then you need to take the borders into account.

Thats why 19% works where 20% fails.

You could experiment by removing the borders and see if that works at 20% or you could try changing the doctype so that the page is in standards mode.

Hope that helps