Sliding door technology in CSS _css/html

issn:1534-0295. October 2003–issue No. 160

Original Author: Douglas Bowman

Source: A List Apart

Chinese translation: 54player.com Nobita

Copyright Note: The Chinese translation of this document is copyrighted by the translator 54player.com Nobita. If you need to reprint the publication, please contact the author first.

In CSS, one of the most frequently discussed advances is the stackable nature of the background image, and allows them to swipe over each other to create special effects. According to CSS2.0 's current rules, each background image requires its own HTML element. In many cases, the typical markup has provided a variety of elements for general interface components for our use.

The label navigation bar is one example. In the past, we used these tags frequently, and have become a very popular way of site navigation. Nowadays, with the prospect of CSS being widely supported, we can make the label navigation bar of higher quality and better appearance for our site system. You may know that CSS can be used to "tame" unordered lists, and perhaps you've seen a list of tags for this style:

What if we want to change the navigation label to this style using a tag like the above?

After a simple design, we can do it.

Where is the innovation?

Many of the CSS-based navigation tags I've seen have a class of features: a rectangular color block, perhaps just a silhouette, and no border for the currently selected label, and the label changes color when the mouse pointer swims over it. Is this all the CSS can give us? A series of small boxes and monotonous colors?

Before CSS was widely adopted, we have seen many innovations in label navigation design. Original shape, skilled color mixing, and imitation of many physical interfaces in the real world. However, these designs tend to be overly dependent on complex-crafted, text-based images, or packaged into several nested tables. Modifying the text or changing the order of the labels requires a complex process. The scaling of the text is more impossible, or gives the page a great impact on layout.

Plain text navigation bars are more persistent and faster to load than text-to-image navigation bars. Similarly, we can even add an ALT attribute to each image, and for those with amblyopia, plain text is more free to change size. Not surprisingly, a plain-text-based navigation bar, with CSS styling, is back in the web design. However, most CSS-based navigation bar designs are still meaningless to date. A recently adopted technology, such as CSS, allows us to do better, without losing the effect of the previously mentioned tables and image labels.

Sliding Door Technology

Beautiful craftsmanship, truly flexible interface components, and according to the text adaptive size, we can use two separate background images to create it. One on the left and one on the right. Think of these two images as two sliding doors that slide together and overlap, occupy a narrower space, or slip away to occupy a wider space, as shown:--

In this model, an image masks part of another image. Let's say we put some unique content around each image, such as the rounded corners of the labels, and we don't want the image above to completely obscure the next pair. To prevent this from happening, we can control the image (the left side of this example) as narrow as possible. But still have to guarantee a certain width to show the uniqueness of the label side. If the outside is rounded, we should control the image above and its Arc section to have the same width.

If the target grows in size and exceeds the width shown above, it is attributed to the text size and font changes, the image will be pulled apart, resulting in an unsightly gap. What we need to determine is how large the amount of this expandable will be predicted. If you change the size of the font in the browser, what if the target grows? In practice, we should at least estimate the size of the font to grow to 300%. Background images also have to adapt to this growth. For the above example, we set the image below (that is, to the right) to 400*150 pixels, which is set to 9*150 pixels.

In the mind, always be aware that the background image simply shows a valid space for the content to fill (that is, the content area and padding, called doorway). The two images are always anchored to the corners of the respective exterior. The visible part of the background image is formed in a space with this label shape (doorway):

If the label is stretched, the image slides open, the doorway becomes wider, and the image is revealed more:

In this example, I made two smooth, thin 3D label images in Photoshop, as shown at the beginning of the article. For one, the interior is bright and the border is dimmed to show the currently selected label. Applying this technique model to the left and right two images, we need to enlarge the area covered by the label image and cut it into two parts:

The same approach will be applied to the label called "Current". Once we have completed these four images (1, 2, 3, 4), we can start making our labels with tags and CSS.

The creation of labels

