Entrar

que el fondo del contenido llegue hasta el final del contenido...

igualada · · Solicitar retirada
hola,

tengo un problema con mi web, tengo definido un color de fondo en el contenido y le dia una altura del 100%, pero si lo que tengo en el contenido es más largo cuelga, es decir tanto si tengo un menú lateral más largo como si el contenido ocupa más.

el código CSS para el contenido es este:

#contenido {width: 820px; margin: 0 auto; background: #C6E2FF;padding: 15px 0; min-height: 150%; height: auto !important;}

he probado tres cosas:

poner un fondo degradado de forma que se degrada hasta el color de fondo del body, el degradado me queda bien en los distintos navegadores pero me aparce una separación entre la #cabecera y el #contenido del color de fondo del body, y eso no lo quiero. la altura del fondo de contenido sigue siendo inferior claro, pero queda bien.

añadir al div del #contenido { position: absolute }, así el fondo del contenido se ve bien, lcoge todo el contenido pero se me va todo el contenido a la izquierda... y no se como hacer para que vuelva a estar en su sitio.

añadir al div de #contenido {overflow:hidden}, entonces el fondo del contenido se alarga hasta el final del contenido, queda en al posición correcta, pero me vuelve a quedar un espacio entre la #cabecera y el #contenido del color de fondo del body.

¿alguien me puede ayudar? gracias!

(la web es http://www.adoptivanet.info pero no se qué pasa que ahora no se puede acceder...)
igualada · · Solicitar retirada
me he dejado una cosa, con el overflow:hidden me pasa también que tengo algunas cosas que sobresalen del contenido (los menus) y si pongo overflow:hidden me quedan dentro del contenido, y eso tampoco lo quiero.
gracias
SuperHipo · · Solicitar retirada
Hola igualada,

Desgraciadamente no existe "height: 100%".

Si no indicas ningun height, el div crecerá con el contenido y si usas un height fijo el contenido superará el borde inferior del div. Para evitar esto último puedes usar el overflow: auto, pero creo que no es eso lo que quieres, no?

Si he entendido bien la pregunta, lo mejor que puedes hacer es no dar ningun height y maquetar el contenido usando margin o padding. Así el div crecerá adaptándose al contenido pero conservando el formato que has creado con css para este div.

No estoy muy seguro de si era este o no el problema. Si no era esto, por favor, intenta aclararmelo un poco mejor y vemos qué solución le damos.

Un saludo
igualada · · Solicitar retirada
hola,
pues no sé... loq eu tengo puesto en el div del contenido es:
#contenido {width: 850px; margin: 0 auto; background: #C6E2FF;padding: 15px 0; min-height: 100%; height: auto !important;}

si no pongo una altura minima entonces no hace nada, no pone color en el fondeo del div...

no sé, la verdad es que no he conseguido que me quede bien aún.
SuperHipo · · Solicitar retirada
Si no muestra nada es porque el div no tiene contenido ninguno, porque si no el div se adapta de alto al contenido que tenga. ¿Estás seguro de que ese div tiene contenido?

Otra posibilidad es que haya problemas con el "float" y estés sacando los contenidos del div sin querer... Por ejemplo, que el div no tenga "float" pero alguno de los contenedores para el contenido sí... Cuestión de echarle un vistazo al código :)

Si no tiene ningún contenido pero a pesar de todo quieres que se muestre el div entonces ponle un alto fijo (algo como "height: 400px;"). Lo que no puedes hacer es usar los porcentajes para indicar el alto. Esto no lo acepta ningún navegador.

Un saludo igualada!
skaparate · · Solicitar retirada
Hola:

Como dice SuperHipo, el problema es que le has dado float al div #nuve, lo que hará que este div se salga del #contenido. Para que esto no ocurra, incluye esto al comienzo de tu archivo CSS:

/* Para navegadores que soportan CSS3 */
.cf:before, .cf:after {
	content: "";
  display: table;
}

.cf:after {
  clear: both;
}

/* Para IE 6/7, porque así se activa una característica llamada Layout */
.cf {
  *zoom: 1;
}

Ahora, añade la clase cf a todos los divs que contengan elementos flotados. Por ejemplo:

<head>
<style>
   /* aquí iría lo anterior */
  .alignl { float: left; }
  .alignr { float: right; }
</style>
</head>
<body>
<div id="padre" class="cf">
  <div class="alignl"></div>
  <div class="alignr"></div>
</div>
</body>

En tu caso, debería bastar con <div id="contenido" class="cf">...</div>. Además, debes agregarle la propiedad CSS clear: both; a el elemento que le sigue si quieres que este aparezca debajo del elemento flotado.

Saludos.

P.D.: se escribe nube :P, aunque quizás lo hiciste a propósito.