Ayuda con capas!!

abigor66 · #1 (**permalink**) 28/09/2008, 11:05

Buenos dias Foreros, estoy intentado maquetear una web utilizando capas, pero tengo un problema, en IE7 o Maxtho2 funciona bien, pero no con FF3 o Chrome no.

este es el codigo:

html:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>
<div align="center">
 <div id="cuerpo">
  <div id="body">
   <div id="body-left">
    <div class="left01"></div>
    <div id="clear"></div>
    <div class="left02"></div>  
   </div>
   <div id="body-right">
    <div class="right01"></div>
    <div id="clear"></div>
    <div class="right02"></div>
    <div class="right03"></div>
    <div id="clear"></div>
    <div class="right04"></div>
    <div class="right05"></div>
   </div>  
  </div>
  <div id="clear"></div>
  <div class="body-bottom">
   <div class="bottom01"></div>
   <div class="bottom02">
    <div class="bottom03"></div>
    <div class="bottom04"></div>
   </div>
  </div>  
 </div>
</div>
</body>
</html>

css:

Código:

body {background-image:url(../img/img01_r1_c1.jpg); background-repeat:repeat-x; font-family:"Century Gothic", Arial, "times New Roman"; font-size:10px; color:#666666}
* {padding:0; margin:0;}

#cuerpo {width:995px}
#body {width:995px; background-image:url(../img/img01_r6_c2.jpg); background-repeat:repeat-y;}
#body-left {width:265px; float:left}
#body-right {width:730px; float:right}
#body-bottom {width:995px; height:30px}
#clear {clear:both; background:none;}

.left01 {background-image:url(../img/img01_r1_c2.jpg); background-repeat:no-repeat; width:265px; height:250px;}
.left02 {background-image:url(../img/img01_r5_c2.jpg); background-repeat:no-repeat; background-position:left top; width:265px;}
.right01 {height:39px; width:730px; background-image:url(../img/img01_r1_c4.jpg); background-repeat:repeat-x;}
.right02 {background-image:url(../img/img01_r2_c5.jpg); background-repeat:repeat-x; width:710px; background-position:top; height:50px; float:left;}
.right03 {background-image:url(../img/img01_r2_c6.jpg); background-repeat:no-repeat; width:20px; height:50px; float:right}
.right04 {width:725; float:left}
.right05 {background-image:url(../img/img01_r4_c7.jpg); background-repeat:no-repeat; background-position:top; width:5px; height:538px; float:right}
.bottom01 {background-image:url(../img/img01_r7_c2.jpg); background-repeat:no-repeat; background-position:top; width:265px; height:30px; float:left}
.bottom02 {width:730px; height:30px; float:right}
.bottom03 {background-image:url(../img/img01_r7_c5.jpg); background-repeat:repeat-x; background-position:top; width:710px; height:30px; float:left}
.bottom04 {background-image:url(../img/img01_r7_c6.jpg); background-repeat:no-repeat; width:20px; height:30px; float:right}

el problema es que la imagen de #body no se visualiza en los navegadores FF y Chrome, porque el alto no está especificado, sin embargo, esto debe de quedar así, porque el contenido de la página es variable y por ende su altura tambien. Repito, IE y Maxthon estan respetando el código (algo raro, pero es así.)

Espero me puedan ayudar.

Gracias

Mikmoro · #2 (**permalink**) 28/09/2008, 11:48

Sólo es que el corte (<div id="clear"></div>) lo has puesto fuera, y debe estar dentro de la caja #body. Súbelo un </div> más arriba y se solucionará.

abigor66 · #3 (**permalink**) 28/09/2008, 12:26

Gracias Mikmoro funfiona al 100% te agradecería si me dieras un explicación del porque debe de ser así, pues crei que el corte lo habia hecho bien.

Nuevamente Gracias

Mikmoro · #4 (**permalink**) 28/09/2008, 15:51

Una caja que contenga otras cajas flotadas no crece para albergar su contenido, porque esas cajas flotadas no ocupan un espacio físico real. Si dentro de esa caja pones al final otra que tenga un corte (clear:both), es decir, que impida que haya cajas flotadas a sus lados, entonces la contenedora debe crecer para albergar a esa caja del corte, que sí ocupa espacio, y como su sitio real es después de las cjas flotadas, la contenedora crece para acoger a todas.

No es muy científica pero es mi explicación, y es así como funciona.

abigor66 · #5 (**permalink**) 29/09/2008, 07:28

Muchas Gracias y muy clara la explicación.

Suerte