Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

by jollyjerry • 17 years ago

57 15 17 years ago

ph0rque• 17 years ago

I'm more impressed by the diagrams explaining what's going on with each html tag and its CSS attributes.

Agreed. I think this type of patient explanation is what people need to learn CSS well. Too often, sites that get linked up offer specific "css recipes" without any guide as to what is happening. It works sometimes to just copy and paste, but does that really "teach you how to fish"?

mshafrir2• 17 years ago

<nitpicking>It can be argued that the wrapper div is not semantically relevant.</nitpicking>

gord3• 17 years ago

interesting point actually...

Given the same textual semantic content 'information', a badly laid out and a well laid out site can be orders of magnitude easier/harder to read. One might draw from this that _layout_ has some semantic content.

Think of a google result list being randomized - the layout clearly has semantic content [best ranked first in layout]

mshafrir2• 17 years ago

In this case Google could use an ordered list element to give context to the search results.

gord3• 17 years ago

I think its quite a good site for css layout examples...

I remember discovering how position:absolute was in fact _relative_ to the enclosing div/element, ayaaay!

another css layout approach given here - http://www.digital-web.com/articles/everything_you_know_abou... [ although ie6 seems to be broken wrt tabular divs, eek ]

blasdel• 17 years ago

position:absolute only behaves that way relative to a positioned parent -- if the parent doesn't have the position attribute set, it keeps looking up the hierarchy until it finds one that is (or is the root).

pmjordan• 17 years ago

While we're nit-picking: if the parent doesn't have the position attribute set isn't quite accurate: the containing block must not have static positioning (which it does by default), but one of absolute, relative or fixed.

horatio• 17 years ago

Doesn't work in my Chrome actually. 2.0.173.1

juanpablo• 17 years ago

It works for me (same Chrome version)

BonsaiKitt3n• 17 years ago

welcome to 2004!

runningskull• 17 years ago

Thanks for the timely submission. I was just doing this exact thing last night and was having trouble getting it to behave.

webwright• 17 years ago

Oh, hell-- I've got some karma to spare...

I could do this with a table in about 11 seconds.

ja30278• 17 years ago

I like CSS, but every time I see an article bragging about a new technique for accomplishing something that _should_ be simple, I lose the faith a little bit.

Can't we just give up and add '<tabset>' and '<tab>' tags to html and call it a day. At the very least, we could stop abusing the poor <ul> tag.

Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.

Related Stories