alinear imagen con texto

Portgaz · #1 (**permalink**) 15/12/2010, 19:07

Hola amigos.
Bueno es que tengo un texto que dice:

Siguenos en:

Y despues una imagen que contiene un simbolo de facebook, y dicha imagen tiene un link. Asi el CODIGO:

Siguenos por: <a href="#"><img src="img/facebook.jpg" width="20px" height="20px" /></a>

Y quiero que los dos queden alineados, pero me queda asi:

Yo quiero que me quede asi:

O si se puede un poco mas alineado a que la imagen quede en medio, es decir, que se vea bien pareja la imagen con el texto.

P.D: He logrado esto solamente metiendo el texto (siguenos por:) dentro del link
Pero no quiero que este dentro de link, quiero que sea un txto comun. y Despues siga la imagen (y esta si sera link)

Espero su ayuda
Saludos y Gracias.

seoista · #2 (**permalink**) 16/12/2010, 04:46

Hola Portgaz

Con este código, tanto en I.E. como en F.F., se ve como quieres y alineado:

Cita:

<sup>Siguenos por</sup> <a href="#"><img src="icon_facebook.gif" border="0" width="20px" height="20px" /></a>

Te pongo la imagen:

¡Pruebalo!.

Saludos.

Portgaz · #3 (**permalink**) 16/12/2010, 11:09

No me funciona, igual Gracias.
he decidido poner solo la imagen de Facebook y ya no el texto (siguenos por:)

Gracias por la respuesta igual.

Tema Solucionado.

seoista · #4 (**permalink**) 17/12/2010, 01:04

Hola Portgaz

Siento que mi anterior código no te funcionara (a mí si me funcionó).

A ver así que tal: <div style="float: left">Siguenos por</div> <a href="#"><img src="icon_facebook.gif" border="0" width="20px" height="20px" /></a>

Saludos.

Portgaz · #5 (**permalink**) 17/12/2010, 10:01

Tal y como me pusiste tu codigo no me funcionó, Pero me diste una gran idea y algo que con esa idea fue tan simple y sencillo de hacer.

Código HTML:

Ver original<div id="face">
 <div style="float:left">Siguenos por</div><div style="float:left"><a href="http://www.facebook.com/pages/Disenadores- Web/171309302900494"><img src="img/face-1.png" border="0" width="20px" height="20px" alt="Siguenos por Facebook"/></a></div>
</div>

el texto (siguenos por) y la imagen (facbook) las alinie ambas al left y asi quedaron relativas.
Y con un contenedor padre los flote a la derecha que es la posicion donde las queria.

Saludos y Gracias

mlombardo70 · #6 (**permalink**) 17/12/2010, 17:27

Solo un apunte, elimina el width, height y border del tag img y hazlo con css (dentro del style). Esos atributos están obsoletos y si quieres que tu web cumpla los estándares deberías hacer uso del CSS en su lugar

Saludos

Portgaz · #7 (**permalink**) 17/12/2010, 19:49

@mlombardo70

Código Doctype:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Te dejo la pagina:
http://html09.freeiz.com/Qince/index2.html

No me da error alguno

*A excepcion de dos errores, debido al script del host gratis

alexk · #8 (**permalink**) 18/12/2010, 00:34

no era mejor usar un solo tag?
un <a> con la clase/ID y la img de fondo?
envez de 1 div contenedor 2 hijos y el <a>?

mlombardo70 · #9 (**permalink**) 18/12/2010, 07:39

Cita:

Iniciado por Portgaz

@mlombardo70

Código Doctype:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Te dejo la pagina:
http://html09.freeiz.com/Qince/index2.html

No me da error alguno

*A excepcion de dos errores, debido al script del host gratis

Tienes razón, te valida, pero eso no excluye que esos atributos estén ya obsoletos.
Precisamente el DOCTYPE que estás usando se hizo para que se pudieran validar webs antiguas que usaban esos atributos ya obsoletos, pero en webs nuevas lo normal es usar un DOCTYPE Strict

Saludos!

David · #10 (**permalink**) 18/12/2010, 07:54

Cita:

Iniciado por mlombardo70

Solo un apunte, elimina el width, height y border del tag img y hazlo con css (dentro del style). Esos atributos están obsoletos y si quieres que tu web cumpla los estándares deberías hacer uso del CSS en su lugar

Saludos

Sólo como aclaración. Aunque el atributo "border" sí está desaconsejado, no es así con width y height en el caso de las imágenes; ya que esos atributos permiten al agente de usuario saber cuánto espacio reservar para la imagen antes de que esté cargada.

EDITO: Si bien que, aunque no están explícitamente marcados como desaconsejados; revisando en la sección correspondiente de la especificación al parecer sí, se pueden considerar como tales. Así que, en última instancia, tienes razón.

opentags · #11 (**permalink**) 18/12/2010, 08:54

Cita:

Iniciado por Portgaz

Hola amigos.
Bueno es que tengo un texto que dice:

Siguenos en:

Y despues una imagen que contiene un simbolo de facebook, y dicha imagen tiene un link. Asi el CODIGO:

Siguenos por: <a href="#"><img src="img/facebook.jpg" width="20px" height="20px" /></a>

Y quiero que los dos queden alineados, pero me queda asi:

Yo quiero que me quede asi:

O si se puede un poco mas alineado a que la imagen quede en medio, es decir, que se vea bien pareja la imagen con el texto.

P.D: He logrado esto solamente metiendo el texto (siguenos por:) dentro del link
Pero no quiero que este dentro de link, quiero que sea un txto comun. y Despues siga la imagen (y esta si sera link)

Espero su ayuda
Saludos y Gracias.

Solucionaria el problema colocar la frase "Siguenos por" en la misma imagen? =)

Portgaz · #12 (**permalink**) 18/12/2010, 10:58

Cita:

Iniciado por opentags

Solucionaria el problema colocar la frase "Siguenos por" en la misma imagen? =)

Te refieres a:

Código HTML:

<TAG DE LINK> 
       Siguenos por: <TAG IMAGE />
</TAG DE LINK>

Lo que quiero es que el link solamente este en la imagen y no en el texto.
Pero creo haber mencionado que ya lo tenia solucionado.

Gracias por las respuestas

Portgaz · #13 (**permalink**) 18/12/2010, 11:01

Cita:

Iniciado por alexk

no era mejor usar un solo tag?
un <a> con la clase/ID y la img de fondo?
envez de 1 div contenedor 2 hijos y el <a>?

Al poner la imagen de fondo, como podre dar clic en la imagen para que me envie a la url especifica.

ACLARO QUE: el link debe estar en la imagen, no en el texto.

Igual Gracias por tu respuesta, Pero ya esta Solucionado.