Problema capas que no aumentan su hight

Thanat0s #1 Feb '11 Cofrade

Buenas gente, tengo un problemilla con un diseño que estoy haciendo para un proyecto de clase.

El caso es que tengo una capa contenedor y dentro de ésta meto el resto de capas de forma que cuadre el diseño.

Bien, el problema me surge cuando le meto mucho texto a la capa donde va a ir el contenido principal de la web la capa no aumenta de tamaño, ni tampoco la capa contenedor que está por encima suyo).

Lo tengo subido en www.thanatos.es , si alguien puede echarle un ojo y darme una sugerencia se lo agradecería.

Saludos

catalon #2 Feb '11 Inocente

mmmmmm...... No me hagas mucho caso pero podria ser pk contenedor tiene 100% height y margin:auto??? k pasa si le das al height auto o el margin lo pones fijo? aunk sea por probar mira a ver k pasa.
Con esas dos propiedades del modo en que las tienes es como si al contenedor le dieras un height fijo.

Thanat0s #3 Feb '11 Cofrade

Si le meto a contenedor height auto desaparece.

Le he cambiado el margin a 0 auto al contenedor para que deje 0 pixeles por arriba y abajo, pero tampoco.

HoRTeL #4 Feb '11

Será algo que ver entre el div padre y los hijos.

A una mala ponle al css del texto un "overflow:scroll;"

1 respuesta

catalon #5 Feb '11 Inocente

luego esta el tema del position. No se pk la gente se complica la vida con los puzles estos poniendolo todo con position:absolute.

la capa general tiene un top y un bottom.... kiza ahi esta el problema, no tiene mucho sentido, el top y el bottom estan luchando entre ellos para definir la posicion xD

Por experiencia propia te recomendaria que no le des nunca propiedad absolute a nada mas que al contenedor y a algo que quieras por encima como un pop-up o algo así.

1 respuesta

Thanat0s #6 Feb '11 Cofrade

#4 Sí, si le meto un overflow auto a la capa del texto todo queda bien maquetado y funciona perfectamente, pero no es lo que quiero, quiero que la página crezca de acuerdo al tamaño de ese texto que puede ser mayor o menor :S

#5 He usado absolute porque si uso relative es un cacao mayor.
Y la capa general tiene top y bottom porque quiero que respete ambas cosas, pero bueno, eso lo puedo trucar quitando el bottom y poniéndole un pading-bottom.

Todo esto no me pasaba con tablas, lo tendría todo maquetado a la primera y sin problemas, pero como hoy en día se lleva hacerlo con capas, pues me toca tragar y cumplir xD

catalon #7 Feb '11 Inocente

El problema esk top fija la parte superior del div mientras k bottom fija la parte inferior, por lo tanto como te decia es como tener el alto fijo.

En cuanto al cacao, directamente no se ni para que defines position. No deberias de usar propiedades a menos que las necesites. Si la pagina que estas haciendo no tiene nada mas complicado de maquetar que lo que has puesto, no necesitas ni usar el position.

Y perdona si sueno un poco inquisidor xD esque e estado enseñando a un amigo que es un cabezon y esta empeñado en usar position absolute en todo, eso si, luego sus cacaos se los tengo que arreglar yo xD

1 respuesta

Thanat0s #8 Feb '11 Cofrade

#7 Con lo que he dicho de cambiar el bottom por padding-bottom la capa del texto se agranda hasta ocupar el tamaño del texto, pero el contenedor sigue sin agrandarse.

Si no uso position, ¿entonces qué uso?

1 respuesta

catalon #9 Feb '11 Inocente

#8 es el contenedor absolute?? Si es absolute no tiene nada dentro. Ergo no tiene nada a lo que ajustarse.

Lo que yo hago normalmente es no darle ningun tipo de position, no hace falta, en lugar de posicionar las capas en relacion a la ventana, las posiciono en relacion a su contenedor, usando margins o paddings. De ese modo si el dia de mañana decido aumentar el alto de por ejemplo la cabecera, no tendre que modificar todos los top de todas la capas, y si el contenido crece, lo hara todo lo demas. Del modo en que lo haces que haras cuando necesites aumentar el alto de algo? modificar todo lo demas?

Thanat0s #10 Feb '11 Cofrade

Oki, probaré a hacerlo de otra manera totalmente diferente.

Gracias por la ayuda, piro a descansar un rato.

