Create a horizontal menu with css (centered and docked)

Question

I've to write a short css script for a vertical menu bar.

The first item should dock to the left side and the last item should dock on the right side.

The items in the middle should be centered vertically. The menu bar itself should also centered verticaly.

I've read some articles but every fails.

My assets:

• html markup: http://pastebin.com/pSaWH9gJ
• css used: http://pastebin.com/AqBxwNX9

So, can someone tell me, what I've do wrong? If if resize my page, the items are floating vertically, I know the reasons for this, but how can I do this better? Have some one a idea, tip or a website for me? Thanks

Answer 1

If you can use pseudo selectors try this code...

#nav li:first-child {
    text-align:left;
}
#nav li:last-child {
    text-align:right;
}

Also it's better to use jsfiddle.com to show what you've done so far. I went ahead and copied your code into http://jsfiddle.net/b8f0mava/

You can read more about css pseudo selectors here:

http://css-tricks.com/almanac/selectors/f/first-child/

http://css-tricks.com/almanac/selectors/l/last-child/