Home > Others

100% Sliding doors in the click Area

Source: Internet
Author: User
Tags header modify relative xmlns
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Learning standards of friends, generally in the process of learning to contact the CSS sliding door technology, perhaps we have seen this article "CSS Sliding door technology ", if you have not touched 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, Understand or brush up on it first.

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 :

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

View effects :

Run Code Box

<! 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><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>css Sliding door technology </title><style type=" TEXT/CSS "media=" screen ">body { Background: #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 ("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 0 0 9px;} #header a {float:left; Display:block background:url ("Right.gif") No-repeat right top; padding:5px 15px 4px 6px; text-dec Oration: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;} </style></pead><body><div id= "header" > <ul> <li><a href= "#" >home</a ></li> <li id= "current" ><a href= "#" >News</a></li> <li><a href= "#" >prod Ucts</a></li> <li><a href= "#" >About</a></li> <li><a href= "#" > Contact</a></li> </ul></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

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

Let's get the CSS code sorted and optimized:

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

View effects :

Run Code Box

<! 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><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>css Sliding door technology </title><style type=" TEXT/CSS "media=" screen ">body { Background: #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 ("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 ("Right.gif") No-repeat right top; margin:0 0 0 9px; padding:0;} #header a {float:left; Display:block; position:relative; left:-9px; margin-right:-9px; Width:.1em; Background:url ("Left.gif") no-repeat left top; padding:5px 15px 4px; Text-decoration:none; Font-weight:bold; Color: #765;} #header > Ul a {width:auto;} /* 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 ("Right_on.gif");} #header #current a {background-image:url ("left_on.gif"); padding-bottom:5px;} </style></pead><body><div id= "header" > <ul> <li><a href= "#" >home</a ></li> <li id= "current" ><a href= "#" >News</a></li> <li><a href= "#" >prod Ucts</a></li> <li><a href= "#" >About</a></li> <li><a href= "#" > Contact</a></li> </ul></div></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]

Method Two: adding span labels

This method can only be said to practice, experimental use, the real layout of the time is not recommended (only not recommended), after all, add a meaningless span tag.

First add <span> tag to 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, in fact, the reason is very simple, we use a and span to simulate sliding door technology, rather than the example of Li and a, the benefits, can avoid 9px blind spot area, because the <span> element is contained in the <a In the > element. This is a much easier way to handle 100% clicks.

Because of the use of a and span simulations, we do not need additional definitions for Li

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

And the original part of the Li set, we moved to a set, set A to the background of left picture, do not repeat, on the right. And give a set to the left inner margin 9px (the width of the left-hand picture), that is, span of the display does not mask the leave picture.

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

For span, the settings in a in the original example are displayed, setting the background of span to the right picture, not repeating, and right-aligned. And the left interior margin of span minus the 9px left margin of a set, that is, the left inner margin of span is 6px. Also in order to be consistent, we have 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 in the above example of the link in IE in the area of the text area rather than the button area problem. How to solve it, of course, you can also use the method in the above example to solve. But we can also, give a float to trigger ie under the layout.

#header a {
Float:left;
}

Correspondingly, the position of the picture in the current selector has to be adjusted a little:

#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 get the CSS code sorted and optimized:

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

View Effects:

Run Code Box

<! 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><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>css Sliding door technology </title><style type=" TEXT/CSS "media=" screen ">body { Background: #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 ("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; margin:0; padding:0;} #header a {float:left; Display:block; Background:url ("Left.gif") no-repeat left top; padding-left:9px; Text-decoration:none; Font-weight:bold; Color: #765;} #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 a:hover {color: #333;} #header #current a {background-image:url ("left_on.gif"); Color: #333;} #header #current span{background-image:url ("Right_on.gif"); padding-bottom:5px;} </style></pead><body><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></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]



This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
nintendo switch in area gamestop in area western union in area popup in jquery on click button click event in php define print area in excel is vonage available in area

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More