CSS Navigation Bar Help

Hi,

I'm quite new to table-less designing and I'm having a bit of a problem here. Here's the scenario:

The current layout uses tables and I'm trying to convert it to use CSS only. The main div has a width of 100% to stretch/reduce its size depending on the browsers display size. I have a top-menu where I want links to have dynamic left and right padding values so it will adjust itself depending on the screen resolution/browser display size.

Using tables, this is not a problem by using width on the TD with a percentage value. But I can't seem to make it work with a parent DIV and SPAN for all the links.

Sample HTML:


and here's the CSS:


I just want the links to spread and take the whole width of the DIV with equal spaces between each other and not wrap and create a second line.

Thanks in advance for any help.

hello hello,

the best option i think is to ditch <span> and us <ul> instead.

If you think about it, a nav bar is really an unordered list so why not treat it as such in your code.

then, using CSS you can easily position it as you like.

check out A List Apart for great articles regarding this.




hope this helps

You should be using a list (<ul> or <ol>). These three articles explain how to style lists.
http://www.alistapart.com/articles/taminglists/
http://css.maxdesign.com.au/listutorial/
http://www.webreference.com/programming/css_lists/

I recommend you read some of these:
Semantic code: What? Why? How?
The Meaning of Semantics (Take I)
Semantic code
Creating Semantic Structure
Semantics, HTML, XHTML, and Structure
Standards don't necessarily have anything to do with being semantically correct
Semantic Coding

Here's another great resource: Listamatic: one list, many options

Myself, I used to use Dan Cederholm's mini tabs as a base whenever I would do it.

A CSS resource site

Not very familiar with CSS, I used to use this app to make the width of my menu stretch dynamicly.

BTW, A List Apart is great