Log in

View Full Version : Animated horizontal tabs



redmike
07-12-2008, 07:33 AM
Hi,

I just installed the sript at ..

http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/

and wondered how to make an 'individual' tab longer or shorter. My text is too long.

I am very new to CSS which is most likely obvious but am doing a couple of tutorials to get me underway.

I have succeeded in making all the boxes wider but not just one of them.

Any help would be appriciated.

Mike

Nile
07-13-2008, 02:42 AM
What you'd do is have to make a CSS Class for one li object. From there you can call it like "short", or "long". And in the li element you want longer of shorter. Add: class="variable".
Learn about classes:
http://www.tizag.com/cssT/class.php
http://www.tizag.com/cssT/cssid.php

redmike
07-13-2008, 06:25 AM
What you'd do is have to make a CSS Class for one li object. From there you can call it like "short", or "long". And in the li element you want longer of shorter. Add: class="variable".
Learn about classes:
http://www.tizag.com/cssT/class.php
http://www.tizag.com/cssT/cssid.php

Thanks Nile.

I did follow the two links but it seems that I'm too much of a beginner to apply what is there to what I want to do.

I have Dreamweaver CS3 and know how to add a class but not how to add it to a specific li element.

Presumably I want to add the variable to the button that I want to make longer or shorter but maybe I'm just confused :o

I'll understand if you don't want to spoon feed me with this and I will try some tutorials.

Mike

Nile
07-13-2008, 01:25 PM
Ok. Make the class, and in the hover of the class, copy the hover of the regular a:hover. Then change the background-position.

redmike
07-14-2008, 09:46 AM
Ok. Make the class, and in the hover of the class, copy the hover of the regular a:hover. Then change the background-position.

I just started at http://www.tizag.com/cssT/index.php

and have now got to 'classes' and will continue.

I think DreamWeaver is fantastic and have used it for several months.

It is wonderful that it writes CSS for you but the other side of the coin is that you could use if for years and still no nothing about CSS.

thanks,

Mike

P.S. There is always another side of the coin ;)