NeB1 #11 Feb '11

#1 Tendrías que saber que el atributo position:absolute hace que el elemento salga del flujo normal de HTML.

Es decir, tu pones

<div id="contenedor">
     <div id="mierda" style="position:absolute;height:1000px;"></div>
</div>

y el div 'contenedor' tendrá un height de 0px, porque dentro no tiene ningún elemento. Para que lo veas claro, en el div contenedor quitale el atributo height:100% (dejalo en auto) y después al div general quitale el 'position:absolute' y verás como el div crece de repente.

Además al principio del fichero te falta la declaración DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Sin ella cada navegador actuará como le salga del nabo. En el header tienes un META mal escrito

<META name="keywords" content=content="Risk, online, multijugador">

Y por alguna razón (algo tendrás mal escrito) el firefox interpreta tu web de la siguiente forma (lo puedes ver usando firebug).

<html>
    <head>
    </head>
    <body>
            <html>--> WTF!!?
                 <div id="contenedor">resto de la web</div>
            </html>
    </body>
</html>

La forma normal de maquetar una web como tu lo estás haciendo sería esta:

<div id="contenedor" style="width:600px; margin:0 auto;background-image:url('IMAGENQUEHARIALAFUNCIONDEBARRAIZQUIERDAYBARRADERECHA');image-repeat:repeat-y;">
     <div id="menu" style="float:left;width:100px;">
     </div>
     <div id="general" style="float:right;width:490px;">
     </div>
     <div style="clear:both;"></div>
</div>

Y todos los divs que has puesto para meter los bordes y cosas así (la barraI o barraD) se pueden conseguir con backgrounds-image, con borders y con background-colors, todo es pensarlo un poco mejor.

3 1 respuesta

Thanat0s #12 Feb '11 Cofrade

#11 Lo del tendrías que saber te lo ahorras, suena un tanto prepotente.

En esta asignatura todavía no han llegado a los css, pero estoy adelantando trabajo para que no se me acumule con otras asignaturas.

Lo del doctype estoy esperando a que diga el profesor cuál es el que quiere.

Por lo demás gracias.

2 respuestas

NeB1 #13 Feb '11

#12??? enserio? weno, tomatelo como quieras, solo te lo decía para que lo sepas si vas a hacer uso de él.

1 respuesta

Thanat0s #14 Feb '11 Cofrade

#13 Hay otras formas de decirlo, agradezco la ayuda, pero me pillas un tanto picado y me ha sonado fatal eso más que nada porque con esa forma de expresarte das por hecho que he estudiado/me dedico a esto, cuando no es así.

Si hubieras empezado la frase con "el atributo positionblablabla" me lo hubiera tomado de forma diferente

Maneras y maneras, pero lo dicho, gracias.

Edit: ya está arreglado todo menos el doctype a la espera de lo que diga mañana el profesor.

Thanat0s #15 Feb '11 Cofrade

Bueno, ahora la web se agranda bien, pero tengo un problema y es que cuando "general" no tiene contenido el height de "contenedor" no se ajusta al tamaño del explorador.

Edit: arreglado con min-height:100% y height:auto;

1 respuesta

elkaoD #16 Feb '11

#12 internet serious business

1

DarkSoldier #17 Feb '11

thanat0s como puedes ser asi macho ?? ... xDDD dan ganas de trollear joder... no ha sido para nada borde, si te adelantas a tu profesora esta bien, pero no coloques cosas que no sabes que hacen :S de ahi la frase que te ha dicho neb1..... recuerda k no estamos aki obligados a ayudarte, y si lo hacen, sea de la manera k sea, te callas y lo agradeces...

2 respuestas

NeB1 #18 Feb '11

#15 Acabas de toparte con un problema típico en las webs xD el min-height en algunas versiones de IE no funciona como toca (en IE 6 solo se aplica a los TD's y por debajo de esa versión no existe) pero mientras no sea una web comercial para alguien muy exigente, así está bien.

1 respuesta

Thanat0s #19 Feb '11 Cofrade

#17 Lee mi comentario a nebi, si no entiendes mi punto de vista lo siento.
Yo siempre que respondo en este foro intento ser agradable con la gente aunque sean preguntas de como hacer un array y no digo: como tendrías que saber porque sino eres retrasado mental los arrays blablabla.

