Necesito una ayudita con espaciado de imagenes

argotian · #1 (**permalink**) 24/10/2010, 15:10

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

C2am · #2 (**permalink**) 24/10/2010, 15:35

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<style type="text/css">
<!--
#image {
    height: 290px; /* la suma de las alturas de las imagenes */
    width: 210px; /* la anchura de la suma de las imagenes */
    border: thin solid #C60; /* le puse un borde como ayuda visual, no hace falta */
    position: relative;
}
#img1{
    position:absolute;
    left: 0px;
    top: 0px;
}
#img2{
    position:absolute;
    top: 0px;
    left: 110px;
}
#img3{
    position:absolute;
    bottom: 0px;
    left: 0px;
}
#img4{
    position:absolute;
    bottom: 0px;
    right: 0px;
}
-->
</style>
</head>
<body>
 
<div id="image">
<!-- le puse un width y height para poder posicionarlas ya que no tengo las imagenes -->
<img id="img1" src="images/1.png" alt="1" width="100px" height="200px" />
<img id="img2" src="images/2.png" alt="2" width="100px" height="80px" />
<img id="img3" src="images/3.png" alt="3" width="100px" height="80px" />
<img id="img4" src="images/4.png" alt="4" width="100px" height="200px" />
</div>
 
</body>
</html>

catpaw · #3 (**permalink**) 25/10/2010, 09:04

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

http://www.librosweb.es/referencia/css/display.html

kseso? · #4 (**permalink**) 25/10/2010, 14:07

¿Y un par de clases con sus float: left y right y un orden correcto de aparición en el html?

C2am · #5 (**permalink**) 25/10/2010, 20:37

Cita:

Iniciado por kseso?

¿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.

dargorg · #6 (**permalink**) 26/10/2010, 03:05

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,

kseso? · #7 (**permalink**) 26/10/2010, 06:47

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:

dargorg · #8 (**permalink**) 26/10/2010, 07:23

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,

C2am · #9 (**permalink**) 26/10/2010, 10:36

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í.

Moonlight · #10 (**permalink**) 26/10/2010, 11:47

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?

C2am · #11 (**permalink**) 26/10/2010, 12:55

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

Moonlight · #12 (**permalink**) 27/10/2010, 13:21

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

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