Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser. | Hacker News Reader

List. No CSS hacks. Full cross-browser.

matthewjamestaylor.com

57 pointsjollyjerry15 comments

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

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

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]

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

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 ]

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

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.

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.

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

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.

Doesn't work in my Chrome actually. 2.0.173.1

It works for me (same Chrome version)

welcome to 2004!

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

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

Reply on news.ycombinator.com