#18 Es un proyecto que tengo que presentar en IE o en FF, lo voy a presentar en lo segundo, pero me suena que lo del tamaño en IE se puede arreglar con esto:
height: expression((documentElement.offsetHeight < 1024) ? "100%" : "inherit" );

¿No? Lo que no sé es que versiones de IE funcionará.

pd: ahora también estoy picado, el hon está acabando con mi paciencia y buenos modales... ajum.

2 respuestas

NeB1 #20 Feb '11

#19 algo así era xD la verdad es que no he hecho demasiado uso de los expressions. De todas formas ya te digo, desde el IE 7 funciona perfectamente la otra opción.

Puedes poner un condicional CSS del rollo

<!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->

y ahi meter todos los trucos que necesites para esas versiones que suelen ser las que dán problemas.

1 respuesta

Thanat0s #21 Feb '11 Cofrade

#20 Vaya, no me puedo creer que MS se esté poniendo al día y a la par en lo que refiere a estilos.

Thanks por la ayuda.

1 respuesta

NeB1 #22 Feb '11

#21 bueeeeno.... si miramos los atributos de CSS3 deja bastante que desear

scumah #23 Mar '11

Usa el min-height y pista, no te compliques, el que use IE6 que se joda.

Kaos #24 Mar '11 Administrador

1) Una capa DIV por defecto es display:block. Si no lleva float se ajusta a su contenedor a lo ancho y a su contenido a lo alto. Es decir, si metemos un DIV en un body, cogerá todo el ancho del body y tendrá el alto de lo que tenga dentro.

2) Si a esa capa le aplicamos un FLOAT se ajustará tanto a lo ancho como a lo alto a su contenido. Con lo cual ya no tendrá el 100% de ancho.

3) La única posibilidad de que un DIV no se "estire" a lo alto, tanto como mide su contenido, es porque ese contenido esté con FLOAT.

4) Si tenemos una capa con FLOAT y BLOCK que contiene otra capa con FLOAT y BLOCK la única forma de que se "estire" es:

A- Meterle un overflow:hidden a la capa contenedora.
B- No es aconsejable pero también vale meter al final del contenido una capa con clear:both;

Con B obtienes el mismo resultado pero metes más markup. El tema es que hay ocasiones en las que no puedes usar A porque tienes una capa flotante en absolute que se sale de su contenedor

1 2 respuestas

NeB1 #25 Mar '11

#24 a no ser, que ese DIV, tenga otro DIV interior en position:absolute que es el caso que era el caso.

FaLLeN #26 Mar '11

Ya sabes #17 que si no entiendes su punto de vista, #19 lo siente. Parece mentira que siquiera te dignes a cuestionarle/reprocharle su actitud... </ironia>

#19 Yo te lo digo claramente, aunque no estoy picado por el hon o porque un señor por la calle me ha mirado mal. Con esa falta de educación y esa pedantería dan ganas de mandarte a la putísima mierda. Y si no entiendes mi punto de vista o que pinto yo en este tema, lo siento.

1 respuesta

Thanat0s #27 Mar '11 Cofrade

#26 Te voy a responder con una imagen, que a veces vale más que mil palabras:

spoiler

#24 Gracias por la explicación, todo me queda más claro ahora

Y me ha surgido otra duda: cuando tenéis una capa que no queréis que aparezca en pantalla (tenga o no tenga contenido), ¿qué es preferible?

sacarla fuera de pantalla con position:absolute y top: -1000px (o lo que sea)
ponerle visibility:hidden;
ponerle display:none;

2 respuestas

FaLLeN #28 Mar '11

#27 te cubres de gloria tú solito.

NeB1 #29 Mar '11

#27 display:none, por supuesto.

Sacarla fuera de pantalla es una xapuza, y ponerle visibility:hidden hace que el DIV siga estando ahí, pero invisible, por ejemplo, si lo que quieres es que desaparezca y detrás de el tienes un formulario, se verá el formulario pero no le podrás pinchar encima de los campos porque encima hay un DIV invisible.

Con display:none deja de existir en el flujo html hasta que lo vuelves a meter, dejando de afectar a cualquier cosa que tenga alrededor.

1 respuesta

Thanat0s #30 Mar '11 Cofrade

#29 ¿La única utilidad del visibility:hidden puede ser para poner una capa encima de una imagen que no quieres que guarde la gente con click secundario? :S
¿O ni tan siquiera eso?

1 respuesta

Problema capas que no aumentan su hight

Usuarios habituales

Tags