Foros del Web » Creando para Internet » CSS »

fondo de un div

Estas en el tema de fondo de un div en el foro de CSS en Foros del Web. Hola. Por qué las divisiones no colorean su fondo, a pesar de que haya elementos dentro del mismo ? o es que tengo que especificar ...
  #1 (permalink)  
Antiguo 07/12/2009, 20:12
 
Fecha de Ingreso: noviembre-2009
Ubicación: 127.0.0.1
Mensajes: 31
Antigüedad: 8 años
Puntos: 1
fondo de un div

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) {
...
...
}
  #2 (permalink)  
Antiguo 07/12/2009, 20:31
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: fondo de un div

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 07/12/2009, 21:00
 
Fecha de Ingreso: noviembre-2009
Ubicación: 127.0.0.1
Mensajes: 31
Antigüedad: 8 años
Puntos: 1
Respuesta: fondo de un div

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 ?
  #4 (permalink)  
Antiguo 07/12/2009, 21:26
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: fondo de un div

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 07/12/2009, 21:48
 
Fecha de Ingreso: noviembre-2009
Ubicación: 127.0.0.1
Mensajes: 31
Antigüedad: 8 años
Puntos: 1
Respuesta: fondo de un div

Excelente. Con el <br/> y su propiedad, funcionó.
Gracias.
  #6 (permalink)  
Antiguo 08/12/2009, 03:55
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: fondo de un div

Hola:

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

Código CSS:
Ver original
  1. <style type="text/css">
  2. div{background:#c90;}
  3. ul{list-style-type:none; overflow:auto;}
  4. li{float:left; padding-left:20px;}
  5. </style>

Código HTML:
Ver original
  1. <div>
  2. <ul>
  3. <li>uno</li>
  4. <li>dos</li>
  5. <li>tres</li>
  6. <li>cuatro</li>
  7. </ul>
  8. </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.

  #7 (permalink)  
Antiguo 08/12/2009, 08:47
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: fondo de un div

gracias jomaruro, no pense que era tan sencillo como un overflow:auto. sera la primera vez que veo utilizarse de esta manera.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #8 (permalink)  
Antiguo 08/12/2009, 09:51
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: fondo de un div

Hola:

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

Saludos.

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 00:46.