Foros del Web » Creando para Internet » CSS »

Necesito una ayudita con espaciado de imagenes

Estas en el tema de Necesito una ayudita con espaciado de imagenes en el foro de CSS en Foros del Web. lo que pasa es que tengo 4 imagenes pequeñas que forman 1 sola imagen grande el problema es que como puedo alinearlas para que queden ...
  #1 (permalink)  
Antiguo 24/10/2010, 16:10
 
Fecha de Ingreso: octubre-2010
Mensajes: 1
Antigüedad: 7 años, 1 mes
Puntos: 0
Necesito una ayudita con espaciado de imagenes

lo que pasa es que tengo 4 imagenes pequeñas que forman 1 sola imagen grande el problema es que como puedo alinearlas para que queden asi aver pongo imagen

en mi html se ven asi las imagenes



Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Urbano</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
</head>
<body>

<div id="image">
<img src="images/1.png" alt="1" />
<img src="images/2.png" alt="2" />
<img src="images/3.png" alt="3" />
<img src="images/4.png" alt="4" />
</div>

</body>
</html>

y necesito ponerlas asi con css



pero aqui no he podido como podria hacerlo?

Código:
#image{
             ????????
}

espero que me puedan ayudar de ante mano muchas gracias
  #2 (permalink)  
Antiguo 24/10/2010, 16:35
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Necesito una ayudita con espaciado de imagenes

Espero que te ayude, use posicion absoluta, pero tambien puede ser relativa, solo es cuestion de cambiar las coordenadas.
A la imagenes les agregue el id para darle la posición mediante css.
Código HTML:
Ver original
  1. <style type="text/css">
  2. <!--
  3. #image {
  4.     height: 290px; /* la suma de las alturas de las imagenes */
  5.     width: 210px; /* la anchura de la suma de las imagenes */
  6.     border: thin solid #C60; /* le puse un borde como ayuda visual, no hace falta */
  7.     position: relative;
  8. }
  9. #img1{
  10.     position:absolute;
  11.     left: 0px;
  12.     top: 0px;
  13. }
  14. #img2{
  15.     position:absolute;
  16.     top: 0px;
  17.     left: 110px;
  18. }
  19. #img3{
  20.     position:absolute;
  21.     bottom: 0px;
  22.     left: 0px;
  23. }
  24. #img4{
  25.     position:absolute;
  26.     bottom: 0px;
  27.     right: 0px;
  28. }
  29. -->
  30. </head>
  31.  
  32. <div id="image">
  33. <!-- le puse un width y height para poder posicionarlas ya que no tengo las imagenes -->
  34. <img id="img1" src="images/1.png" alt="1" width="100px" height="200px" />
  35. <img id="img2" src="images/2.png" alt="2" width="100px" height="80px" />
  36. <img id="img3" src="images/3.png" alt="3" width="100px" height="80px" />
  37. <img id="img4" src="images/4.png" alt="4" width="100px" height="200px" />
  38. </div>
  39.  
  40. </body>
  41. </html>
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 25/10/2010, 10:04
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 7 años, 7 meses
Puntos: 23
Respuesta: Necesito una ayudita con espaciado de imagenes

Tambien puedes usar la propiedad display...aca te pongo un poco de info:

http://www.librosweb.es/referencia/css/display.html
  #4 (permalink)  
Antiguo 25/10/2010, 15:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Necesito una ayudita con espaciado de imagenes

¿Y un par de clases con sus float: left y right y un orden correcto de aparición en el html?
  #5 (permalink)  
Antiguo 25/10/2010, 21:37
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Necesito una ayudita con espaciado de imagenes

Cita:
Iniciado por kseso? Ver Mensaje
¿Y un par de clases con sus float: left y right y un orden correcto de aparición en el html?
Si, es cierto, en este caso, pero yo intenté con más "cuadros-rectángulos" de diferentes alturas y siempre alguno me quedaba desubicado y no supe solucionarlo, pero tienes toda la razón.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 26/10/2010, 04:05
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Necesito una ayudita con espaciado de imagenes

