por qué no me funciona el 'top'? (y ya he dado mil vueltas)

elignorante · #1 (**permalink**) 22/04/2010, 05:46

necesito centrar una capa verticalmente, con vertical-align no funciona supongo que porque no es texto y no le puedo dar un line-height... no se, soy autodidacta y hay cosas que se me escapan.
Intento hacer lo del posicionamiento negativo, dando un top del 50% y un margin-top de menos_la_mitad de la altura de la capa, pero el top no me funciona. he probado usando todos los displays posibles y con algunas position (las otras me lo descolocan todo) y nada. la propiedad top como si estuviera muerta.

dejo el código a ver si me podeis decir qué hago mal... porque llevo dos días y ya me vuelve loco, ya no es una cuestión de estilo, sino personal, espero que podais ayudarme.

lo que intento es centrar verticalmente la capa 'marco'

html:
<body>
<div id="contenedor">
<div id="cabeza">
<div id="presentacion"> <h1 class="textright">xxxxxx</h1> <h2 class="textright">yyyyyy</h2> </div>
<div id="contacto"> <h3>@ contacto</h3> </div>
</div>
<div id="expositor">
<center><div id="marco" > <img src="PRESENTACION355.jpg"></div></center>
</div>
<div id="pie"> </div>
</div>

css:
body{background-color:#112233;}
h1 {color:#999999; font:34px Andalus; margin:0;}
h2 {color:#555555; font:14px Andalus; line-height:0;margin:0;}
h3 {color:#999999; font:24px Andalus; margin-top:25px;}

.textright {text-align:right;}

#contenedor{ top:50%; width:100%; height:515px; border:10px red; }

#cabeza{ background-color:#111111; width:100%; height:80px; }

#presentacion { position:absolute; width:175px; height:80px; margin-left:5%; }

#contacto { height:80px; width:175px; float:right; }

#expositor{ height:455px; width:100%; background-color:#000000; }

#marco { overflow:visible; top:50%;}

#pie{ background-color:#111111; height:80px; margin:-80px 0 0 0; padding-top:15px;}

he probado dando propiedades a la capa 'marco' y a la capa 'expositor' (la que contiene el marco) y nada. no hay manera de hacer que funcione el top. y además, si en la capa 'marco' le pongo un margen negativo, se me sube toda la capa 'expositor' y me cubre la cabecera... ¿por qué?

¿qué hago mal? igual es una tontería que no he visto, o que no comprendo... pero es que ya no se dónde mirar...

Se agradece la ayuda, se agradece mucho....

Tecna · #2 (**permalink**) 22/04/2010, 08:03

Buenas,

las propiedades top, left, right y bottom sólo funcionan si se posiciona el elemento con la propiedad position, si el elemento no está posicionado ocupa el lugar que le corresponde dentro del flujo normal del documento y por lo tanto no se le puede indicar una posición.

elignorante · #3 (**permalink**) 22/04/2010, 08:12

lo he probado con position:relative y con position:static.

Con position absolute es verdad que funciona, pero se me descoloca todo.

¿la propiedad top sólo funciona con position:absolute?

si es así... ¿cómo podría centrar verticalmente una capa con positions relatives?

gracies por la respuesta tecna

Tecna · #4 (**permalink**) 22/04/2010, 09:05

Buenas,

las propiedades para posicionar elementos funcionan con cualquier valor de la propiedad position pero la ubicación del elemento respecto al lienzo del documento que sería el marco de la ventana y su comportamiento (al cambiar el tamaño de la ventana, hacer scroll o en distintas resoluciones) es diferente. Por ejemplo con absolute si es el primer elemento posicionado así lo hará respecto a la esquina superior izquierda de la ventana pero si hay mas lo hará repecto al último y siempre se saca del flujo normal del documento. Con relative no se saca del flujo del documento y se calcula su posición respecto a la que debería ocupar si no se hubiera posicionado relativamente. Es bastante complejo para explicarlo en dos palabras, busca algo sobre posicionamiento.

Por otro lado centrar verticalmente es bastante más dificil que horizontamente, hay varias técnicas para ello pero siempre depende del tamaño del elemento, si el height del elemento a centrar es variable o desconocido como en tu caso no se puede hacer con css, habría que calcularlo. Si pones top 50% o el elemento a centrar tiene un height de 0% o no quedaría centrado. Y para centrarlo horizontalmente no uses la etiqueta center, se recomienda hacerlo con css margin: 0 auto

jomaruro · #5 (**permalink**) 22/04/2010, 14:53

Hola:

Prueba con este ejemlo.

Saludos.

elignorante · #6 (**permalink**) 22/04/2010, 18:15

lo de las positions más o menos lo entiendo (sólo más o menos) pero pensaba que ya venía de serie (como quien dice) el relative... he visto que no, que 'de serie' le viene el static.

lo de la etiqueta <center> es verdad, se desaconseja el uso, pero es la única manera de hacerlo que he encontrado ya que la capa a centrar no tiene un ancho específico (un width), y entonces no le puedo dar un margen automatico con margin:0 auto; porque no tiene una referencia izq y drch a las que dar un margen... pienso yo... el caso es que lo he intentado y nada (si se puede porfavor decidme como)

El caso raro es que, con position:relative, le puedo dar un top medido en pixeles, pero no con porcentaje que es el que necesito... ¿por qué?

elignorante · #7 (**permalink**) 22/04/2010, 18:23

jomaruro perdona, no había leido tu respuesta, estoy mirando el enlace, voy a probar y comento.

elignorante · #8 (**permalink**) 22/04/2010, 19:29

Como lo que yo quería era justo lo que jomaruro pone en el enlace (muchas gracias jomaruro) lo que he hecho es rehacer todo desde el código fuente de la pgn del enlace. y no se que estaba haciendo mal pero ahora me funciona.

el problema era que no me funcionaban los valores de porcentaje en el top (un top al 50% era igual a nada) entonces no podía centrar nada ni horizontal ni verticalmente. cuando intentaba imitar el código de la pgn del enlace me seguía pasando lo mismo, incluso con cortapegas!.
al final he cogido el código entero de la del enlace y he vuelto a estructurar mi página desde él. cortapega del html cortapega del css y luego ya a meter mis capas, pero anidadas en estas.
Y no se porqué funciona. ahora ya me cogen los valores top con porcentajes. antes sólo valína píxeles...

¡Muchas muchas gracias!

¡problema resuelto!

pero sigo intrigado ¿por qué no me funcionaban los porcentajes en el top? ya conseguir una respuesta a eso sería la repera... pero vaya, a lo práctico que es lo que cuenta, problema más que resuelto.

P.D.: ¿cómo hago para editar el título del hilo? ... así pongo eso de 'problema resuelto'