Foros del Web » Creando para Internet » CSS »

Capas con atributo 'float' no muestran fondo

Estas en el tema de Capas con atributo 'float' no muestran fondo en el foro de CSS en Foros del Web. Hola, mi problema es que tengo 3 capas. La primer capa tiene una imagen de fondo y contiene a las otras dos capas. Las dos ...
  #1 (permalink)  
Antiguo 20/02/2008, 23:53
 
Fecha de Ingreso: junio-2005
Ubicación: México, México
Mensajes: 429
Antigüedad: 12 años, 6 meses
Puntos: 1
Capas con atributo 'float' no muestran fondo

Hola, mi problema es que tengo 3 capas. La primer capa tiene una imagen de fondo y contiene a las otras dos capas. Las dos capas que estan dentro tienen el atributo 'float: left' y 'float:right' respectivamente para acomodarlas a la izquierda y a la derecha. La posición de las capas queda perfecto. El problema es que al utilizar el atributo 'float' el fondo de la capa que las contiene no se muestra, más bien muestran el fondo de la página, como si la capa que las contiene no tubiera fondo. Si quito el atributo 'float' el fondo aparece, pero no quedan acomodadas. Esto sucede en todos los navegadores excepto en internet explorer.

Alguien sabe como podría hacer que las dos capas mostraran el fondo de la capa 'madre' aunque utilice el atributo 'float'???

Gracias de ante mano y ojalá me hayan entendido.
  #2 (permalink)  
Antiguo 21/02/2008, 07:01
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Capas con atributo 'float' no muestran fondo

Sí, pon esto justo antes de que acabe el contenedor:
<div style="clear: both;"></div>
  #3 (permalink)  
Antiguo 21/02/2008, 08:43
 
Fecha de Ingreso: junio-2004
Mensajes: 616
Antigüedad: 13 años, 6 meses
Puntos: 25
Re: Capas con atributo 'float' no muestran fondo

Cita:
Iniciado por scrolling Ver Mensaje
[...]El problema es que al utilizar el atributo 'float' el fondo de la capa que las contiene no se muestra, más bien muestran el fondo de la página, como si la capa que las contiene no tubiera fondo[...]
mmm... Yo recuerdo haberme topado con un problema similar... y realmente es como si no se calculase bien la altura de la capa, y por tanto no muestra el fondo... Creo recordar que había que limpiar el float antes de que terminara la propia capa... o meterle alto fijo, o display:block

Es una de estas tres. Ahora no recuerdo bien.
__________________
eContento
- Mis artículos, tutoriales y labs
- Mis jsfiddles
  #4 (permalink)  
Antiguo 21/02/2008, 17:00
 
Fecha de Ingreso: junio-2005
Ubicación: México, México
Mensajes: 429
Antigüedad: 12 años, 6 meses
Puntos: 1
Re: Capas con atributo 'float' no muestran fondo

Gracias, pero no logro que se muestre bien.

El estilo de las capas es:

Código:
#centro { //capa contenedora
	background: url(../imagenes/centro.png) repeat-y;
	width: 1000px;
	margin: auto;
	text-align: left;
}

#secciones { //capa que está dentro de "#centro" y a la izquierda
	padding: 0 20px 0 20px;
	width: 660px;
	float: left;
}

#enlaces { //capa que está dentro de "#centro", pero a la derecha
	border-left: 1px #DDD dotted;
	float: right;
	padding: 0 20px 0 20px;
	width: 259px;
} 
Las capas están acomodadas así:

Código:
<div id="centro">
    <div id="secciones">
        <p>secciones</p>seccion1<p>seccion 2</p> seccion 3
    </div>
    <div id="enlaces">
        enlaces
    </div>
</div>
los estilos los pongo en colores porque tengo un pequeño diagrama de la página:



Y así se "debería" de ver (o por lo menos eso creo):



Como ven, la capa contenedora tiene el fondo, pero solo se ve ese fondo en Internet Explorer, en Firefox, Opera y Safari no lo muestra y se "salta" hasta el fondo de la página (el degradado gris).

Ya intente con el display:block, con un alto y ancho fijos, incluso con el clear:both (aunque no tiene mucho que ver, porque 'clear' sirve para otra cosa), pero bueno, ya lo intenté y no lo logro.

Alguna idea? :(

Saludos!
  #5 (permalink)  
Antiguo 21/02/2008, 17:11
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Capas con atributo 'float' no muestran fondo

Los elementos padres colapsan cuando uno de sus hijos tiene un float. Lee este mensaje:
http://www.forosdelweb.com/f53/div-q...l-todo-553102/
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 21/02/2008, 22:07
 
Fecha de Ingreso: junio-2005
Ubicación: México, México
Mensajes: 429
Antigüedad: 12 años, 6 meses
Puntos: 1
Re: Capas con atributo 'float' no muestran fondo

Ahhh cierto, ahora sí funcionó, gracias!!

Saludos!
  #7 (permalink)  
Antiguo 22/02/2008, 12:39
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Re: Capas con atributo 'float' no muestran fondo

mmm.. no se que tan recomendable es poner overflow:auto; para solucionar este problema (yo lo he usado y en ciertas ocasiones y en ciertos navegadores aparece indeseadamente la barra de scroll).
La solucion que yo creo mas recombable es la de simplemente flotar el elemento padre. Eso si, seguramente deberas asignarle un ancho para que quede con el temaño deseado.
__________________
oohh... quisiera ser godines!!!
  #8 (permalink)  
Antiguo 22/02/2008, 12:43
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Capas con atributo 'float' no muestran fondo

Esa es otra buena solución pero que también depende del situación. Hay veces que eso causa mas problemas de lo que resuelve.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
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 20:15.