Blog Address: http://www.planabc.net/article.asp?id=107
Learning standard friends, will generally be in the process of learning to contact the CSS sliding door technology, perhaps everyone has read this article "CSS Sliding door technology", if you have not been contacted or have not seen the above or a bit forget the content, it does not matter, you can click on the link above the article, first understand or review.
In the "Sliding door technology in CSS" a text of the sliding door example, we carefully experiment, may have found that the link area has 9 pixel blind spot can not click, and in IE, can only click the text part size, can not click the entire button block. What we may expect is that the entire button block can be clicked and no blind spots are allowed.
So how do we go about it? Let's explore some of the solutions here:
First, in order to facilitate our first "CSS Sliding door technology" in the code to move over:
XHTML section:
Copy Code code as follows:
<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:
Copy Code code as follows:
#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 Hack
Hides 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;
}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <base href= ' http://www.blueidea.com '/> & Lt;meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>css sliding door technology </title> <style type=" text/css "media=" screen "> body {backgr Ound: #fff; margin:0; padding:0; Color: #000; Font:x-small/1.5em Georgia,serif; voice-family: "}\" "; Voice-family:inherit; Font-size:small; } html>body {Font-size:small} #header {float:left; width:100%; Background: #DAE0D2 URL ("/articleimg/2007/02/4495/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 ("/articleimg/2007/02/4495/left.gif") no-repeat left top; margin:0; padding:0 0 0 9px; } #header a {fLoat:left; Display:block; Background:url ("/articleimg/2007/02/4495/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 */#header a:hover {color: #333; } #header #current {background-image:url ("/articleimg/2007/02/4495/left_on.gif"); #header #current a {background-image:url ("/articleimg/2007/02/4495/right_on.gif"); Color: #333; padding-bottom:5px; } </style> </pead> <body> <div id= "header" > <ul> <li>Home</li> <li id= "Current" >News</li> <li>Products</li> <li>About</li> <li> contact</li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Method One: Use relative position to negative outer margin
To eliminate the 9px blind spot area of the sliding door, set the outer margin of the Li to 9px (the width of the 9px left picture), and Li's background is right picture, not repeated, and right-aligned.
#header Li {
Background:url ("Right.gif") No-repeat right top;
margin-left:9px;
}
Then let a move to the left 9px, cover the blind spot area, how to move? A 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, so when a position relative to the left 9px, Li's right will be more than 9px blind area, how to solve it? We use the negative outer margin of a to solve (margin-right:-9px;).
#header a {
position:relative;
left:-9px;
margin-right:-9px;
}
Set the left picture to a background, do not repeat, align on top, and set the inner margin of the text, note that the area of a is now the area of the entire button, so the values for Padding-left and padding-right should be 15px.
#header a {
Background:url ("Left.gif") no-repeat left top;
padding:5px 15px 4px;
}
Notice another detail: the area in IE that is linked is a text area instead of a button area, while in other browsers with better support for the standard it is the button area. In order to solve this problem, we give ie a fixed width to trigger IE layout (can choose. 1em,1px,1% equivalent), but in this way a is in other better than the standard support browser will recognize this width, We use a better browser recognition than the standard support, and IE6 does not know the other child selector to make A's width into auto.
#header a {width:.1em;}
#header > Ul a {width:auto;}
Correspondingly, the position of the picture in the current selector has to be adjusted a little:
#header #current {
Background-image:url ("Right_on.gif");
}
#header #current a {
Background-image:url ("Left_on.gif");
padding-bottom:5px;
}
Current 1/2 page
12 Next read the full text
