Expand navigation to the whole width of the page

I want to make a top navigation taking up the whole space of the website

[PolitikerNEU]

Now, as i am trying to code a personal homepage for a classmate of me, I am experiencing very many problems, because I have not coded for a long time.
So I have a - in my opinion - rather basic question:
I have got a top navigation (with a drop-down-menu, but that's not important at all for now) which is supposed to take up the whole space of the website (by setting ul {width:100%;}), but actually the list members are only as large as they need to be.
At first, what I cannot use is width:25% or such things because at the time of writing the CSS I do not know how many elements I will have and I also dislike using tables for the purpose of layouting.

------------------------
Sorry for my bad english, I am Austrian
(I hope you'll understand what I mean)

[edited by: encyclo at 6:54 pm (utc) on Dec. 26, 2006]
[edit reason] no URLs please, see TOS [webmasterworld.com] [/edit]

[PolitikerNEU]

*sigh*

These links have not been any self-promotional links but they were for the purpose of better understanding what I mean.

[Leosghost]

this doesnt have the drop down element that you wanted ..but will allow 100% width with as many menu items as you need to use ..the percentage used here is for 7 items in line ..vary as you need ..

I chopped it together from something I found on the net ..it doesnt give the most elegant nav ..but it is a starting place for you ..maybe..and others can now come in and tell you what you really need :)

but for now ..

so you made your #menu div

and in your CSS you do ..

#menu {position:absolute; /to make it start from hard left /
top:110; / depends on your header ..this puts it where you want vertically on page /
left:0;
width: 100%;
display: table;
}

#menu ul {
margin: 0; padding: 0;
width: 100%;
display: table-row; /* IE hack */
background: #whatever;
vertical-align: middle;
}

#menu li {
margin: 0; padding: 0;
display: table-cell; /* Another IE hack */
text-align: center;
font-family: whatever
font-weight: ditto;
vertical-align: middle;
background: #whatever;
border: whatever, or not ;
}

* html #menu li { /* MacIE */
display: inline-block;
width: 14%; /* without a percentage here MacIE wont co-operate */
}

/* The IE thing (hidden from MacIE) \*/
* html #menu li {
display: inline;
width: 14.2%;
}
/* */

it isnt pixel precise ( that doesnt bother me none ;-)..but it works in all ..and it's much easier to use tables for full width nav..but if you want CSS :)

BTW the no self URL rule is strictly enforced here ..even for showing what one means ..you get used to it ..not a bad thing ..

and Welcome to WebmasterWorld :)

[PolitikerNEU]

Thanks a LOT!

Originally I wanted to avoid using a table layout, but it seems that this is the only way to do it, so I have applied it.

Actually, the only things I had to use was
.navigation {display: table;}
.navigation ul.horizontal {display: table-row;}
.navigation .horizontal li {display: table-cell;}

I don't need a stylesheet for a drop-down-menu because this is something I have managed to code.

[Leosghost]

BTW ..your english is fine ..better than the english of some who were born and raised there ( and claim it as their mother tongue )..as you'll see the longer you read fora :o