Visualizar Smiles Correctamente

Deja tu comentario

Una rápida leída por alguno de los blogs que usan “caritas/smiles” en sus posts, y podrán darse cuenta a lo que me refiero cuando les digo que son pocos los redactores que les prestamos atención a la correcta visualización de dichas imágenes.

Éste tema lo planteé en el 2005, imagínense… y sigo viendo smiles desalineados.
La observación de los smiles desalineados se aplica perfectamente en mi blog también, pues en el 2005 opté por la alternativa de solucionar el problema tocando el css del sitio completo, adoptando un “class=”smiles” para las imágenes que estaban destinadas a ser “caritas” obviamente.
El tema es, que adoptando una solución así, tienen que tener en cuenta que a través de los cambios de diseño, evolución (o involución) de sus sitios webs, tienen que tener en cuenta esos css, para que… en el futuro, las caritas sigan saliendo alineadas.

Para adoptar la solución del style para todas las imagenes que usen class="smiles" deben editar el código HTML de sus blogs, dentro del tag <style> y colocar: .smile{ vertical-align:middle; }
De ésta forma, cada vez que coloquen un smile tendrán que hacerlo así: <img class="smile" src="http://.../imagen.gif alt="blabla" />
Fijense el detalle de agregar class=”smile” … es lo que alineará automáticamente el smile, y quedará centrado verticualmente.

Sino, la otra alternativa de solución es que tomen “cada smile” agregado y lo editen de ésta forma: <img style="vertical-align: middle" title="sonrisa" src="/images/smile1.gif" />
Así agregando style="vertical-align: middple" es la única forma de que las caritas que agreguemos a nuestros posts queden alineadas correctamente, y podamos visualizarlas bien, como se debe… y no como por defecto alineamos las mismas.

Veamos dos ejemplos:
Carita agregada sin ninguna alineación en el style: Cieguito
Carita agregada con alineación en el style: Cieguito
Ven la diferencia? Les he puesto un borde gris al rededor de cada imagen, para q les ayude a ver la diferencia.

Para tener en cuenta:

  • Ver las propiedades de “vertical-align” en W3Schools.com.
  • Recuerden NO usar align: absmiddle; porque no funciona en lo que es Styles. (En cambio si anda cuando lo usamos asi <img src="" align="absmiddle" />)
  • Align:absmiddle no forma parte de lo que es CSS Estándar (absmiddle is not a permitetd value of align in any standard version of HTML. The permitted values are top, middle, bottom, left and right.)

0 comments:

Publicar un comentario

Nota importante: aquellos comentarios que tengan spam (o contenido ofensivo) serán ELIMINADOS; no editados... sino que directamente se los elimina.