Utilizzo di CSS Sprites sui tag di ancoraggio

Sto cercando alcuni consigli sul guru CSS sulla migliore struttura. Sto implementando gli sprite al posto delle icone su una 'lista' orizzontale. HTML corrente è come:Utilizzo di CSS Sprites sui tag di ancoraggio

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

ecc

Così sostituisco con uno sprite. Sto usando

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

ma per fare questo do il tag inline-block e width. Non mi è mai piaciuto il blocco inline e sembra goffo.

Ci sono opzioni migliori? (intervallo annidato, div wrapper?)

fonte

2011-05-18 Karishma

Perché hai bisogno di 'inline-block' ora? Dare un'altezza ai tuoi link? –

Sì. Qualcosa deve forzare l'altezza. – Karishma

@karishma: inline-block è una buona opzione, ma se non lo si desidera, è possibile utilizzare il CSS di seguito.

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

E 'bene utilizzare un'immagine icona in background perché 1) consente di risparmiare spazio markup & 2) è un bene per scopi di SEO da evitare immagini indesiderate cache da Google.

fonte

2011-05-18 10:28:16 sandeep

Astuzia. Non l'avevo considerato. – Karishma

"evitare le cache di immagini indesiderate di Google" - eh? –

@paul; prima grazie per aver modificato la mia risposta perché stavo affrontando un problema con StackOverflow. Secondo google chache solo quelle immagini che nel tag img non in background e in terzo luogo suppongo di avere un'immagine di angoli arrotondati. quindi, cosa è bene mettere l'immagine in img o in background. – sandeep

faccio di solito in questo modo:

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

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

fonte

2011-05-18 10:28:37

quale display offrite? – Karishma

Ho appena aggiornato la mia risposta :) –

OK. Grazie per la tua risposta. Farò un tentativo con gli altri suggerimenti e vedere cosa si adatta meglio. – Karishma

Mi piace il tuo tecniche @sandeep e @ Hatake-Kakashi. Un paio di possibili miglioramenti (anche se forse oltre lo scopo della domanda). Prova strutturare la vostra lista e HTML come ad esempio:

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

In questo modo, la cascata funziona per voi e tutti i link in questo elenco può ottenere lo stile sprite senza i nomi delle classi ridondanti. E lascia che i tuoi elementi genitori gestiscano il posizionamento. Almeno, penso sia corretto. Ci scusiamo per la sintassi e lo pseudo-codice mentre lo scrivevo un po 'veloce e sporco.

fonte

2011-06-21 18:24:27 adc

Utilizzo di CSS Sprites sui tag di ancoraggio

risposta

Problemi correlati