ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down.
Read our Farewell Blog Post for more details.
CSS Advice for Tabbed Content
-
-
- NintendoNerds
- Hero Rocketeer
- Posts: 467
- Thanks: 0
-
I've created an article (K2 item) that has tabbed content, allowing you to switch tabs to see different information so the page doesn't have to be reloaded.
The CSS I have created is pretty basic, but because I'm still learning. I'm not even sure if the CSS is correct or not. I mean, it's working, but is the CSS getting used efficiently or can I combine?
I'm looking for some advice on how to make this look better. Also, should I be using a table format or should I change it to a div?
Any help is greatly appreciated.
www.nintendonerds.com/friend-codes
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi. I looked at your site, it's helpful to use a browser plug-in like firebug or use the "Inspect Element" option offered in Chrome or Safari to identify the div id's for your tabs. In your case, the tabs created by K2 are divs with individual id's. Your DS/DSi tab has an ID of "tabber64_div_1" - see my attachment to see the output code for your tabs.
Once you know the id, you can style it anyway you wish in your style sheet, for example:That should change your DS/DSi tab to a black background without affecting the other 2.div#tabber64_div_1{background:black;}
If you want to style all of them the same, you would use the class namediv.simpleTabsContent{background:black;}
As far as tables vs. divs goes. I think in this case, it's okay to use a table. You are presenting tabular data, that's what tables are for. You just shouldn't use tables to create your website layout.
Beyond that, I think it looks good. It is very simple, which is fine. Some simple changes would include background color or images, adding borders or box-shadows - just google for the CSS if you don't know it. Hope this helps. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- NintendoNerds
- Hero Rocketeer
- Posts: 467
- Thanks: 0
-
Thanks for the quick reply, Cliff!
Cliff Pfeifer wrote:Hi. I looked at your site, it's helpful to use a browser plug-in like firebug or use the "Inspect Element" option offered in Chrome or Safari to identify the div id's for your tabs.I do. I use Firefox with Firebug.
Cliff Pfeifer wrote:In your case, the tabs created by K2 are divs with individual id's. Your DS/DSi tab has an ID of "tabber64_div_1" - see my attachment to see the output code for your tabs.I appreciate you pointing that out. I was able to style the tabs, but I didn't know how to style each one individually. Now that I know they have individual IDs, I can do that. Thanks!
Once you know the id, you can style it anyway you wish in your style sheet, for example:That should change your DS/DSi tab to a black background without affecting the other 2.div#tabber64_div_1{background:black;}
If you want to style all of them the same, you would use the class namediv.simpleTabsContent{background:black;}
Cliff Pfeifer wrote:As far as tables vs. divs goes. I think in this case, it's okay to use a table. You are presenting tabular data, that's what tables are for. You just shouldn't use tables to create your website layout.OK, cool. That's good to know then.
Cliff Pfeifer wrote:Beyond that, I think it looks good. It is very simple, which is fine. Some simple changes would include background color or images, adding borders or box-shadows - just google for the CSS if you don't know it. Hope this helps.I appreciate your feedback. I think simple is great sometimes. The last thing I want is to provide overkill for my site and users.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
- Cool. Good extensions, like K2, have a built in system that generates unique id's for this purpose. Sometimes you have to dig a little deeper to find a div you can target with your css, that's what the firebug is best at. Good luck.
- The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.061 seconds