fondo de un div

[devnieL]

Hola. Por qué las divisiones no colorean su fondo, a pesar de que haya elementos dentro del mismo ? o es que tengo que especificar su altura.
(Aparecen los elementos dentro de la división pero el fondo del mismo no se colorea)

#menu {
text-align:center;
font:10px tahoma;
width:1000px;
background:#06F;
}

#menu ...(elementos del menu) {
...
...
}

[zerokilled]

es muy dificil determinarlo sin verlo de una forma mas completa. considera que una propiedad puede ser afectada por el comportamiento de otras propiedades aplicadas al mismo elemento u otros. sin ver mucho, puedo asumir que los elementos del menu estan flotando (float:left|right). en ese caso es normal que parezca que el elemento contenedor no tiene aplicado un fondo. en realidad lo tiene, la razon por la que no se muestra es porque los elementos hijos tienen un flujo diferente de modo que este altera la forma en que se muestran otros elementos. el siguiente ejemplo lo ilustra.

Código:

<ul><li>uno</li><li>dos</li><li>tres</li><li>cuatro</li></ul>
<style>
ul{
background:#c90;
}

li{
float:left;
}
</style>

en todo caso, a ninguno de los colaboradores nos gusta adivinar porque se emplea mucho esfuerzo en obtener la informacion necesaria a ciegas. muestra el codigo implicado de modo que se pueda reproducir para determinar donde esta el problema. cuando copies el codigo, por favor, ubicalo dentro de los bbcode [code] y [/code], o alguno similar para facilitar la lectura.

[devnieL]

Código:

@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
	border:0;
	outline:0;
}

html,body {
	width:100%;
	background:#DFEFF9;
}
#caja {
	height:50px;
	background-color:#000;
}

#contenedor {
	width:1000px;
	margin:-50px auto 0 auto;
}

#cabecera {
	height:50px;
	background:#000;
	color:#FFF;
	}

.caja_izquierda {
	width:400px;
	font:12px tahoma;
	}
.caja_medio {
	width:350px;
	height:400px;
	backgroun:#996;
	font:12px tahoma;
}
#menu {
	text-align:center;
	font:10px tahoma;
	width:1000px;
	background:#06F;
	height:25px; /* <------------------------------------------------------------ */
	}
#menu ul {
	list-style-type:none;
	}
#menu ul li.nivel1 {
	float:left;
	width:100px;
	height:25px;
}
#menu ul li a {
	line-height:25px;
	display:block;
	text-decoration:none;
	color:#fff;
	background-color:#399;
	position:relative;
	height:25px;
}
#menu ul li:hover{
	position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
	background-color:#6cc;
	color:#000;
	position:relative;
}
#menu ul li a.nivel1 {
	display:block;
	position:relative;
}
#menu ul li ul {
	display:none; /* acá se ocultan los subniveles */ 
}
#menu ul li a:hover ul, #menu ul li:hover ul {
	display:block;
	position:absolute;
	left:0;
}
#menu ul li ul a {
	width:100px;
	border-top-color: #000;
}
#menu ul li ul li a:hover {
	border-top-color: #000;
	position: relative;
}

Gracias por tu respuesta. Este el código y estás en lo cierto, hay elementos dentro del menú que tienen la propiedad float, en tal caso siempre se ha de poner una altura para poder "colorear" el fondo ?

[zerokilled]

indicar el alto, aunque funcione, esteticamente no creo que sea lo adecuado. la razon es simple, si el usuario agranda el tamaño de la fuente percibira que los elementos estan desubicados. otra forma posible es ubicando elemento dentro del elemento que contiene el fondo pero al final. es decir, que sea el ultimo hijo del elemento con fondo. a este elemento le aplicas clear:both para indicarle al navegador que alrededor de este elemento no deben flotar otros elementos. esto fuerza al elemento contenedor que el espacio sea visible. usando mas o menos el mismo ejemplo que mostre,

Código:

<div>
<ul><li>uno</li><li>dos</li><li>tres</li><li>cuatro</li></ul><br /></div>
<style>
div{
background:#c90;
}

li{
float:left;
}

br{
clear:both;
}
</style>

creo que hay otra forma puramente con css y sin necesidad de un elemento extra pero no soy capaz de pensar la solucion. si bien recuerdo alguien el foro de css lo habia mencionado pero nunca vi un codigo que hiciera tal.

[devnieL]

Excelente. Con el <br/> y su propiedad, funcionó.
Gracias.

[jomaruro]

Hola:

También funcionaría poniendole overflow:auto a la etiqueta <ul> y no habría que poner la etiqueta <br />

Código CSS:

<style type="text/css">
div{background:#c90;}
ul{list-style-type:none; overflow:auto;}
li{float:left; padding-left:20px;}
</style>
 

Código HTML:

<div>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
<li>cuatro</li>
</ul>
</div>
 

Pudiendose aprovechar esta circunstancia para incluir otras propiedades que pudieran ser necesarias para este selector, (en este caso aprovechamos el list-style-type y quitamos los circulitos negros que se posicionan a la izquierda de los textos del <li> y que entorpecen la visión).

Saludos.

[zerokilled]

gracias jomaruro, no pense que era tan sencillo como un overflow:auto. sera la primera vez que veo utilizarse de esta manera.

[jomaruro]

Hola:

De nada, ya soy feliz, ¡he enseñado algo a alguien!

Saludos.