Hacer una table de imagenes?

kenso · #1 (**permalink**) 09/12/2011, 17:24

lo que pasa es que quiero hacer una div de puras imagenes pero se separan las imagenes como 5px entre si, ya logre eliminar los espacion de alado usando margin-left: -5px; pero el de arriba no? alguien sabe por que se pode margin o padding, ya las puse las dos a cero y no sirve , tambien con border 0

http://www.arobadesigns.com/tryouts/test.html

OscarSith · #2 (**permalink**) 09/12/2011, 21:49

Pues si quieres eliminar todos los espacios ponle float: left a todas las imagenes de ese div.

#frame img{ float:left; border:none /* Para que no se vea un borde azul en IE */
}

y quitale esa clase .left que no es necesario

Suerte

emprear · #3 (**permalink**) 09/12/2011, 22:39

lo del left te va a funcionar, además corregi los widt y height de las imágenes, el atributo width no lleva la especifiacción de medida (px)

y usá un doctype apropiado para verlo bien en ie8/7

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
 
#frame{
border: 1px solid black;
height:500px;
width: 1000px;
margin:auto;
padding: 0px;
}
 
#frame img {
margin: 0;
border: none;
float: left;
}
</style>
</head>
<body>
 
<div id="frame">
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
    <img src="1.jpg" width="200" height="100" alt="" />
</div>
 
</body>
</html>

kenso · #4 (**permalink**) 09/12/2011, 23:49

gracias emprear y oscar, eso es lo que queria conseguir, como no me acorde del float jeje

darkkase · #5 (**permalink**) 10/12/2011, 01:02

ALTOO!!! antes de que te quiebres la cabeza debez saber que todo elemento flotante requiere de un clear despues

.clear
{
clear:both;
}

despues te todos tus flotantes
<div class=clear></div>

esto soluciona los problemas que causan los flotantes y la ausensia de area dentro de su contenedor padre.