Sliding Door Technology in CSS

ISSN: 1534-0295. 20 October 2003-Issue No. 160

Author: Douglas Bowman

Original article from: A List Apart

54player.com nobita

Copyright Description: the Chinese translation in this article is copyrighted by the translator 54player.com nobita. If you need to reprint the post, please contact the author first

In CSS, an advanced feature that people often discuss is the layering of background images, and allows them to slide over each other to create special effects. According to the current regulations of CSS2.0, each background image requires its own HTML element. In many cases, a typical tag already provides multiple elements for a general interface component.

The label navigation bar is an example. In the past, we used these tags frequently and became a very popular site navigation method. Nowadays, with the widespread support of CSS, we can create a label navigation bar with higher quality and better appearance for our site. You may know that CSS can be used to "tame" Unordered Lists. You may have seen a list of tags for this style:

What should we do if we want to change the navigation label to this style with a similar tag?

After a simple design, we can do it.

Where is innovation?

Most of the CSS-based navigation labels I have seen have the following features: the rectangle color block may be just a contour, but there is no border for the selected label, the label changes the color when the mouse pointer moves over it. Is this all that CSS can give us? A series of small boxes and monotonous colors?

Before CSS is widely used, we have seen many innovations in tag navigation design. Original shape, skillful color mixing, and imitation of many physical interfaces in the real world. However, these designs often rely too much on complex, textual images, or packaged into several nested tables. Modifying text or changing the order of tags requires a complicated process. Text scaling is even more impossible, or it has a great impact on the page layout.

The text-only navigation bar is more user-friendly and faster to load than the text-or image navigation bar. Similarly, we can even add the alt attribute to each image. For the weak viewer, the size of the plain text can be changed freely. It is not surprising that, based on the plain text navigation bar and CSS styles, we will return to the Web design. However, most CSS-based navigation bar designs are meaningless so far. A recently adopted technology (such as CSS) can make us better, without losing the effects of the previously mentioned table and image labels.

Sliding Door Technology

Beautiful craftsmanship, truly flexible interface components, and based on the adaptive size of the text, we can use two independent background images to create it. One on the left and one on the right. Think of the two images as two sliding doors. They slide together and overlap to occupy a narrow space. Or they slide each other to occupy a wide space, as shown in the following figure:

