
Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser. - jollyjerry
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
======
ph0rque
I'm more impressed by the diagrams explaining what's going on with each html
tag and its CSS attributes.

~~~
feverishaaron
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"?

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

~~~
gord
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]

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

------
gord
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...](http://www.digital-
web.com/articles/everything_you_know_about_CSS_Is_wrong/) [ although ie6 seems
to be broken wrt tabular divs, eek ]

~~~
blasdel
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
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.

~~~
gord
thats kind of my point - its not trivially obvious that "absolute" is not
absolute.

I know ... RTFM.. but then theres what browsers actually do as a mixin.

Hence good examples of motifs that are reasonably portable are all the more
valuable.

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

------
ja30278
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.

------
horatio
Doesn't work in my Chrome actually. 2.0.173.1

~~~
juanpablo
It works for me (same Chrome version)

------
BonsaiKitt3n
welcome to 2004!

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

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

