No puedo realizar bien el "puzzle" en CSS Me he propuesto realizar un puzzle a modo de pruebas con el CSS. Muchos pensareis que sería mucho más facil realizarlo por tablas. Pero me es indispensable saber como resolverlo, por si algun dia tengo que enfrentarme a un diseño de 3 columnas.
Estoy muy verde en esto, espero que podais ayudarme y que logre comprender la filosofia de las capas.
Os pego el codigo en html y el del CSS y os dejo ademas un enlace por si quereis descargarlo, ya que igual a ojo y sin imagenes es mas complicado.
HTML
Cita:
CSS<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="estillos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="parte1"><img src="Images/3_Natural-Wallpaper-aa_01.gif" width="360" height="92" /></div>
<div id="lateral1">
<div id="parte2"><img src="Images/3_Natural-Wallpaper-aa_02.gif" width="124" height="92" /></div>
</div>
<div id="parte3"><img src="Images/3_Natural-Wallpaper-aa_03.gif" width="116" height="92" /></div>
</div>
<div id="parte4"><img src="Images/3_Natural-Wallpaper-aa_04.gif" width="360" height="388" /></div>
<div id="lateral2">
<div id="parte5"><img src="Images/3_Natural-Wallpaper-aa_05.gif" width="124" height="388" /></div>
<div id="parte6"><img src="Images/3_Natural-Wallpaper-aa_06.gif" width="116" height="388" /></div>
</div>
</div>
</body>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="estillos.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contenedor">
<div id="parte1"><img src="Images/3_Natural-Wallpaper-aa_01.gif" width="360" height="92" /></div>
<div id="lateral1">
<div id="parte2"><img src="Images/3_Natural-Wallpaper-aa_02.gif" width="124" height="92" /></div>
</div>
<div id="parte3"><img src="Images/3_Natural-Wallpaper-aa_03.gif" width="116" height="92" /></div>
</div>
<div id="parte4"><img src="Images/3_Natural-Wallpaper-aa_04.gif" width="360" height="388" /></div>
<div id="lateral2">
<div id="parte5"><img src="Images/3_Natural-Wallpaper-aa_05.gif" width="124" height="388" /></div>
<div id="parte6"><img src="Images/3_Natural-Wallpaper-aa_06.gif" width="116" height="388" /></div>
</div>
</div>
</body>
Cita:
El enlace a los archivos (con las imagenes recortadas, no puedo poner el link bien!!):#contenedor {
text-align: left;
width: 600px;
margin: auto;
background-color: #000000;
}
#parte1{
width: 360px;
height: 92px;
float: left;
}
#parte2{
width: 124px;
height: 92px;
float: left;
}
#parte3{
width: 116px;
height: 92px;
float:right;
}
#parte4{
width: 360px;
height:388px;
float: left;
}
#parte5{
width: 124px;
height:388px;
float: left;
}
#parte6{
width: 116px;
height:388px;
float: right;
}
#lateral1{
width: 240px;
float: right;
}
#lateral2{
width: 240px;
float: right;
}
text-align: left;
width: 600px;
margin: auto;
background-color: #000000;
}
#parte1{
width: 360px;
height: 92px;
float: left;
}
#parte2{
width: 124px;
height: 92px;
float: left;
}
#parte3{
width: 116px;
height: 92px;
float:right;
}
#parte4{
width: 360px;
height:388px;
float: left;
}
#parte5{
width: 124px;
height:388px;
float: left;
}
#parte6{
width: 116px;
height:388px;
float: right;
}
#lateral1{
width: 240px;
float: right;
}
#lateral2{
width: 240px;
float: right;
}
htquitaestotp://wwquitaestow.megaupload.com/?d=GW2YDPR1
PD: Los contenedores que meti fueron para probar los floats de las capas internas
Espero que podais ayudarme