In this model, one image masks part of another image. Suppose we place some unique content around each image, such as the label rounded corner, we do not want the above image to completely mask the following. To prevent this from happening, we can minimize the upper image (the one on the left in this example. However, we still need to ensure a certain width to show the uniqueness of the tag side. If the external side is a rounded corner, we should control the width of the above image and its arc section.

If the target increases in size and exceeds the width shown above, the image will be opened due to changes in the text size and font, resulting in a gap between the image and the image. We need to determine how large the scalability will be. If the font size is changed in the browser, what if the target increases? In reality, we should estimate at least the font size increases to 300%. Background images must also adapt to this growth. In the preceding example, we set the image below (that is, the right side) to 400*150 pixels, and the above image to 9*150 pixels.

In your mind, you must always understand that a background image only shows a valid space for content filling (that is, the content area and padding, called doorway ). These two images are always anchored with their external corners. The visible part of the background image is combined to form a space with this label shape (doorway ):

If the label is enlarged, the image will slide and the doorway will become wider, and the image will be revealed more:

In this example, I create two smooth, fine 3D tag images in photoshop, as shown at the beginning of the article. For one, the interior is bright and the border is dimmed to display the selected tag. To apply this skillful model to the left and right images, we need to expand the area covered by the label image and crop it into two parts:

In the same way, it is applied to a tag called "current. Once we have completed these four images (1, 2, 3, 4), we can start to use tags and CSS to create our labels.

Tag Creation

When you use CSS to create a horizontal list, you can find at least two ways to arrange list items in the same row. The two methods have their own merits, but they both need CSS to solve the layout chaos. One method uses inline box, and the other uses floats.

Method 1 may be a common one, that is, displaying list items in inline. The charm of the inline method lies in its simplicity. However, for the sliding door technology we will talk about, the inline method has some explanations on specific browsers. Method 2: We will pay attention to it, that is, using floats to arrange list items in the same row. It is frustrating that the seemingly conflicting behavior of floats bypasses natural logic. Even so, the basic understanding of multiple floating elements and the significance of reliable floating are worth discussing.

We will use another floating element to solve the problem of floating element arrangement. In this way, the parent element fully includes the child element. Therefore, we can add the background color and background image to the tag. It is very important to remember that the text elements that follow the label use the clear function in CSS to clear floating objects. This avoids the impact of floating tags on the location of other elements on the page.

We start with the following mark:

<div id="header">  <ul>   <li><a href="#">Home</a></li>   <li id="current"><a href="#">News</a></li>   <li><a href="#">Products</a></li>   <li><a href="#">About</a></li>   <li><a href="#">Contact</a></li>  </ul></div>

In reality, # header div may also contain the logo and search box. For our example, we need to shorten the value of the Super Link in each anchor. Obviously, these values should correctly include the location of the file or directory.

We will design the list from the position # header container. This ensures that the container actually acts as a container to accommodate its internal floating list items. Since the element is floating, we also need to declare that its width is 100%. Add a temporary yellow background to ensure that the parent class container fully fills the entire area behind the label. Similarly, set the default text attribute to ensure the uniformity of the style:

#header {  float:left;  width:100%;  background:yellow;  font-size:93%;  line-height:normal;  }

Now, we also need to set the default margin/padding value to 0 for the unordered list and remove the marker before the list item. Each list item is left floating:

#header ul {  margin:0;  padding:0;  list-style:none;  }#header li {  float:left;  margin:0;  padding:0;  }

When we set the force-Submission of the anchor as a block object, we can easily control all the styles:

#header a {  display:block;  }

Next, add the background image on the right to the list items (change as shown in FigureBold):

#header li {  float:left;  background:url("norm_right.gif")   no-repeat right top;  margin:0;  padding:0;  }

Before adding the left image, we can see the effect so far in effect 1. (In the effect, ignore the rules in the body. Only attributes of basic margin, padding, colors, and text are set .)

---

Now we can place the left-side image on the left side of the anchor (elements in the container ). We also add padding to expand the label and push the text away from the edge of the label:

#header a {  display:block;  background:url("norm_left.gif")   no-repeat left top;  padding:5px 15px;  }

In this way, we get result 2. Note how our labels are formed. Here, IE5/Mac users will immediately be surprised, "Oh, my tags are stacked vertically and stretched to the screen !" Don't worry. We will help you solve it right away. Now, try to follow the steps below, or change other browsers temporarily, and the problem of IE5/Mac version will be solved immediately.

---

Now, the general background image of the tag has been completed. We need to change the image for the "current" tag. We add id = "current" and anchor to the target list. Since you do not need to change the appearance of the background, except for images, we will use the features of background-image:

#header #current {  background-image:url("norm_right_on.gif");  }#header #current a {  background-image:url("norm_left_on.gif");  }

We need to add a border under the tag. However, if you apply the border attribute to the # header container of the parent class, the "current" label does not require borders. So we made a new image with a border to replace it. Similarly, we can add gradient effects to it:

We place the image in the # header container background (instead of the original yellow background), move the background image to the bottom, add the background color to the blank area above the image. At the same time, remove the padding inherited by the body and add 10 pixels of padding to the upper, left, and right sides of 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;  }

We must overwrite the border with the "current" label, as shown below. You may think that we will add the bottom border to the # header background image corresponding to its color, and then change the bottom border color of the "current" label to white. However, the discerning observer will still find some small differences. Therefore, we changed the padding of the anchor to create a right angle for the "current" tag, as shown in the following example:

We can achieve this by reducing the bottom padding value (5px-1px = 4px) of a 1 pixel normal anchor and then adding the subtracted padding to 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;  }

After the changes, the bottom border will appear in the common label, but hidden in the "current" label. Therefore, we achieved result 3.

Finishing work

A keen observer may notice the white label corner in the previous example. These opaque corners are used to prevent the following image from passing through the top pair. Theoretically, we can try to use some background images to adapt to the label background. However, our labels will increase in height. by moving the background color, the background image will be shorter. The alternative is to change the image and set the corner of the tag to transparent. If the arc is anti-sawtooth, we use a relatively average background color on its edge.

