Manage Subscriptions · Subscribe Now · F.A.Q.'s
HOME · Monday, May 12, 2008
Development & Programming
Video Tutorial: Tabbed Content
An interesting way to simultaneously save page space and effectively present information
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
Click the image below to launch the 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.
Blinklist | Del.icio.us | Furl | Ma.gnolia | Newsvine | Spurl | Reddit | Technorati
Published on Thursday, October 04, 2007
Comments:
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.
Posted by: Erik Schubach
Thursday, October 04, 2007
An excellent tutorial. I'm looking forward to the next one.
Posted by: Mike Sturdivant
Thursday, October 04, 2007
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.
Posted by: Brian Getting
Thursday, October 04, 2007
excellent tutorial for a CSS novice.
Well explained
Thanks
Posted by: Keith Walsh
Thursday, October 11, 2007
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.
Posted by: Shasta
Friday, October 12, 2007
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.
Posted by: ragz
Monday, October 29, 2007
I have been looking for months to find someone who can SIMPLIFY how to do this. Thanks so much!!
Posted by: Bridget
Thursday, May 08, 2008
Ecommerce Articles
- Browse All Articles
- Browse our complete archive of ecommerce articles.
- Accounting, Management & Legal
- Ecommerce articles related to managing a small business including ecommerce accounting, business strategy and legal considerations.
- Conversion & Usability
- Online business articles about converting web site visitors into customers and how to gauge and improve your business website's usability.
- Development & Programming
- Articles to help designers, developers and programmers create successful, search engine friendly ecommerce websites and improve existing ones.
- Hosting, Infrastructure & Software
- Articles for ecommerce businesses about ecommerce web hosting, business infrastructure, business strategy and helpful ecommerce & small business software.
- Interviews & Profiles
- Interviews with prominent ecommerce business personalities and profiles of successful online businesses.
- Inventory & Shipping
- Ecommerce articles about inventory management, ecommerce order fulfillment and product shipping considerations.
- Marketing & Revenue Growth
- Articles relating to online marketing, email marketing and using the Internet to growing your business.
- Search Engine Optimization
- Search engine optimization articles for ecommerce business owners, strategists, marketers and developers.
- Shopping Carts & Online Payments
- Articles covering ecommerce shopping cart platforms and options for choosing an online payment gateway.
- Training & Education
- Tutorials and articles providing training and education for ecommerce business owners and developers of ecommerce websites.
Search Articles
Ecommerce Community
- Ecommerce Blogs
- Read our blogs about ecommerce topics written by industry professionals.
- Community Forum
- Connect with other ecommerce professionals to trade advice and answers in our community forum.
- Podcasts
- Check out our ecommerce podcasts covering topics ranging from interviews to tutorials.
- RSS Content Feeds
- Subscribe to our RSS feeds and have fresh ecommerce content delivered to you.
Ecommerce Resources
- Free Email Newsletter
- Sign up for Ecommerce Notes, our free email newsletter for ecommerce business owners and developers.
- Ecommerce Directory
- Browse our directory of ecommerce products and services, or submit your own listing in our directory.
- Ecommerce Glossary
- Familiarize yourself with terminology or submit terms to help others with our Ecommerce Glossary.
- Events Calendar
- Find out about upcoming ecommerce events or invite other ecommerce professionals by posting your own event.
- Press Releases
- Browse ecommerce related press releases and post your own press release for distribution.
- Ecommerce Store & Back Issues
- Pick up back issues of Practical eCommerce magazine along with other merchandise from Practical Ecommerce
About Practical eCommerce
- Frequently Asked Questions
- Look at frequently asked questions regarded using our website, subscribing to our magazine and more.
- Advertising Information
- Information about advertising in Practical eCommerce magazine, on our website, or in our email newsletters.
- Editorial Sharing
- Learn about options for sharing our content with your visitors, customers or employees.
- About Us
- Learn more about Practical Ecommerce magazine and meet our staff.
- Contact Us
- Contact Practical Ecommerce at any time for more information. We'd love to hear from you.
Copyright 2007 Confluence Distribution, Inc. and Practical eCommerce.
All Rights Reserved.
Hi,
Nice, realy nice. But you missed a , between Tahoma and sans-serif at the end ;)
Over and out
.mange
Posted by: Magnus jahrl
Thursday, October 04, 2007