Mini Tabs: The UN-tab, tab

Marc Richards

Nice demo. I really like your site in general. One criticism though, you highlight the current tab using the following CSS selector:

#minitabs a:link.active

Most browsers seem to accept this, but it doesn’t render in Dreamweaver. I checked to see what the CSS 2.1 spec said, and while the didn’t seem to address it outright, the example they gave looked more like this:

#minitabs a.active:link

You can find the relevant info here. I was just wondering if you chose to do it this way for a particular reason or if you just did it like that and left it because it works.

Dan → www.simplebits.com

Marc - Good catch. It should be a.active:link, etc. I’ve updated the example code. Thanks!

mariano → uberbin.net

Dan, many many thanks i´ve used a simple variation of your minitabs to end my weblog redesign… it worked great on every browser.

Thanks again.. and i put your credits on my css :)

Wayne

Just a heads up: The tabs break in Opera 6.03 on Mac OS X Panther. It doesn’t seem to render the padding-bottom specification.

Carey

More heads up: it also fails on Opera 6.04 on Win XP (the underline is drawn on top of the text).

jason → none

This stuff rocks! :-)

artgrrl → www.artificialwomen.com/munity/

Nice example to play around with! Tricky though when it comes to raising certain values as line height. Yesterday it took me some time to put a image in front of the menu. It doesn’t work as a part of li, but when I absoluete position the image by 72px and put the menu aside by 72px all works fine.

vf

I am a fan of these, but am having one odd problem:

Usually, when it comes to using a list as a menu, I can put text-align in the ul tag for positioning.

In this case, I would do something like:
#minitabs ul {
text-align: right;
}

Normally, I see that work well, however I can’t see to get it to go, even after some tinkering. If anyone has an idea, I’m open to suggestions :)

yaoi → www.3yaoi.com/

Found this link while searching Google, thanks

anna

i want align to right this menu, is possible?

Wellensittich Homepage → www.wellensittich.de

Great site, well done. I enjoy beeing here and i´ll come back soon. You do a great job. Many greetings.

Damian

Great look, have bought Dan’s book and like Anna & VF above would love to align to the right.

Changing the float on the #mintabs a: to right in the CSS works fine in Firefox (looks great), IE6 they are all stacked on top of each other on the right.

Have played around but to no avail as yet. Could Dan or anyone offer any insight to working around this?

thateagle

Try using the global DIV tag style to specify the exact position in pixels.

Here i just used a two column table, the right cell for the menu, and the left empty cell with an invisible image that define the left margin of the menu. (outdated technique, but it works.)

karthik

Im trying to create a tabbed-view effect using only CSS/Javascript..your site gave me some good starting points. Thanks!

Susan Klaas → handyakku.jseek.de

Very good work, really well done. See you again sometime at this interesting place. Say hi to all people around the world.

slackware → www.chaoshiren.com.cn/blog

Nice Work!Thx

neal

a w e s o m e

Edwin Durning → www.edwindurning.com

this is quite the w00tness

Rafa → www.rafaelpuyana.com

I need some help with the minitabs.

I´m triying to use 2 minitabs in the same HTML. I´ve duplicated the css to avoid conflicts

The first minitabs ( from top to bottom ) is aligned to the left and automatically aligns the second one to the right. I need them both to be left aligned. I´m not a CSS expert but I thing that the problem is with the “float property “in the fourth style of the CSS. ANY IDEAS? thanks