Foros del Web » Creando para Internet » CSS »

Ayuda con capas!!

Estas en el tema de Ayuda con capas!! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/09/2008, 12:05
 
Fecha de Ingreso: mayo-2008
Mensajes: 489
Antigüedad: 9 años, 6 meses
Puntos: 8
Pregunta Ayuda con capas!!

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
  #2 (permalink)  
Antiguo 28/09/2008, 12:48
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: Ayuda con capas!!

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á.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 28/09/2008, 13:26
 
Fecha de Ingreso: mayo-2008
Mensajes: 489
Antigüedad: 9 años, 6 meses
Puntos: 8
Respuesta: Ayuda con capas!!

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
  #4 (permalink)  
Antiguo 28/09/2008, 16:51
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: Ayuda con capas!!

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.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 29/09/2008, 08:28
 
Fecha de Ingreso: mayo-2008
Mensajes: 489
Antigüedad: 9 años, 6 meses
Puntos: 8
Respuesta: Ayuda con capas!!

Muchas Gracias y muy clara la explicación.

Suerte
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 07:47.