Utilisation de CSS Sprites sur les tags d'ancrage

Je suis à la recherche de conseils sur la meilleure structure CSS. J'implémente des sprites au lieu d'icônes sur une 'liste' horizontale. html actuel est comme:Utilisation de CSS Sprites sur les tags d'ancrage

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

etc.

Je remplacerai avec un sprite. J'utilise

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

mais pour ce faire, je donne le tag-inline-block et la largeur. Je n'ai jamais aimé le bloc en ligne et il semble maladroit.

Y a-t-il de meilleures options? (span nested, div wrapper?)

Source

2011-05-18 Karishma

Pourquoi avez-vous besoin de 'inline-block' maintenant? Est-ce pour donner une hauteur à vos liens? –

Oui. Quelque chose doit forcer la hauteur. – Karishma

@karishma: inline-block est une bonne option mais si vous ne le souhaitez pas, vous pouvez utiliser le CSS ci-dessous.

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

Il est bon d'utiliser l'image d'icône en arrière-plan, car 1) il économise de l'espace de balisage & 2), il est bon pour des fins de SEO pour éviter des caches d'images indésirables par Google.

Source

2011-05-18 10:28:16 sandeep

Ruse. N'a pas considéré cela. – Karishma

"évitez les caches d'images indésirables par Google" - hein? –

@paul; d'abord merci pour l'édition de ma réponse parce que je faisais face à un problème avec stackoverflow. Deuxième google chache seulement ces images qui dans img tag pas en arrière-plan et troisième supposent que j'ai une image de coins arrondis. Alors, qu'est-ce qui est bon pour mettre l'image en img ou en arrière-plan. – sandeep

que je fais habituellement comme ceci:

<a class="button sprite" href="#"><span class="sprite">Blah</span></a>

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

Source

2011-05-18 10:28:37

quel affichage donnez-vous l'envergure? – Karishma

Je viens de mettre à jour ma réponse :) –

OK. Merci pour votre réponse. Je vais essayer avec les autres suggestions et voir ce qui convient le mieux. – Karishma

J'aime vos techniques @sandeep et @ hatake-Kakashi. Quelques améliorations possibles (bien que peut-être au-delà de la portée de la question). Essayez de structurer votre liste et html en tant que tels:

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

De cette façon, la cascade fonctionne pour vous et tous les liens dans cette liste peut obtenir le style de sprite sans noms de classes redondantes. Et vous laissez vos éléments parents gérer le positionnement. Au moins, je pense que c'est correct. Toutes mes excuses pour la syntaxe et le pseudo-code car je l'ai écrit un peu rapide et sale.

Source

2011-06-21 18:24:27 adc

Utilisation de CSS Sprites sur les tags d'ancrage

Répondre

Questions connexes