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;
}
(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>