When you're researching using CSS to create a horizontal list, you'll find that there are at least two ways to arrange the list items on the same line. The two methods are different, but all require CSS to solve the clutter of the layout. One method uses the inline box, and the other uses floats.

Method one, which is probably a more common one, is to display the list items inline. The charm of the inline method is its simplicity. However, for the sliding gate technology we are going to talk about, the inline method has some explanatory problems on the particular browser. Method Two, which we are going to focus on, is to use floats to arrange the list items in the same row. What is frustrating is that the seemingly contradictory behavior of floats is a natural escape from the logic of nature. Nonetheless, the basic understanding of multiple floating elements and the significance of reliable floating are still worth discussing.

We will use another floating element to solve the problem of permutation of floating elements. This way, the parent class element completely includes the subclass element. As a result, we can add background color and background image to the label. It is important to remember that the text element immediately following the label clears the floating object with the clear function in the CSS. This avoids the position of floating labels affecting other elements on the page.

We start with the following tags:

  
 
  
  
   
  
   
   
Home
   
  
   
   
News
   
  
   
   
Products
   
  
   
   
About
   
  
   
   
Contact
  
 
  
  

In reality, #header div may also contain logos and search boxes. For our example, we want to shorten the value of hyperlinks in each anchor chain. Obviously, these values should contain the location of the file or directory correctly.

We start by positioning the #header container to design the list. This ensures that the container actually acts as a container to contain the list items that are floating inside it. Since the element is floating, we also need to declare it to be 100% wide. Add a temporary yellow background to ensure that the parent class container fills the entire area behind the label completely. Similarly, set the default text properties to ensure that the style is uniform:

#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 unordered lists, and remove the tag that precedes 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;  }

By setting the anchor chain as a block object, we have the hassle-free control of all styles:

#header a {  display:block;  }

Next, we'll add the background image on the right side to the list item (change as shown in bold ):

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

Before adding the image to the left, we can look at the effect in 1 ways so far. (In the effect, the rule in body is ignored.) Only the properties of the base margin,padding,colors,text are set. ）

---

Now we can place the left image on the left side of the anchor chain (the element inside the container). We also add padding, 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;  }

So we get the effect 2. Notice how our labels are shaped. Here, Ie5/mac users will immediately be surprised, "Oh my God, my tags are stacked vertically and extend to the entire screen!" "Don't worry, we'll fix it for you right away." At the moment, try to do as below, or conveniently, temporarily change other browsers, and IE5/MAC version of the problem will be resolved immediately.

---

Now that the background image of the generic label is complete, we want to replace the image for the "current" tab. We do this by adding id= "current" and anchor chain to the target list item. Since there is no need to change the other appearance of the background, except for the image, we use the Background-image feature:

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

We want to add a border under the label. However, applying border properties to the #header container on the parent class will not solve the problem of the "current" label Without Borders. So we made a new image with a border in place of it. Again, we can add a gradient effect to it:

We place the image in the background of the #header container (in place of the original yellow background), move the background image to the bottom, and add the corresponding background color to the whitespace left above the image. At the same time, remove the padding inherited from the body, for the top, left and right of the UL add 10 pixels to the padding:

#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 have the "current" label overlay the border, as prompted below. You might think that we're going to add the bottom border to the #header背景图像中去 that corresponds to its color, and then change the bottom border color of the "current" label to White. However, for the discerning observer, there are a few small differences to be found. Thus, we change the padding of the anchor chain, creating a right angle for the "current" label, such as the following magnified example:

We do this by reducing the bottom padding value (5px-1px=4px) of the 1-pixel normal anchor chain and then filling the "current" anchor with the minus padding.

#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 change, the bottom border will appear in the Normal tab, while the "current" tab is hidden. So, we got the effect 3.

Finishing work

A keen observer may notice the white label corner in the previous case. These opaque horns are used to prevent the image below from being through a pair. Theoretically, we can try to use a partial background image to fit the background of the tag. But our labels will grow at a high level, trying to move the background color, the background image will be relatively short. Instead, change the image to make the corner of the label Transparent. If the arc is anti-aliased, we use a more average background color on its edge.

