Help with CSS Tabs (Tab Content Script (v 2.2))

[dbUNIT16]

1) Script Title:
Tab Content Script (v 2.2)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem:

I have it running here:
http://azfans.com/tabs/tabs.php

but am having one heck of a time styling the tabs. It's almost like there is some styling built into the script. I am having to use negative margins to get it to look somewhat right, and am not sure why.

Can someone please help? The bar to the right of "More" should be the same height and color as the rest of the tabs.

Also, the margin around the entire tabs and content box should be removed.

Help is greatly appreciated!

Thank you,

Jon

[ddadmin]

The unequal height between the tabs and their parent container is basically due to the CSS for the Shade Tabs itself. While you can tweak the CSS to try and make it behave the way you want, an easier way perhaps is just to swap out that CSS with something you know comes close to what you have in mind already.

Looking at your page, Matt Tabs Menu (http://www.dynamicdrive.com/style/csslibrary/item/matt_black_tabs/) seems like a good fit. Using it, first, replace the original tabcontent.css file with the attached, then, replace the HTML for your main tabs with the slightly altered one below:


<div class="mattblacktabs">
<ul id="countrytabs">
<li><a href="#" rel="country1" class="selected">All</a></li>
<li><a href="#" rel="country2">Suns</a></li>
<li><a href="#" rel="country3">D-Backs</a></li>
<li><a href="#" rel="country4">Cardinals</a></li>
<li><a href="http://www.azfans.com/forums">More</a></li>
</ul>
</div>

[dbUNIT16]

Thanks! I noticed that this seams to be just a nav bar, the content doesn't change before the tabs...

I am not able to try the code right now, but it should work the same way, displaying the content 1, content 2, etc. for each tab?

Thanks,

Jon

[ddadmin]

I am not able to try the code right now, but it should work the same way, displaying the content 1, content 2, etc. for each tab?


Yep, the modification above merely replaces the CSS tabs used by Tab Content script with the new one.