Posicionando div de 5x5px como un tablero de ajedrez.

alca87 · #1 (**permalink**) 24/05/2008, 17:43

Hola, como dice el título, trato de hacer un pequeño recuadro con divs de 5 píxeles de alto por 5 de ancho, pero al realizarlos, me quedan como una especie de escalera, lo he probado en firefox3 beta 5 y en ff2.

Es como si me metiera retornos de carro. Lo que quiero hacer es un div que contenga a su vez otros div más pequeños, cuadraditos que forman un dibujo parecido a un tablero de ajedrez.

Pego el css:

Código:

body {
	text-align:center;
}
#contenedor {
	position: relative;
	width: 180px;
	border:1px solid #333333;
	background-color:#FFF8F0;
	margin: 60px auto;
} 
.a1 {
position: relative;
display: both;
left: 0px;
top: 1px;
width: 5px;
height: 5px;
background-color: red;
}
.a2 {
position: relative;
display: both;
left:10px;
top: 1px;
width:5px;
height: 5px;
background-color: green;
}
.a3 {
position: relative;
display: both;
left:20px;
top: 1px;
width: 5px;
height: 5px;
background-color: blue;
}
.b1 {
position: relative;
display: both;
left:0px;
top: 2px;
width: 5px;
height: 5px;
background-color: aqua;
}
.b2 {
position: relative;
display: both;
left:10px;
top: 2px;
width: 5px;
height: 5px;
background-color: yellow;
}
.b3 {
position: relative;
display: both;
left:20px;
top: 2px;
width: 5px;
height: 5px;
background-color: silver;

Y el html:

Código:

<div id="contenedor">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>

Gracias de antemano, como no puedo poner enlaces no os pongo el ejemplo, pero si alguien quiere verlo que lo diga. Un saludo.

Mikmoro · #2 (**permalink**) 24/05/2008, 18:04

Mira a ver qué tal te va con esto:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>2 Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {text-align:center;}

#contenedor {
position: relative;
width: 180px;
border:1px solid #333333;
background-color:#FFF8F0;
margin: 60px auto;
}
.cuadro {position: relative;
width: 5px;
height: 5px;
float: left;
margin: 1px 5px 0px 0px;
font-size: 5px;
}
.a1 {background-color: red;}
.a2 {background-color: green;}
.a3 {background-color: blue;}
.b1 {background-color: aqua;}
.b2 {background-color: yellow;}
.b3 {background-color: silver;}
.corte {clear: both;}
</style>
</head>
<body>
<div id="contenedor">
<div class="cuadro a1"></div>
<div class="cuadro a2"></div>
<div class="cuadro a3"></div>
<div class="corte"></div>
<div class="cuadro b1"></div>
<div class="cuadro b2"></div>
<div class="cuadro b3"></div>
<div class="corte"></div>
</div>
</body>
</html>

Mikel.

alca87 · #3 (**permalink**) 24/05/2008, 18:07

Perfecto amigo, es justo lo que quería. Muchas gracias. Un saludo.

Mikmoro · #4 (**permalink**) 24/05/2008, 18:12

Sería bueno que estudiaras cómo he economizado tu código css, que de lo que había se ha quedado en nada

Mikel.