Foros del Web » Creando para Internet » CSS »

alinear imagen con texto

Estas en el tema de alinear imagen con texto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/12/2010, 19:07
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
alinear imagen con texto

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.
  #2 (permalink)  
Antiguo 16/12/2010, 04:46
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: alinear imagen con texto

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.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #3 (permalink)  
Antiguo 16/12/2010, 11:09
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: alinear imagen con texto

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.
  #4 (permalink)  
Antiguo 17/12/2010, 01:04
Avatar de seoista  
Fecha de Ingreso: septiembre-2003
Ubicación: Pues leyéndote
Mensajes: 1.076
Antigüedad: 14 años, 3 meses
Puntos: 57
Respuesta: alinear imagen con texto

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.
__________________
· Lo poco que sé, lo he aprendido de AQUÍ ·
· No contesto por M.P. ·
  #5 (permalink)  
Antiguo 17/12/2010, 10:01
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: alinear imagen con texto

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
  1. <div id="face">
  2.  <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>
  3. </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
  #6 (permalink)  
Antiguo 17/12/2010, 17:27
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Respuesta: alinear imagen con texto

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
  #7 (permalink)  
Antiguo 17/12/2010, 19:49
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: alinear imagen con texto

@mlombardo70

Código Doctype:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "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
  #8 (permalink)  
Antiguo 18/12/2010, 00:34
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: alinear imagen con texto

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>?
  #9 (permalink)  
Antiguo 18/12/2010, 07:39
 
Fecha de Ingreso: diciembre-2010
Mensajes: 8
Antigüedad: 7 años
Puntos: 0
Respuesta: alinear imagen con texto

Cita:
Iniciado por Portgaz Ver Mensaje
@mlombardo70

Código Doctype:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "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!
  #10 (permalink)  
Antiguo 18/12/2010, 07:54
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: alinear imagen con texto

Cita:
Iniciado por mlombardo70 Ver Mensaje
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.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.

Última edición por David; 18/12/2010 a las 08:23
  #11 (permalink)  
Antiguo 18/12/2010, 08:54
 
Fecha de Ingreso: diciembre-2010
Mensajes: 16
Antigüedad: 7 años
Puntos: 1
Respuesta: alinear imagen con texto

Cita:
Iniciado por Portgaz Ver Mensaje
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? =)
  #12 (permalink)  
Antiguo 18/12/2010, 10:58
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: alinear imagen con texto

Cita:
Iniciado por opentags Ver Mensaje
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
  #13 (permalink)  
Antiguo 18/12/2010, 11:01
 
Fecha de Ingreso: diciembre-2010
Ubicación: en el fin del mundo
Mensajes: 199
Antigüedad: 7 años
Puntos: 3
Respuesta: alinear imagen con texto

Cita:
Iniciado por alexk Ver Mensaje
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.

Etiquetas: alinear
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:48.