Usar CSS Sprites en las etiquetas de ancla

Estoy buscando un consejo de gurú de CSS sobre la mejor estructura. Estoy implementando sprites en lugar de iconos en una 'lista' horizontal. HTML actual es como:Usar CSS Sprites en las etiquetas de ancla

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

etc.

Así sustituyo con un sprite. Estoy usando

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

pero para hacer esto doy la etiqueta en línea-bloque y ancho. Nunca me ha gustado el bloque en línea y parece torpe.

¿Hay mejores opciones? (intervalo anidado, envoltorio div?)

Fuente

2011-05-18 Karishma

¿Por qué necesita 'inline-block' ahora? ¿Es para darles a tus enlaces una altura? –

Sí. Algo necesita forzar la altura. – Karishma

@karishma: inline-block es una buena opción, pero si no lo desea, puede utilizar el CSS a continuación.

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

Es bueno utilizar imagen de icono en el fondo porque 1) ahorra espacio marcado & 2) que es bueno para fines de SEO para evitar imágenes no deseadas cachés por Google.

Fuente

2011-05-18 10:28:16 sandeep

Astuto. No lo había considerado. – Karishma

"evitar cachés de imágenes no deseadas por Google" - ¿eh? –

@paul; primero gracias por editar mi respuesta porque estaba enfrentando un problema con stackoverflow. Segundo google chache solo aquellas imágenes que en img tag no están en segundo plano y tercero supongo que tengo una imagen de esquinas redondeadas. Entonces, ¿qué sirve poner la imagen en img o en segundo plano? – sandeep

por lo general me gusta esto:

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

Aquí es el 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; 
}

Fuente

2011-05-18 10:28:37

¿qué pantalla le das al lapso? – Karishma

Acabo de actualizar mi respuesta :) –

OK. Gracias por tu respuesta. Lo intentaré con las otras sugerencias y veré qué se ajusta mejor. – Karishma

I como sus técnicas y @sandeep @ hatake-kakashi. Un par de posibles mejoras (aunque quizás más allá del alcance de la pregunta). Pruebe la estructuración de su lista y html como tal:

<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 esta manera, la cascada funciona para usted y todos los eslabones de esta lista puede obtener el estilo de sprites y sin los nombres de clases redundantes. Y permite que sus elementos principales manejen el posicionamiento. Al menos, creo que es correcto. Disculpas por la sintaxis y el pseudocódigo, ya que lo escribí un poco rápido y sucio.

Fuente

2011-06-21 18:24:27 adc

Usar CSS Sprites en las etiquetas de ancla

Respuesta

Cuestiones relacionadas