Now, the corner has become transparent, and the image on the left is passed through the corner on the right. To compensate, we add a padding (9px) that matches the width of the left image to the form item ). Since padding has been added to the form item, we need to remove the same width to center the text (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;  }

It is not over yet because nine pixels of padding are added, leading to a blank gap between the left side of the image and the left side of the label. Now, the "doorway" edge is connected on the left and right, and we do not need to keep the left image above. Therefore, the order of the two background images is reversed. Exchange the two images used in the current Tag:

#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;  }

After completing these steps, we achieved result 4. Note that a transparent corner produces an invalid area on the left of the tag that cannot be clicked. This area is beyond the text, but still noticeable. It is unnecessary to use transparent images on both sides of the tag. If we do not want to produce this invalid area, we must use the color behind the tag, and then use this color to replace the transparent image in the tag corner. Now we only keep this transparent corner.

---

For the remaining problems, we will complete all the modifications at one time: Increase the label text, change the text in the common label to Brown, change the "current" label text to dark gray, remove the link underline, finally, change the hover text color to the same dark gray color. After a series of changes, we will see the effect of 5 so far.

Consistency Solution

After effect 2, we acknowledge that in IE5/Mac browser mode, each tag is extended and occupies the width of the entire browser, so that the labels are vertically stacked together. This is not what we want.

In most browsers, floating an element will shrink to the minimum size of the content it contains. If a floating element contains an image or an image itself, it is reduced to the image width. If only the text is included, the text width will be reduced to the longest and cannot be lifted.

A problem occurs in IE5/Mac images. When an auto-width block object element is inserted into a floating element. Other browsers still minimize the float, regardless of the block object elements in the container. However, IE5/Mac does not follow this situation. On the contrary, it expands floating and block object elements to the maximum width. To solve this problem, we will float the anchor at the same time, but only for IE5/Mac, so as not to discard other browsers. First, we set floating rules for the anchor. Then, we use the backslash annotation method to hide this rule so that it only takes effect for IE5/Mac, regardless of 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 */

Now, the IE5/Mac browser will display the labels as we expected. The effect is 6. For non-IE5/Mac browsers, nothing needs to be changed. I noticed that the bug in IE5.0/Mac was fixed in IE5.1. Therefore, the problems encountered by the sliding door technology in version 5.0 exceed the limits of the hack. Since upgrading to IE5.1/Mac is no longer a problem, the share of OS 9 Macs/IE5.0 should be gradually reduced to a very low level.

Let alone

We have just rehearsed the sliding door technology and used plain text and Unordered Lists to create navigation labels and add a few styles. It is fast to load and can be maintained, and the size of the text can be scaled without damaging the appearance. We don't have to reiterate the elasticity of the sliding door technology in the navigation bar that creates complex styles.

I can't think of it. The final results show us an example, but it is impossible for us to limit the design.

In some cases, tags are not necessarily symmetric. I soon created the second version of this label, with shadow 3D styles, corner edges, and distinctive left-side sections. Based on the second version, we can even swap the positions of the left and right images. With this meticulous layout and smart image control, we can remove the lower border of the button to better adapt the label image to the background, as shown in the third version. If your browser supports switching between multiple style sheets, you can even switch between the navigation bars of multiple versions.

There are still many other effects we have not mentioned. For a quick introduction, I changed the text color of the mouse hover, but a real image can be replaced to create a more interesting transformation effect. Even if two nested HTML elements are marked, CSS can be used to achieve some effects that we have not yet imagined. In this example, we only create a horizontal label bar, but the sliding door can also be applied to many other situations. What do you think?

Other language versions in this article

English (alistapart.com)

Italian (gdesign. it)

Russian (id-as.com)

Click here to participate in the discussion about this article

Translated with the permission of A List Apart Magazine and the author [s].

Translator's words: for the first time I translated the article, many words were left blank and some mistakes were inevitable. I hope readers will correct them.

Email: mencken. wong (at) gmail.com