Tabbed content appears more and more frequently in web pages, and is an interesting way to simultaneously save page space and effectively present information. In part one of this two-part tutorial on creating tabbed content, Practical eCommerce's online director Brian Getting illustrates how to create an XHTML/CSS based page layout that will work for tabbed content.
Software Used: TextMate
Additional Files: tabs_tutorial_1.zip
View Tutorial
This video tutorial requires Flash Player version 8 or above. Please forward us your ideas for additional video tutorials, via our Contact Us form.
Thursday, October 04, 2007 · 10:34 AM
Good job! This was a well done tutorial, besides Magnus's comment, the only thing I notice is that the white border-bottom in the "selected" class will not render properly in IE but does not diminish from the overall effect.
I look forward to the conclusion of this tutorial.
I would like to point out that there is a SEO impact to tabbed pages like this. Having all the content on one page like this, while indexable by the search engines, has less of an positive effect than if each tab were it's own page. The drawback to individual pages is offset by the advantage of the number of indexable pages.
-- Erik Schubach
Thursday, October 04, 2007 · 11:56 AM
Oops. That typo was my fault, thanks for pointing that out, Magnus.
As for the SEO argument, I agree. However, this is just a simple tutorial to illustrate CSS tricks. Ideally such tabs would be handled with a degradable Ajax solution, so that the content would be loaded in on demand, but it would also be friendly to search engines and non-javascript visitors.
Someday I will put together a tutorial on Ajax stuff, but for now we are sticking with the introductory topics. Thanks for your input, keep it coming.
-- Brian Getting
Friday, October 12, 2007 · 02:47 PM
I found this very useful if you're an advanced user but for someone who didn't know how to create a .css file that step was completely missing. Also not everyone has Adobe Photoshop so I wasn't able to create the gradient effect. I'm not sure how that will affect my actual use of this.
I also didn't see a step for uploading the .css to my site to make it all work.
I would like to know how to use this without affecting SEO for my site though. I had intended to use this for my site template and I'm new to internet, HTML, etc.
-- Shasta
Monday, October 29, 2007 · 06:10 PM
Hey, the tutorial was excellent, but only problem i see is, if there are many tabs (in the example you just have four tabs, say if you have 10 / more tabs) then tabs don't line up properly.
-- ragz
Connect with us