Foros del Web » Creando para Internet » CSS »

problema con el color de fondo

Estas en el tema de problema con el color de fondo en el foro de CSS en Foros del Web. Hola, tengo un pequeño problema con el color de fondo de una capa , esa capa contiene 3 capas mas. Aqui mi codigo es simple... ...
  #1 (permalink)  
Antiguo 12/02/2011, 09:55
 
Fecha de Ingreso: diciembre-2008
Ubicación: PERU
Mensajes: 288
Antigüedad: 9 años
Puntos: 23
Pregunta problema con el color de fondo

Hola, tengo un pequeño problema con el color de fondo de una capa , esa capa contiene 3 capas mas.

Aqui mi codigo es simple...

El codigo de mi HTML

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />
  4. <title>ejemplo</title>
  5. </head>
  6.  
  7.  
  8. <div id="cuerpo">
  9.  
  10.       <div id="colizq">
  11.             IZQUIERDA
  12.             <br>IZQUIERDA</br>
  13.             <br>IZQUIERDA</br>
  14.       </div>
  15.            
  16.       <div id="colcuerpo">CENTRO</div>
  17.      
  18.       <div id="colder">DERECHA</div>
  19. </div>
  20.  
  21. </body>
  22. </html>

Aqui esta el codigo de mi hojas de estilos

Código CSS:
Ver original
  1. /* CSS Document */
  2.  
  3. #cuerpo{
  4.     position: relative;
  5.     width: 800px;
  6.     height: auto;
  7.     background-color: #FF0000;
  8.     background-repeat: repeat-x;
  9.    
  10. }
  11.  
  12. #cuerpo #colizq{
  13.     float:left;
  14.     width: 200px;
  15.     position: relative;
  16.     height: auto;
  17. }
  18.  
  19.  
  20. #cuerpo #colcuerpo{
  21.     width: 400px;
  22.     float: left;
  23.     position: static;
  24.     border: none;
  25.     height: auto;
  26. }
  27.  
  28. #colcuerpo #colder{
  29.     width: 200px;
  30.     position: relative;
  31.     float: left;
  32.     border: none;
  33.     height: auto;
  34. }

Bueno el problema esq el color de fondo no logra llenar todoo.. aqui una imagen para mejor comprension..



nose porq en el dreamweaver se ve perfectamente pero cuando le hago vista preliminar en el navegador no llega todo el fondo de color..
  #2 (permalink)  
Antiguo 12/02/2011, 10:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: problema con el color de fondo

Hola yuo2.

prueba con:
1 - dar overflow:hidden; a la capa que contiene elementos flotados.
2 - quitar height:auto; a la capa #cuerpo{}

Debería quedarte así:
Código CSS:
Ver original
  1. #cuerpo{
  2.     position: relative;
  3.     width: 800px;
  4.     background-color: #FF0000;
  5.     background-repeat: repeat-x; /*esto también está demas, pues no tienes ninguna imagen a repetir*/
  6.     overflow:hidden;
  7. }

Esta técnica se conoce como "limpiar los float" y hace referencia al problema de que la caja padre no toma la altura de su contenido, cuando este esta formado por cajas flotadas.

P/D:
También, para el mismo fin, se puede incluir un div vacío debajo de la capa que contiene los elementos flotados y hacer uso de la propiedad clear:
<div style="clear: both"></div>

Aunque aconsejan usar overflow:hidden.


Espero te sirva esta info. En el enlace puedes estudiarlo más en detalle. Un abrazo.
  #3 (permalink)  
Antiguo 12/02/2011, 10:12
 
Fecha de Ingreso: diciembre-2008
Ubicación: PERU
Mensajes: 288
Antigüedad: 9 años
Puntos: 23
Respuesta: problema con el color de fondo

Gracias... funciono Ok..
  #4 (permalink)  
Antiguo 12/02/2011, 12:19
Avatar de TEPO  
Fecha de Ingreso: febrero-2010
Mensajes: 235
Antigüedad: 7 años, 10 meses
Puntos: 23
Respuesta: problema con el color de fondo

Nunca le des bola al dreamweaver, te muestra cualquier cosa.-

Etiquetas: color, fondo
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 09:45.