Tabbed Content:
Part II, Applying Style

Tabbed Content: Part II, Applying Style

Recently we constructed the layout for tabbed content. In this CSS3 tutorial, and Part II of the Tabbed Content tutorial series, we'll style our tabs and content.

Preparation

Like every web project, we'll need to include a reset stylesheet. Eric Meyer, the godfather of cross-browser compatibility, has created a simple, yet effective reset css which you can modify to your individual needs.

CSS3 Design

We used semantics in creating our tabbed content layout, which will now easily (and concisely) allow us to style our tabable content.

Overview

Our tabbed content is comprised of three different elements: a h1 to relay the page subject, a nav to navigate our tabs of content, and a section of sections to organize our information. The h1 is a stand-alone element while the nave floats to the left of the section container. We can construct this type of layout with some semantic css design, and without an overload of ids and classes.

Article
  1. /* Article
  2. ---------------------------------*/
  3. article{ width: 960px; margin:0px auto; padding:30px 10px 10px; float: none; clear: both; overflow:hidden; }
  4. article:after { content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }
  5. article:before{ content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }

The article element will act as our structure shell in this instance, so we'll set the width and also center it by setting the horizontal margin to auto.

It is my recommendation (and preference) to always define a width, set the overflow attribute to hidden (except when an overflow is needed), and also use :after (and :before when applicable) clear selectors for all parent and first-level elements. I suggest this approach to css design because it creates a rule or boundary for child elements and ensures the content flows as expected. This is important to consider because poorly developed web browsers (IE8 and under) did not follow certain web standards when it comes to element arrangement and positioning handling. For more information on clear-fixing, check out my article on how to create and use the Ultimate Cleafix.

H1
  1. /* H1
  2. ---------------------------------*/
  3. h1{ width: 960px; margin:0px auto 50px; padding-bottom:40px; border-bottom:1px dotted #E3E3E3; float: none; clear: both; line-height:35px; font-size:35px; font-family:Georgia; color:#000000; }
  4. h1:after { content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }
  5. h1:before{ content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }

The h1 will span the entire width of the layout, and we can give it some breathing room with a nice bottom margin of 20px.

Nav
  1. /* Nav
  2. ---------------------------------*/
  3. nav{ width:250px; border-top:1px solid #E3E3E3; float: left; clear: left; }
  4. nav:before{ content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }
  5.  
  6. nav a{ width:229px; min-height:38px; position:relative; padding:0px 10px; border:1px solid #E3E3E3; border-right:0px; border-top:0px; background:-moz-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); background:-ms-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); background:-webkit-gradient(top, #FFFFFF 0%, #F4F4F4 100%); background:-webkit-linear-gradient(top, #FFFFFF 0%, #F4F4F4 100%); background:gradient(top, #FFFFFF 0%, #F4F4F4 100%); display:block; overflow:hidden; line-height:40px; font-size:13px; color:#000000; }
  7. nav a:hover{ text-decoration:underline; }
  8. nav a.current{ width:230px; background:#FFFFFF; }

Using a subtle border color, and also the CSS3 background linear-gradient, matched against a close body-background color (I used #F6F6F5) creates a very sleek-looking navigation.

Section(s)
  1. /* Section
  2. ---------------------------------*/
  3. section{ width:710px; min-height:260px; float:right; clear:right; overflow:hidden; }
  4. section:after{ content:" "; height: 0px; display:block; float: none; clear: both; overflow:hidden; visibility:hidden; }
  5.  
  6. section section{ width:608px; min-height:260px; padding:50px; background:#FFFFFF; border:1px solid #E3E3E3; display: none; }
  7. section section.current{ display:block; }
  8. section section h2{ margin-bottom:40px; line-height:30px; font-size:30px; font-weight:bold; font-family:Georgia; color:#8C001A; }
  9. section section img{ max-width:220px; margin-right:20px; float: left; border:1px solid #AAAAAA; }
  10. section section p{ line-height:18px; font-size:13px; font-family:Helvetica,Arial,Sans-Serif; color:#000000; }

Note how we set the min-height of the child sections so that they don't jump around and look awkward – consistency is a big part of aestheticly-pleasing web design.

The Results of Applying CSS3 Design

The results of adding slight touches here-and-there goes a long way.

A Sleek CSS3 Tabbed Content Design

Cruisin' Along

We're almost complete, just the final step: creating the content toggle.

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 0 Total Responses