Ver Mensaje Individual
  #2 (permalink)  
Antiguo 24/05/2008, 18:04
Avatar de Mikmoro
Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Posicionando div de 5x5px como un tablero de ajedrez.

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.