Skip navigation.
Up FrontArticlesabout alalive eventsxml feeds
Issn: 1534-0295. 20 October 2003 - Issue No. 160
Sliding DOORS OF CSS
By Douglas Bowman
A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2's current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has Already Provided Several Elements for Our Use.
One of those cases is tabbed navigation. It's time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on You Sites. You're Most Likey Aware That CSS Can Be Used to Tame A Plain Unordered List. Maybe You've Even Seen Lists Something Like THIS:
What if We Could Take The Exact Same Markup from The Tabs Above, and Turn Them Into Something Like this:
WITH SIMPLE STYLING, WE CAN.
WHERE's the innovation?
Many of the CSS-based tabs I've seen suffer from the same generic features:. Blocky rectangles of color, maybe an outline, a border disappears for the current tab, a color changes for the hover state Is this all CSS can offer us ? A Bunch of Boxes and flat colors?
Prior to a more widespread adoption of CSS, we started seeing a lot of innovation in navigation design. Creative shapes, masterful color blending, and mimicry of physical interfaces from the real world. But these designs often relied heavily on a complex construction of text- embedded images, or were wrapped with multiple nested tables. Editing text or changing tab order involved a cumbersome process. text resizing was impossible, or caused significant problems with page layout.Pure text navigation is much easier to maintain and loads more quickly than text- as-image navigation. Also, even though we can add alt attributes to each image, pure text is even more accessible since it can be resized by users with impaired vision. It's no wonder that pure text-based navigation, styled with CSS, is Leaping Back Into Web Design So Far Is A Step Back In Appearance from What Weisting To Do - Certainly Nothing to Be Included In A Design Portfolio. A Newly Adopted Techno LOGY (LIKE CSS) SHOULD Allow US To Create Sometting Better, WITHOUT LOSIING The Design Quality of Previous Table Hacks and all-image-based tabs.
The Sliding Doors Technique
Beautifully crafted, truly flexible interface components which expand and contract with the size of the text can be created if we use two separate background images. One for the left, one for the right. Think of these two images as Sliding Doors that complete one doorway The DOORS SLIDE TOGETHER AND OVERLAP MORE TO FILL A Narrow Space, or Slide Apart and Overlap Less To Fill A Wider Space, as The Diagram Below Shows:
With this model, one image covers up a portion of the other. Assuming we have something unique on the outside of each image, like the rounded-corner of a tab, we do not want the image in front to completely obscure the image behind it. to prevent this from happening, we make the image in front (left-side for this example) as narrow as possible. But we keep it just wide enough to reveal that side's uniqueness. If the outside corners are rounded, we should make the front image only as wide as the curved portion of the image: If the object grows any larger than the width shown above, due to differing text or type size changes, the images will get pulled apart, creating an ugly gap We need to. make an arbitrary judgment about the amount of expansion we'll accommodate. How large do we think the object might grow as text is resized in the browser? realistically, we should account for the possibility of our tab text increasing by at least 300%. WE NEED TO Expand The Background Images to Compens .
Keep in mind that background images only show in the available "doorway" of the element to which they're applied (content area padding). The two images are anchored to the outside corners of their respective elements. The visible portions of these background Images Fit Together Inside The Doorway To Form A Tab-Like Shape:
If the Tab Is Forced to a Larger Size, The Images Slide Apart, Filling A Wider Doorway, Revealing More of Each Image:
For this example, I used Photoshop to create two smooth, slightly three-dimensional, custom tab images shown at the beginning of this article For one of the tabs, the fill was lightened and the border darkened -. The lighter version will be used to represent the "current" tab Given this technique's model for left and right tab images, we need to expand coverage area of the tab image, and cut it into two pieces:.. The same thing needs to happen with the lighter current tab image Once WE Have All Four images Created, (1, 2, 3, 4) We can Jump INTO The Markup and CSS for Our Tabs.
Tab Creation
As you explore the creation of horizontal lists with CSS, you'll notice at least two methods for arranging a group of items into one row. Each comes with its own benefits and drawbacks. Both require dealing with rather funky aspects of CSS which quickly become Confusing. ONE Uses the inline box, The Other Uses floats.
The First Method - and possibly the more common - is to change the display of each list item to "inline" The inline method is attractive for its simplicity However, the inline method causes a few rendering problems in certain browsers for the Sliding Doors.. technique we're going to discuss. The Second Method, which is the one we'll focus on, uses floats to place each list item in a horizontal row. floats can be equally frustrating. Their seemingly inconsistent behavior circumvents all natural logic. Still A Basic Understanding of How To Deal With Multiple Floated Elements, And The Means To Reliably "Break Out" of floats (or contain theme) can achieve wonders.
We're going to nest several floated elements within another containing floated element. We do this so that the outer parent float completely wraps around the floats inside. This way, we're able to add a background color and / or image behind our tabs . It's important to remember that the next element following our tabs needs to reset its own position by using the CSS clear property This prevents the floated tabs from affecting the position of other page elements.Let's begin with the following markup.:
In Reality, The #header Div Might Also Contain A Logo and A Search Box. For Our EXAMPLE, We'll Shorten The Href Value in Each Anchor. Obviously, The Values Would Normal Contain File or Directory Locations.
We begin styling our list by floating the #header container. This helps ensure the container actually "contains" the list items inside which will also be floated. Since the element is floated, we also need to assign it a width of 100%. A Temporary Yellow Background Is Added To Ensure this Parent Stretches To Fill The Entire Area Behind The Tabs. We Also Set Some Default Text Properties, Ensuring Everything Inside Will Be The Same:
#header {float: Left; Width: 100%; Background: Yellow; font-size: 93%; line-height: Normal;
For now, we also set all of the default margin / padding value of the unordered List and list items to "0", and remove the list item marker. Each list item gets floated to the left: #header ul {margin: 0; Padding: 0; list-style: none;} #header li {float: Left; margin: 0; padding: 0;
We set the anchors to block-level elements sowe can control all aspect weworrying about the inline box:
#header a {display: block;}
Next, we add our right to the list item (Changes / Additional, ": 0000-00-00: 00-: 0000-00-00...............
# HEADER Li {Float: Left; Background: URL ("Norm_Right.gif") No-repeat right top; margin: 0; Padding: 0;
Before ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, , colors, and text.)
- - - -
Now we can place the left-side image in front of the right by applying it to the anchor (our inner element) We add padding at the same time, expanding the tab and pushing the text away from the tab edges.:
# HEADER A {Display: block; background: URL ("norm_left.gif") no-repeat left top; padding: 5px 15px;}
This gives us Example 2. Note how our tabs have begun to take shape. At this point, a word of acknowledgement to confused IE5 / Mac users, who are wondering, "What's going on here? The tabs are stacked vertically and stretch across the Entire Screen. "Don't worry, we'll get to you soon. for now, do your best to follow along, or temporarily switch to another browser if one is handy, and be associate we'll fix the ie5 / mac ies Some.
- - - -
Now that we have the background images in place for normal tabs, we need to change the images used for the "current" tab. We do this by targeting the list item which contains id = "current" and the anchor inside it. Since we do not need to alter any other aspects of the background, other than the image, we use the background-image property: #header #current {background-image: url ( "norm_right_on.gif");} #header #current a {Background-Image: URL ("norm_left_on.gif");}
We need some kind of border along the bottom of our tabs. But applying a border property to the parent #header container will not allow us to "bleed" the current tab through this border. Instead, we create a new image with the border WE Want Included Along The Bottom of The Image. While We're At It, WE Also Add A Subtle Gradient SO It Looks Like this:
We apply that image to the background of our #header container (instead of the yellow color we had), push the background image to the bottom of the element, and use a background color matching the top of this new image. At the same time , WE Remove The Padding from the Body Element I Originally Inserted for US, And Apply 10 Pixels of Padding to the top, Left, And Right Sides of the UL:
#header {float: Left; Width: 100%; Background: # dae0d2 URL ("bg.gif") REPEAT-X Bottom; font-size: 93%; line-height: normal;} #header ul {margin: 0 Padding: 10px 10px 0; List-style: none;
To complete the tab effect, we need to bleed the current tab through the border, as mentioned above. You might think we would apply bottom borders to our tabs matching the border color in the #header background image we just added, then change the border color to white for the current tab. However, doing this would result in a tiny "step" visible to pixel-precision eyes. Instead, if we alter the padding of the anchors, we can create perfectly squared-off corners inside the current tab , as the magnified example Below shows: we do this by decreasing the Bottom Padding of the Normal Anchor by 1 Pixel (5px - 1px = 4px), The Current Anchor of the THE CURRENT ANCHOR:
# HEADER A {Display: Block; Background: URL ("Norm_left.gif") No-repeat Left Top; Padding: 5px 15px 4px;} #header #Current A {Background-Image: URL ("Norm_left_on.gif"); Padding-bottom: 5px;}
The Change Allows The Bottom Border to Show Through For Normal Tabs, But Hides It for the current Tab. This BRINGS OUR CODE UP EXAMPLE 3.
Finishing Touches
Keen eyes may have noticed white tab corners showing up in the previous example. These opaque corners are currently preventing the image in the back from showing through the left corner of the image in front. In theory, we could attempt to match the corners of the tab images with a portion of the background behind them. But our tabs can grow in height, which pushes the background behind them lower, shifting the background color we tried to match. Instead, we change the images, making the corners of our tabs transparent ................... ..
Now that the corners are transparent, a piece of the right-side image shows through the corner of the left-side image. To compensate for this, we add a small amount of left padding to the list item equivalent to the width of the left -side image (9px). Since Padding Was Added to Remove That Amount from the Anchor To Keep The Text Center (15px - 9px = 6px): #HEADER Li {Float: Left; Background: URL ( "right.gif") no-repeat right top; margin: 0; padding: 0 0 0 9px;} #header a {display: block; background: url ( "left.gif") no-repeat left top; padding : 5px 15px 4px 6px;}
However, we can not leave it at that either, because our left-side image now gets pushed away from the left tab edge by the 9 pixels of padding we just added. Now that the inner edges of the left and right visible doorways butt up against each other, we no longer need to keep the left image in the front So we can switch the order of the two background images, applying them to opposite elements We also need to swap the images used for the current tab..:
#header li {float: Left; Background: URL ("Left.gif") No-repeat Left Top; Margin: 0; Padding: 0 0 0 9px;} #header a, #header strong, #header span {display: Block; Background: URL ("Right.gif") No-repeat right top; padding: 5px 15px 4px 6px;} #header #current {Background-Image: URL ("Left_on.gif");} #header #current a {Background-Image: URL ("Right_on.gif"); Padding-Bottom: 5px;}
Once we do this, we arrive at Example 4. Note that the tweaks required to make the corners transparent creates a small dead space on the left side of the tab where it's not clickable. The dead space is outside the text area, but it is slightly noticeable. Using transparent images for each side of our tabs is not required. If we prefer not to have the small dead space, we need to use a flat color behind the tabs, then use this color in the corner of our tab images instead Of Making The Transparent. We'll Keep The New Transparent Corners for Now.- - -
For the remaining tweaks, we make a slew of changes all at once: bold all tab text, change normal tab text to a brown color, make current tab text a dark gray color, remove link underlines, and change the text color for the link Hover State To The Same Dark Gray. We See All Additions and Changes So Far Represented in Example 5.
One Hack for Consistency
After Example 2, we acknowledged a problem with IE5 / Mac where each tab stretched across the entire browser width, forcing each one to stack vertically on top of each other. Not quite the effect we were intending.
In most browsers, floating an element will act sort of like shrink-wrapping it -. It gets shrunk to the smallest possible size of the contents it contains If a floated element contains (or is) an image, the float will shrink to the width ................... ..
A problem enters the picture for IE5 / Mac when an auto-width block-level element is inserted into a floated element. Other browsers still shrink the float as small as possible, regardless of the block-level element it contains. But IE5 / Mac does not shrink the float in this circumstance. Instead, it expands the float and block-level element to full available width. to work around this problem, we need to float the anchor also, but only for IE5 / Mac, lest we throw off other browsers First we'll set the existing rule to float the anchor Then we'll use the Commented Backslash Hack to hide a new rule from IE5 / Mac which removes the float for all other browsers:.. #header a {float: LEFT; Display: Block; Background: URL ("Right.gif") No-repeat right top; padding: 5px 15px 4px 6px; text-decoration: none; font-weight: bold; color: # 765;} / * commented BACKSLASH HACK HIDES Rule from IE5-Mac / * / #header a {float: none;} / * end IE5-Mac Hack * /
IE5 / Mac browsers should now display the tabs as intended, according to Example 6. Nothing should have changed for non-IE5 / Mac browsers. Note that IE5.0 / Mac suffers from a lot of rendering bugs that were fixed in the upgrade to IE5.1. Because of this, the Sliding Doors technique suffers in version 5.0 beyond a point I'm willing to hack. Since the upgrade to IE5.1 / Mac has been readily available for some time now, the percentage of OS 9 Macs STILL RUNNING IE5.0 SHOULD BE TAPERING OFF TO Almost Nothing.
Variations
We just walked through the Sliding Doors technique for creating tabbed navigation with pure text, marked up with an unordered list of links, altered with a few custom styles. It loads fast, is simple to maintain, and text within can be scaled up or down significantly in size without breaking the design. Need we mention how flexible the technique can be for creating any type of sophisticated-looking navigation? Use of this technique is only limited by our imagination. Our final example represents just one possibility. But we shouldn ' T let an esample place boundaries on ou Ideas.
For instance, tabs are not required to be symmetrical. I quickly created Version 2 of these tabs, which avoids the shaded 3-D look in favor of flat colors, angular edges, and a wider and more detailed left-side. We can even switch the order of left / right images, depending on the design, as Version 2 shows. with some careful planning and clever image manipulation, the bottom border could be abandoned in favor of matching the tab images with the background running behind them, as shown in my Deco-inspired Version 3. If your browser supports alternate style sheet switching, you can even view this master file, and switch between the three different versions by alternating between style sheets.
Other effects we do not cover here could be added on top of this technique. In the example I ran through, I changed the text color for the hover state, but entire images could be swapped out to create interesting rollover effects. Wherever two nested HTML elements already exist in the markup, CSS can be used to layer background images for effects we have not even begun to imagine yet. We created a horizontal row of tabs in this example, but Sliding Doors could be used in a many other situations What can you do with it? Translations
Italian (gdesign.it)
Russian (ID-AS.com)
Discuss
Was it good for you, Too? Discuss this article.
Founder and principal of Stopdesign, Douglas Bowman specializes in simple, clean, forward-thinking design. He constantly challenges and pushes the limits of what's possible using existing web standards. Douglas was the grand architect behind last year's well-known redesign of Wired News, But Promises Not to Hold On To That Reputation Forever.
Discuss
Talk about this article.
Bookmark
Permanent URI.
"It's time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites."
Search
Related Topics
Accessibilitycssdesignhtml | XHTMLTools
Departments
ContactContributecreditspermissionsq & A
Hot Topics
Accessibility 40Browsers | X-Platform 32Business 42Content 47CSS 62Culture 42Design 82DOM | Scripting 26Flash 9HTML | XHTML 53Process 25Server-Side 24Tools 27Typography 13Usability 27XML & Pals 13
Ala Lives At LogicWorks.
Basecamp Project Management Keeps your Clients, Co-Workers, And Projects on Track. Try IT Free!
