All geek questions in one place

Using CSS sprites in anchor tags

I am looking for advice for CSS gurus on a better framework. I use sprites instead of the icons in the horizontal "list". The current html is similar:

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

etc..

So, I am replacing the sprite. I use

 <a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

but for this I give an inline-block and width tag. I never liked the built-in unit, and it seemed awkward.

Are there any better options? (nested range, wrapper div?)

+6
source share
3 answers

@karishma: inline-block is a good option, but if you don't want this, 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 the image icon in the background because 1) it saves layout space and 2) it is good for SEO purposes to avoid unwanted cache images from Google.

+8
source

I usually do 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; }
0
source

I like your @sandeep and @ hatake-kakashi methods. A couple of possible improvements (although perhaps beyond the scope of the question). Try to structure 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:xy;} ul.sprites a.spriteName1:hover {background-position:xy;} ul.sprites a.spriteName2 {background-position:xy;} ul.sprites a.spriteName2:hover {background-position:xy;} /* etc...*/ </style> <html> <ul class="sprites"> <li><a class="spriteName1" href="#">link1</a></li> <li><a class="spriteName2" href="#">link2</a></li> </ul> </html>

Thus, the cascade works for you, and all links in this list can get the sprite style without redundant class names. And you allow your parent elements to handle positioning. At least I think that's right. Apologies for the syntax and pseudo-code, since I wrote it as if quickly and dirty.

0
source

Source: https://habr.com/ru/post/888404/

More articles:


All Articles