Foros del Web » Creando para Internet » CSS »

No puedo realizar bien el "puzzle" en CSS

Estas en el tema de No puedo realizar bien el "puzzle" en CSS en el foro de CSS en Foros del Web. Holas! 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 ...
  #1 (permalink)  
Antiguo 21/06/2007, 06:18
 
Fecha de Ingreso: junio-2007
Mensajes: 2
Antigüedad: 10 años, 5 meses
Puntos: 0
Pregunta No puedo realizar bien el "puzzle" en CSS

Holas!

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:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;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>
CSS
Cita:
#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;
}
El enlace a los archivos (con las imagenes recortadas, no puedo poner el link bien!!):
htquitaestotp://wwquitaestow.megaupload.com/?d=GW2YDPR1

PD: Los contenedores que meti fueron para probar los floats de las capas internas

Espero que podais ayudarme
  #2 (permalink)  
Antiguo 21/06/2007, 09:49
 
Fecha de Ingreso: junio-2007
Mensajes: 2
Antigüedad: 10 años, 5 meses
Puntos: 0
Re: No puedo realizar bien el "puzzle" en CSS

Encontre un error...

No estaba correctamente metido un div dentro de uno de los contenedores

Cita:
<body>
<div id="contenedor">
<div id="parte1"> TITULO </div>
<div id="lateral1">
<div id="parte2"><img src="Images/3_Natural-Wallpaper-aa_02.gif" width="124" height="92" alt=""/></div>
<div id="parte3"><img src="Images/3_Natural-Wallpaper-aa_03.gif" width="116" height="92" alt=""/></div>

</div>


<div id="parte4"><img src="Images/3_Natural-Wallpaper-aa_04.gif" width="360" height="388" alt=""/></div>
<div id="lateral2">
<div id="parte5"><img src="Images/3_Natural-Wallpaper-aa_05.gif" width="124" height="388" alt=""/></div>
<div id="parte6"><img src="Images/3_Natural-Wallpaper-aa_06.gif" width="116" height="388" alt=""/></div>
</div>
</div>
</body>
</html>
Ya está resuelto, lo que sigo sin comprender, es pq tanto firefox como IE hacen la misma interpretación y sin embargo en el dreamweaver se ve completamente otra :S
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




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