Horizontal CSS menu

Have you looked at the listamatic site yet for resources?

This example from their site should get you started.

- Antibland

Great site. yeah i have, that is where i got the original from. but i was having troubles making the menu span the size of the cell.

Can you post a link to what you have so far? I'm having a bit of trouble visualizing what you're saying about the menu spanning to the size of the cell. If you can't provide a link to the actual menu, can you provide a crude image showing what you're trying to do?

- Antibland

sure

http://saturn.websiteactive.com/~collier/tbs.php

You will like it much more in ie than ff (half the problem).

I had to put the last menu item in a different div, which ahd a different width, to the menu would reach accross. Is there any way to make it strech accross automatically?

I'm working on something for you. Hang in there.

- Antibland

thesimon,

I'm a bit overwhelmed with work today, and apologize for not finishing the example I wanted to post for you. I'm attempting to rebuild your page without tables, but don't have the time at the moment. A few problems I'm seeing with the menu at this point. The text you have in there at the moment is taking up almost all of the available width of the container. This means that even the slightest text increase will send your text all over the place and break the container. I would strongly consider making "North Met Directory" into "Directory." Even chopping off those 10 characters would give you some more room to work with.

As for getting the menu to work properly, I would make the background of the entire #navcontainer an image. In your case, I would make the background image grey.jpg. Then you just have to concern yourself with fitting the existing menu in the available space. You have: display: inline for li, but should also do a float: left for the li element.

li { display: inline; float: left; }
This will push all the items in your menu flush against each other and to the far left of #navcontainer. From there you may need to mess with the height and possibly line-height of #navcontainer. As far as the menu itself goes, this is the direction you should go.

Semantically, things aren't looking so good the way you have them. You've created a second list to house only a single list element and have set it beside your first list. Because the second list item is as related to the first list as the first list items are to it, you need to keep these in a single list. Although IE somehow displays this menu how you want, I would disregard the anomaly and get it to first display in mozilla firefox. Then get it working in IE. You'll ultimately save yourself hours in development time.

Try to take from this post what you can and begin experimenting with your menu. After getting that working, I would read up on faux columns and move your site into the world of XHTML Transitional 1.0.

- Antiband

Gee thanks for you help. I am currently reading up on the world of XHTML.

I tried that float left, it makes firefox happier, but vertically squashes it in ie.

I have set up the tables with php, so that left hand cell (the submenu one) will disappear if no submenu file (php include) is set. Could i do a similar thing with divs?

Im being a bit cautious with css at the moment. I think standards are great, but a lot of it seems undeveloped. While in terms of standards tables may be horrible, they seem to be trustworthy, and multi browers friendly.

But if you could help me make this table free that would be cool.

Please, please help me. :?:

I haven't been home in a few days, so it's been impossible for me. I'll be coming home in a few days and will jump back on it then.

- Antibland