100% sliding door in the click Area

Friends who are studying the standard will generally come into contact with the CSS sliding door technology during the learning process. Maybe everyone has read this article, "Sliding Door Technology in CSS". if you have not touched or have not read the above or forgotten content, you can click the link of the above article to learn about or review it.

In the example of a sliding door in CSS, you may have carefully tested and discovered that there are nine pixel blind spots in the connection area that cannot be clicked, and in IE, only the text part size can be clicked, and the entire button block cannot be clicked. However, we may expect that the entire button block can be clicked, and blind spots are not allowed.

So how can we implement it? Next we will discuss some solutions:

First, for convenience, we should first move the code in CSS Sliding Door Technology:

XHTML section:

<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>

CSS section:

#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;}#header li  {float:left;background:url("left.gif") no-repeat left  top;margin:0;padding:0 0 0 9px;}#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 Hackhides rule from IE5-Mac \*/#header a  {float:none;}/* End IE5-Mac hack */#header a:hover  {color:#333;}#header #current  {background-image:url("left_on.gif");}#header #current a  {background-image:url("right_on.gif");color:#333;padding-bottom:5px;}

Method 1: Use the negative margin of the Relative Position

To eliminate the blind spots of the 9px sliding door, set the margin of Li to 9px (9px is the width of the left image) and the background of Li to the right image, which is not repeated and aligned on the top right.

#header li {background:url("right.gif") no-repeat right  top;margin-left:9px;}

Then let a move 9px to the left to overwrite the blind spot. How can we move it? The relative position (position: relative;) can be used for a, and a negative value is used to move 9px (left:-9px ;). Because the width of Li is equal to the width of a, when a is shifted relative to 9px, there will be a 9px blind zone on the Right of Li. How can this problem be solved? We use the negative margin of a to solve (margin-Right:-9px ;).

#header a  {position:relative;left:-9px;margin-right:-9px;}

Set the background of the left image as a, which is not repeated and aligned on the top left, and set the text padding. Note that the area of A is the area of the entire button, therefore, the values of padding-left and padding-right should be 15px.

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

Note the following details: in IE, the link area is the text area rather than the button area, and in other browsers with better standard support, it is the button area. To solve this problem, we specify a fixed width for ie a to trigger ie layout (optional. 1em, 1px, 1% equivalent), but in this way, a will recognize this width in other browsers with better standard support, we choose Browser identification that supports better standards, and IE6 does not recognize any sub-selector to make the width of a auto.

#header a {width:.1em;}#header > ul a  {width:auto;}

Correspondingly, make some adjustments to the image position in the current selector:

#header #current  {background-image:url("right_on.gif");}#header #current a  {background-image:url("left_on.gif");padding-bottom:5px;}

Let's sort out and optimize the CSS code:

#header li {background:url("right.gif") no-repeat right  top;margin:0 0 0 9px;}#header a  {position:relative;left:-9px;margin-right:-9px;width:.1em;background:url("left.gif")  no-repeat left top;padding:5px 15px 4px;}#header > ul a  {width:auto;}#header #current  {background-image:url("right_on.gif");}#header #current a  {background-image:url("left_on.gif");padding-bottom:5px;}

Method 2: Add a span tag

This method can only be used for exercises and experiments. It is not recommended for actual layout (only not recommended for use). After all, a span tag without semantics is added.

First, add the <span> label to the Structure Code:

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

Some friends may ask why to add <span> elements. The reason is actually very simple. We use a and span to simulate the sliding door technology, rather than Li and a in the example. What are the advantages, this avoids blind spots of 9px, because the <span> element is included in the <A> element. In this way, it is much easier to process 100% clicks. Because a and span are used for simulation, we do not need to define additional Li.

#header  li{float:left;margin:0;padding:0;}

In the original Li settings, we moved to the settings in A and set the background of a to left image, which is not repeated and aligned to the upper left. And set the left margin 9px (the width of the left image) for a, that is, the display of the span does not block the left image.

#header a {background:url("left.gif") no-repeat left  top;padding-left:9px;}

For span, the settings in Example A are displayed. Set the span background to the right image, which is not repeated and aligned on the top right. And subtract the 9px left margin set by a from the left margin of the span, that is, the left margin of the span is 6px. For consistency, we also need to solve the problem of ie5/MAC.

#header span {float:left;padding:5px 15px 4px  6px;display:block;background:url(”right.gif”) no-repeat right  top;}/* Commented Backslash Hack hides rule from IE5-Mac  \*/#header span {float:none;}/* End IE5-Mac hack  */

In this method, we will still encounter the text area rather than the button area in the Link area of IE in the previous example. How can we solve this problem? Of course, you can use the method in the previous example. However, we can also give a floating to trigger layout under IE.

#header a  {float:left;}

Correspondingly, make some adjustments to the image position in the current selector:

#header #current a  {background-image:url("left_on.gif");color:#333;}#header  #current  span{background-image:url("right_on.gif");padding-bottom:5px;}

Let's sort out and optimize the CSS code:

#header  li {float:left;margin:0;padding:0;}#header a {float:left;display:block;background:url("left.gif") no-repeat  left top;padding-left:9px;}#header span {float:left;padding:5px 15px 4px  6px;display:block;background:url("right.gif") no-repeat right  top;}/* Commented Backslash Hack hides rule from IE5-Mac  \*/#header span {float:none;}/* End IE5-Mac hack */#header  #current a  {background-image:url("left_on.gif");color:#333;}#header  #current  span{background-image:url("right_on.gif");padding-bottom:5px;}

References:

1. Sliding Door Technology in CSS
2. Sliding Doors of CSS, Part II
3. Simple Example of Div + CSS Sliding Door Technology