¶ Mark Pilgrim recently published his version of tabs build with HTML lists and CSS. So I thought I’d publish my version of CSS tabs as well.
I haven’t got around to providing any notes as yet, and the solution is far from perfect (there’s a couple of nasty
s and some not-quite superfluous
s). It does however validate to XHTML Strict, so it must be getting reasonably close. Suggestions for improvements are welcome.
Wow! Splashpower is a universal wireless charging platform which delivers power to mobile devices. The SplashPad is a portable flat surface less than 6mm thick powered from any electric outlet. Put as many devices as you can fit on it and charge up in a truly intuitive fashion. It can even be built into cars, desks and airplane tables. Nice website too.
Comments
1
Very nice. Like those a lot.
2
I’m not sure it looks right in IE5/Mac. I’ve put up a screenshot:
http://homepage.mac.com/guymccusker/clagnut.jpg
Hope it’s fixable!
3
There is a peculiar jump in IE6/WinXP (haven’t checked other IE versions) when you first hover over the link. Nice looking though.
4
It’s a bit clunky, but I had to get into the spirit of things, just to see if I could do it.
http://jessey.net/tests/tabtest.html
It looks okay in Mozilla/Win but there seems to be some odd things going on with the little corner GIF when viewed in IE6/Win. I’ll have another go later.
5
Nice Richard. Thanks for sharing. Although I’d heckle you over your choice of Arial for the primary font, and a font-size percentage caried out to 3 decimal places. But, heh, that’s your choice.
Anyway, I wonder if a version is possible where the subnav is embeded within the parent list, instead of separated as you currently have it. This way, viewing the navigation without style applied reveals an appropriately nested sublist. You could also target the subnav with descendant selectors without applying the extra div or id.
The biggest disadvantage I could see immediately with the nested approach, is that it would require absolutely positioning the subnav, which, while possible, can get tricky.
At the minimum, with your current approach, it seems like you could eliminate the surrounding divs, applying the id and relevant styling to the <ul> instead. As far as the <br />s, there’s not much I’ve figured out as a substitute. You need something to break out of the float sequence. My current solution uses even uglier markup: placing <em> </em> inside the last list item, applying the same styling to the em as the anchors within each list item, then specifying float:none; for the em.
6
The reason it doesn’t work in IE Mac is this: you don’t specify a width on the floated blocks (li’s), wich is required by the CSS2 specs. IE mac can be quite strict, and, understands {width:auto} as full 100% width of the parent block. I tested your file, adding width: 10 em(arbitrary value), and then it works nicely in IE mac.
7
These are very nice, indeed. Anyone had any luck with changeable submenus in this
format?
8
These are very nice, indeed. Anyone had any luck with changeable submenus in this
format?
9
The <br/>s can probably be removed by putting clear:left; in the div or ul tags (all of them). Look at <a href = “http://adactio.com/articles/display.php/CSS_based_design/11”>this page for more</a>.
Add your comment
Comments are now closed on this post. If you have more to say please contact me directly.