Y digo yo... no será mejor posicionar dos divs y dentro meter las imágenes que hacer todo lo que habéis hecho (que si posicionar las imágenes con position absolute, float left y right...)?

Código:
<div style="display: inline; float: left; width: 50%;">
    <img id="img1" src="images/1.png" alt="1" />
    <img id="img3" src="images/2.png" alt="3"  />
</div>
<div style="display: inline; float: left; width: 50%;">
    <img id="img2" src="images/1.png" alt="2" />
    <img id="img4" src="images/2.png" alt="4"  />
</div>
Un saludo,
  #7 (permalink)  
Antiguo 26/10/2010, 07:47
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Necesito una ayudita con espaciado de imagenes

C2am:
No dije que estuviese mal su ejemplo, ni tampoco me refería a otro supuesto que no fuese el planteado por el usuario (por cierto, debe ser otro paracaidista más: saltó, aterrizó y desapareció).

dargorg:
Vale, pero en este foro de css se estilaba y mucho el menos es más. Buscar aquella solucción con el menor uso de etiquetado. Aquello que se decía del código lo más semántico posible.
Utiliza 2 div más cuatro "id", uno por cada imagen, a lo que habría que añadir un tercer div contenedor de los 2 anteriores para contenerlos.

Pero lo anterior de nada vale si (mi comentario en #4) si sólo se queda en palabras.
Así que aquí va la realización que apunté. Repito, para el caso particular planteado. No extrapolo a otras situaciones posibles.
Una caja contenedora y dos clases para las imágenes:

  #8 (permalink)  
Antiguo 26/10/2010, 08:23
Avatar de dargorg  
Fecha de Ingreso: octubre-2010
Ubicación: Castellón (España)
Mensajes: 188
Antigüedad: 7 años, 1 mes
Puntos: 9
Respuesta: Necesito una ayudita con espaciado de imagenes

kseso? está claro que tienes razón en lo que dices, pero yo únicamente comenté una solución no para hacerla lo más semántica posible, sino para hacerlo de la manera más directa y fácil.

Saludos,
  #9 (permalink)  
Antiguo 26/10/2010, 11:36
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Necesito una ayudita con espaciado de imagenes

Hola kseso?, no es que haya interpretado tu comentario como una critica o algo, todo lo contrario, cuando lo leí me acorde de cuando intente hacer lo que dije en el post#5, y me encontre con que no pude acomodar todos las "cajas" en esa situación, pero viendo este caso particular tienes toda la razón de que es más recomendable que mi solución.

Como quien dice, me encontre ante el mismo problema (o similar) y no quise meterme en problemas como la vez anterior

En realidad esto me sirve de excusa para ir probando y aprendiendo, es más me puse a hacerlo tal como lo planteas, y también ir probando con más "cajas" y variando las alturas, solo para ver que pasaba

No sé si volvera el autor del post o si le habrá servido, a mí sí.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #10 (permalink)  
Antiguo 26/10/2010, 12:47
Avatar de Moonlight  
Fecha de Ingreso: julio-2009
Mensajes: 175
Antigüedad: 8 años, 4 meses
Puntos: 9
Respuesta: Necesito una ayudita con espaciado de imagenes

Quizás quieras una solución más sofisticada, pero ¿qué tal si unes todas esas pequeñas imágenes con el Photoshop o, incluso, el Paint, y la pones como una única imagen más grande? También peudes dibujar esos márgenes que hay entre unas y otras, ¿no?
  #11 (permalink)  
Antiguo 26/10/2010, 13:55
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Necesito una ayudita con espaciado de imagenes

Así es moonlight, pero como este es el foro de css, pues, la solución va a estar encaminada hacia ese sentido. ¿No te parece?
un saludo
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #12 (permalink)  
Antiguo 27/10/2010, 14:21
Avatar de Moonlight  
Fecha de Ingreso: julio-2009
Mensajes: 175
Antigüedad: 8 años, 4 meses
Puntos: 9
Respuesta: Necesito una ayudita con espaciado de imagenes

Solo me pareció que buscabas una solución y esa era una, jajaja.

Bueno, lo siento, yo acabo de empezar con css.

Etiquetas: imagenes
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 05:28.