Folder tabs an issue?

M

manu40

New Member
Hello, this is my first post. I am fairly new to web design. I have coded an entire page, but am having trouble with the tabs i created in photoshop. While there are many 'folder tab' tutorials out there now, I have not been successful in any of them. Does anyone know of good tutorial site that may have the answer to my problem? Thanks in advance.


KarmaLayoutnavigation-1.jpg
 
jnjc

jnjc

New Member
This should work for you

There isn't really all that much to tabs when you break them down. Check out this link it should do what you need:

http://www.solasit.com.au/sandbox/webdesign/tabs

(I have only enabled the first two tabs).

Basically you make two images one is tab selected and the other is tab unselected (you could also do a hoover image). Then build your HTML so that on page one the class for you first tab is "tab tabSelected" and then every other tab has a class of just "tab". Page 2 then has second tab with "tab tabSelected" and then every other tab has a class of just "tab" and so on.

Just view source on the above link and you should see all the code you need.

It needs a bit of polishing but it should get you started.

HTH,
JC
 
M

manu40

New Member
jnjc, your response was great and it worked out amazing for me, I do have one other question though. Since we declare the font settings in the "div.tab" style, am I able to change the selected tab's font color in any way? As you can tell by the picture i posted the active button has a different color font than the unactive ones. Is this changable?
 
jnjc

jnjc

New Member
It's easy to change this setting. If you look at the class for the tab that is selected it has two style "tab tabSelected", by doing it this way you can put the stuff that is common to both in the "tab" style and the stuff that is particular to the selected tab in the "tabSelected" style.

For a selected tab, if you specify a setting in the "tab" and "tabSelected" the setting in "tabSelected" will overwrite the setting in "tab".

Have a look at the example again I have changed the style to use different font colors ....

http://www.solasit.com.au/sandbox/webdesign/tabs/index.htm

HTH,
JC
 
M

manu40

New Member
ahh, perfect. Thank you so much for your help. Folder tabs are seen a lot on the web today and thanks to your help I've gotten the best advice yet! cheers
 
You must log in or register to reply here.
Top