Foros del Web » Diseño web » CSS »

Poner dos imágenes consecutivas en un div

Estas en el tema de Poner dos imágenes consecutivas en un div en el foro de CSS en Foros del Web. Hola amig@s, ante todo Feliz Navidad Quiero poner dos imágenes con su correspondiente pie de foto una a continuación de la otra. Supongo que será ...
  #1 (permalink)  
Antiguo 25/12/2005, 13:31
 
Fecha de Ingreso: diciembre-2001
Ubicación: Málaga
Mensajes: 328
Antigüedad: 13 años
Puntos: 0
Poner dos imágenes consecutivas en un div

Hola amig@s, ante todo Feliz Navidad
Quiero poner dos imágenes con su correspondiente pie de foto una a continuación de la otra. Supongo que será muy fácil, pero los novatos tropezamos con cualquier cosa.
He creado un div en la hoja de estilos tal como este:

#imagenes{
background-color: #ffffff;
width:90%;
text-align: center;
padding: 5px 10px 5px 10px;
margin:auto;
}

y las imágenes las pongo de esta manera en el html:

<div id="imagenes">
<img src="imagen1.jpg" width="158" height="142" />
<h3>textde imagen 1</h3>
<img src="imagen2.jpg" width="158" height="158" />
<h3>texto de imagen2</h3>
</div>
De esta forma se ven una imagen con su texto debajo y la otra imagen debajo del texto de la primera.

Más o menos así:
----------
l imagen1 l
----------
texto img1

----------
l imagen2 l
----------
texto img2

En cambio lo que quiero es esto (centrado) con dos o más imágenes:
---------- ----------
l imagen1 l l imagen2 l
---------- ----------
texto img1 texto img2

No se si me explico bien, pero la cuestión es ¿como lo hago?
Gracias de antemano por la ayuda

Última edición por ¿es a mi?; 25/12/2005 a las 13:37
  #2 (permalink)  
Antiguo 26/12/2005, 08:26
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 8 meses
Puntos: 0
tienes que darle un ancho al div, y usas cada div para agrupar la imagen y el texto, el h3 es un subtitulo por lo cual creo que no deberias usarlo, en vez de eso usa la etiqueta <p>, para que se pongan uno al lado del otro usa float, aslgo asi
Código:
.imagenes{
background-color: #ffffff;
padding: 5px 10px 5px 10px;
margin:2px;
float:left;
width:200px;
text-align:center;
}
y
Código HTML:
<div class="imagenes">
<img src="imagen1.jpg" width="158" height="142" />
<p>textde imagen 1</p>
</div>

<div class="imagenes">
<img src="imagen2.jpg" width="158" height="158" />
<p>texto de imagen2</p>
</div> 
  #3 (permalink)  
Antiguo 26/12/2005, 12:54
 
Fecha de Ingreso: diciembre-2001
Ubicación: Málaga
Mensajes: 328
Antigüedad: 13 años
Puntos: 0
Gracias RoQ, funciona perfecto.
Uso <h3> por que le he dado en el css ciertas propiedades como color y tamaño distintas de <p>.
Aun no domino, como puedes ver, los "class", de modo que a aprender toca.
Un saludo
  #4 (permalink)  
Antiguo 26/12/2005, 12:57
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 9 años, 8 meses
Puntos: 0
un class funciona como un id, la diferencia es que el id solo lo puedes usar una vez en un pagina, es el identificador de un solo elemento, en cambio las clases las puedes usar varias veces.
Busca en el foro y vas a encontrar mas informacion
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 11:54.
SEO by vBSEO 3.3.2