Now, the corner has become transparent, the left image will pass through the corner of the image on the right. To compensate, we add a padding (9px) that matches the width of the left image to the table item. Now that we have added padding to the form items, we also need to remove the same width to reach the center of 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;  }

is still not finished, because adding a 9-pixel padding causes a gap between the left image and the left side of the label. Now, on the left and right side, the edges of the visible "doorway" are joined together, and we don't need to keep the left image above. Instead, swap the order of the two background images. Also swap the two images used in 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;  }

After completing these, we reached the effect 4. Note that the transparent corner creates an invalid area on the left side of the label that cannot be clicked. This area is outside the text, but is still perceptible. It is not necessary to use transparent images on both sides of the label. If we do not want to produce this invalid area, then we must use the color behind the label, and then use this color instead of the transparent image in the corner of the label. Now we only keep this transparent corner.

---

For the rest of the problem, we will complete all the changes at one time: Add the text of the label, change the text in the normal label to Brown, the "current" label text to dark gray, remove the link underline, and finally change the hover text color to the same dark gray. After a series of changes, we will see 5 effect so far.

Resolution of consistency

After effect 2, one of the problems we've recognized is that in Ie5/mac browsing, each tag extends and occupies the width of the entire browser so that the tags are stacked vertically. This is not what we want.

In most browsers, floating an element shrinks and shrinks to a minimum the size of the content it contains. If a floating element contains an image or itself as an image, it shrinks to the width of the image. If it contains only text, it will shrink to the longest, the width of the text that cannot be opened.

A problem arises in the picture in Ie5/mac, when a auto-width block object element is inserted into a floating element. Other browsers still reduce the float to a minimum, ignoring the block object elements within the container. But Ie5/mac does not follow this case, instead it expands the floating and block object elements to the widest possible width. To solve this problem, we will float the anchor chain at the same time, but only for Ie5/mac, so as not to abandon other browsers. First, we set the floating rules for the anchor chain. We then use the backslash notation to hide the rule so that it only takes effect on IE5/MAC and ignores the 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 label as we expect it to look at the effect 6. Nothing needs to change for a non-Ie5/mac browser. Note that Ie5.0/mac's series of explanatory bugs are addressed in IE5.1. As a result, the problems encountered in the 5.0 release of sliding door technology are beyond the limits of hack. Since upgrading to Ie5.1/mac is no longer a problem, OS 9 macs/ie5.0 's share should be reduced to very low.

Extrapolate

We have just rehearsed the sliding door technique, using plain text and unordered lists to create navigation labels with a small amount of style. It has a fast loading speed, is maintenance-capable, and the size of the text can be scaled without damaging the appearance. It is not necessary to reiterate the elasticity of sliding door technology in the creation of complex style navigation bars.

Only unexpected, not to do. The final effect shows us an example, but our design cannot be limited to death.

In some cases, the label is not necessarily symmetrical. I soon made a second version of this label, with a shadow 3D style, angled edges, and a distinctive left part. Based on the second version, we can even swap the position of the left and right two images. With this meticulous layout and clever image control, we can remove the bottom border of the button so that the label image is better adapted to the background, as shown in the third version. If your browser supports multiple style sheet transitions, you can even switch between multiple versions of the navigation bar.

There are still many other effects that we have not mentioned. Quick mention, I change the mouse hover text color, but the image can be replaced to create a more interesting transformation effect. Even if you have two nested HTML elements in the markup, you can use CSS to achieve some of the effects that we have not yet thought of. In this case we created just the Horizontal tab bar, but the sliding door can also be used in many other situations. What do you think?

Other language versions of this article

English (alistapart.com)

Italian (gdesign.it)

Russian (id-as.com)

Click here to join the discussion on this article

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

Translator's words: The first translation of the article, for many use the word noncommittal, inevitably have some mistakes, expect readers to correct.

Email:mencken.wong (at) gmail.com

