div no muestra color de fondo

Gush · #1 (**permalink**) 17/11/2011, 14:28

Hola gente,

Estoy haciendo una web para mí y tengo una problemilla con un <div class="">

Os cuento:

Tengo hecho una plantilla en CSS y HTML. Lo tengo distribuido todo en capas. Pero una de ellas, de golpe, ha dejado de mostrar su color de fondo.

¿Cuándo se ve?
- float: left;
- float: right;
- height: "numero"px;

Si no pongo ninguna de esas variables no se me ve. El div tiene contenido... sé que si está vacío no se muestra... ni poniendo height: auto; se me muestra.

Os adjunto los códigos CSS y HTML que estoy usando.

Código CSS: (el que me falla está marcado con /*--ESTE ME DA EL ERROR-- */ )

Código:

/* ---------------------------------------------- Bloques Principales ---------------------------------------------- */

.container { /* Té tot el cos de la pagina */
	width: 100%;
	margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
}

.header {
	width: 100%;
	background-color: #666;
	/* background-image: url(../images/fondocabecera.png); */
	height: 150px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

.footer {
	padding: 10px 0;
	background: #666;
	bottom: 0;
	position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
	clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
	text-align:center;
	color:#999;
	font-size: 9px;
	width: 100%;
	top: 150px;
}


/* -------------------------------------------------- SubBloques -------------------------------------------------- */

.headerinterior {
	width: 980px;
	height: 150px;
	margin: 0 auto;
}

 /*--ESTE ME DA EL ERROR-- */

.subcontainer {
	background: #FFF;
	margin: auto;
	width: 980px;
}

/*-- HASTA AQUI -- */


.sidebar1 {
	float: left;
	width: 150px;
	margin-top: 5px;
	margin-left: 5px;
	padding: 10px;
	/* Border amb "relleu" dalt i esquerra mes clar que baix i dreta. */
	background-color:#E4E4E4;
	border-top: 2px groove #CCC;
	border-left: 2px groove #CCC;
	border-right: 2px groove #666;
	border-bottom: 2px groove #666;
}

.content {
	padding: 10px 0;
	width: 775px;
	float: left;
	margin: 10px;
}

Código HTML: (simplificado: sin meta)

Código:

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

<body>

<div class="header">
    <div class="headerinterior">CABECERA BLA BLA BLA</div><!-- acaba headerinterior -->
                        
</div><!-- acaba header -->

<div class="container">
<div class="subcontainer">    
                
 <div class="sidebar1">    
 /* ESTO ES UN MENU */
 <?php
include("includes/catalogo.php");
?>

</div><!-- acaba sidebar1 -->

<div class="content"><!-- ESTO ES XK ES UNA PLANTILLA. ASI SELECCIONO LO MODIFICABLE Y FIJO -->

<!-- TemplateBeginEditable name="CONTENIDO" -->CONTENIDO<!-- TemplateEndEditable --><!-- end .content -->
</div><!-- acaba content -->
</div><!-- acaba subcontainer--> </div><!-- acaba container -->

<div class="footer">FOOTER BLA BLA BLA</div><!-- acaba footer--> 
 

                   
</body>
</html>

Gush · #2 (**permalink**) 17/11/2011, 14:31

¡Esperando alguna solución efectiva ante tanta desesperación!

kseso? · #3 (**permalink**) 17/11/2011, 15:13

Ha batido usted todos los records de impaciencia.
3 minutos, 3. Enhorabuena.

Pista: limpiar floats

cuen1234 · #4 (**permalink**) 17/11/2011, 16:16

has probado a pasarlas en vez de class a pasar por id es decir # en vez de .

Gush · #5 (**permalink**) 17/11/2011, 17:40

si, antes las tenia todas por id... xo me paso lo mismo al final... v.v

emprear · #6 (**permalink**) 17/11/2011, 18:32

Tenes que remover el float, pero a continuación de sidebar y content, hacerlo en el footer no sirve porque esta fuera del container

asi (cambié colores y puse bordes para que se destaque)

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
 
/* ---------------------------------------------- Bloques Principales ---------------------------------------------- */
 
.container { /* Té tot el cos de la pagina */
width: 100%;
margin: 0 auto; /* el valor automático de los lados, unido a la anchura, centra el diseño */
border: solid yellow 1px;
}
 
.header {
width: 100%;
background-color: #666;
/* background-image: url(../images/fondocabecera.png); */
height: 150px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
 
.footer {
padding: 10px 0;
background: #666;
bottom: 0;
position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
text-align:center;
color:#999;
font-size: 9px;
width: 100%;
top: 150px;
}
 
/* -------------------------------------------------- SubBloques -------------------------------------------------- */
 
.headerinterior {
width: 980px;
height: 150px;
margin: 0 auto;
}
 
 /*--ESTE ME DA EL ERROR-- */
 
.subcontainer {
background-color: red;
margin: auto;
width: 980px;
border: solid cyan 1px;
}
 
/*-- HASTA AQUI -- */
 
.sidebar1 {
float: left;
width: 150px;
margin-top: 5px;
margin-left: 5px;
padding: 10px;
/* Border amb "relleu" dalt i esquerra mes clar que baix i dreta. */
background-color:green;
border-top: 2px groove #CCC;
border-left: 2px groove #CCC;
border-right: 2px groove #666;
border-bottom: 2px groove #666;
}
 
.content {
padding: 10px 0;
width: 775px;
float: left;
margin: 10px;
}
 
div.prueba {
width: 500px;
background-color: blue;
}
 
.limpiar {
clear: both;
}
/*]]>*/
</style>
</head>
<body>
<div class="header">
<div class="headerinterior">header interior</div>
</div>
<div class="container">
<div class="subcontainer">    
 <div class="sidebar1">    
sidebar
</div>
<div class="content">
content
</div>
<div class="limpiar"><!-- Eliminar el float --></div>
</div>
</div>
<div class="footer">footer</div>
</body>
</html>

mirá las lineas 87 y 105 de mi ejemplo, de todas maneras un poco complicado el código, no se bien que esquema queres pero creo que se podría simplificar.

Saludos