Foros del Web » Creando para Internet » CSS »

Posicionando div de 5x5px como un tablero de ajedrez.

Estas en el tema de Posicionando div de 5x5px como un tablero de ajedrez. en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 24/05/2008, 18:43
 
Fecha de Ingreso: febrero-2008
Mensajes: 43
Antigüedad: 9 años, 10 meses
Puntos: 2
Posicionando div de 5x5px como un tablero de ajedrez.

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.
  #2 (permalink)  
Antiguo 24/05/2008, 19:04
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #3 (permalink)  
Antiguo 24/05/2008, 19:07
 
Fecha de Ingreso: febrero-2008
Mensajes: 43
Antigüedad: 9 años, 10 meses
Puntos: 2
Respuesta: Posicionando div de 5x5px como un tablero de ajedrez.

Perfecto amigo, es justo lo que quería. Muchas gracias. Un saludo.
  #4 (permalink)  
Antiguo 24/05/2008, 19:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Posicionando div de 5x5px como un tablero de ajedrez.

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:11.