Practical Ecommerce

Video Tutorial: Tabbed Content

View Tutorial 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:

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.

Brian Getting

Brian Getting

Bio   •   RSS Feed


Sign up for our email newsletter

  1. Legacy User October 4, 2007 Reply


    Nice, realy nice. But you missed a , between Tahoma and sans-serif at the end ;)

    Over and out

    — *Magnus jahrl*

  2. Legacy User October 4, 2007 Reply

    An excellent tutorial. I'm looking forward to the next one.

    — *Mike Sturdivant*

  3. Legacy User October 4, 2007 Reply

    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*

  4. Legacy User October 4, 2007 Reply

    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*

  5. Legacy User October 11, 2007 Reply

    excellent tutorial for a CSS novice.
    Well explained


    — *Keith Walsh*

  6. Legacy User October 12, 2007 Reply

    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*

  7. Legacy User October 29, 2007 Reply

    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*

  8. Legacy User May 8, 2008 Reply

    I have been looking for months to find someone who can SIMPLIFY how to do this. Thanks so much!!

    — *Bridget*