Using CSS Sprites on anchor tags
I'm looking for some CSS guru advice on best structure. I'm implementing sprites instead of icons on a horizontal 'list'. Current html is like :
<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>
etc.
So I replace with a sprite. I'm using
<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>
but to do this I give the tag inline-block and width. I've never liked inline-block and it seems clunky.
Are there better options ? (nested span, d开发者_开发百科iv wrapper ?)
@karishma: inline-block is a good option but if don't want it so, you can use the CSS below.
a.sprite_img_a{
background:url('image.jpg') no-repeat 0 0 ;
float:left;
display:block;
width:30px;
height:30px;
}
a.sprite_img_a:hover{
background-position:-20px 10px ;
}
It's good to use icon image in background because 1) it saves markup space & 2) it's good for SEO purposes to avoid unwanted images caches by Google.
I usually do like this:
<a class="button sprite" href="#"><span class="sprite">Blah</span></a>
Here is the css:
.sprite{
background: url("../images/sprite.png") no-repeat scroll left top transparent;
}
.button{
background-position: 0 -80px;
color: white;
display: block;
float: left;
font-size: 0.75em;
height: 28px;
line-height: 28px;
margin-top: 7px;
overflow: hidden;
padding-left: 5px;
text-decoration: none;
cursor: pointer;
}
.button span{
background-position: right -80px;
height: 28px;
color: white;
display: block;
float: left;
padding: 0 10px 0 5px;
position: relative;
text-transform: uppercase;
text-decoration: none;
}
I like your techniques @sandeep and @hatake-kakashi. A couple possible improvements (though maybe beyond the scope of the question). Try structuring your list and html as such:
<style>
/* let your UL and LI handle the link positioning */
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */
ul.sprites li a {
display:block;
/*sprite dimensions*/
width:30px;
height:30px;
background: url('..images/spritesSheet.png') 0 0 no-repeat;
/*hide link text*/
text-indent: -9999em
overflow: hidden;
text-align: left;
}
/*adjust the background of the single sprite image file*/
ul.sprites a.spriteName1 {background-position:x y;}
ul.sprites a.spriteName1:hover {background-position:x y;}
ul.sprites a.spriteName2 {background-position:x y;}
ul.sprites a.spriteName2:hover {background-position:x y;}
/* etc...*/
</style>
<html>
<ul class="sprites">
<li><a class="spriteName1" href="#">link1</a></li>
<li><a class="spriteName2" href="#">link2</a></li>
</ul>
</html>
This way, the cascade works for you and all links in this list can get the sprite styling without redundant class names. And you let your parent elements handle the positioning. At least, I think that's correct. Apologies for syntax and pseudo-code as I wrote it kinda quick and dirty.
加载中,请稍侯......
精彩评论