Posicion absoluta altura 100% no responde

edudw · #1 (**permalink**) 29/03/2005, 23:10

Hola a todos.

Tengo 2 divs en una pagina " top " y " medio ". Lo que quiero es hacer que el top se vea en todo el ancho de la pagina y con altura de 90 px, para lo cual use este estilo:

.arriba{
position: absolute;
width:100%;
height:90px;
z-index: 1;
left: 0px;
top: 0px;
overflow: visible;
border : 1px solid #788DA2;
background-color : #788DA2;
right: 0px;
}

para el otro div bajo de " top " lo que quiero es que ocupe igual todo el ancho de la pagina y tambien el alto, use este estilo:

.medio {
position: absolute;
width:100%;
height:100%;
z-index: 1;
left: 0px;
top: 92px;
overflow: auto;
border : 1px solid #788DA2;
background-color : #999999;
right: 0px;

Y aaqui esta el problema, poruqe no ocupa el resto hacia abajo aunque le haya puesto: height:100%. que estoy haciendo mal?

Desde ya gracias.

PD: con los divs quiero hacer algo parecidoal fondo de esta pagina: www.edmerritt.com

kayetano · #2 (**permalink**) 30/03/2005, 05:51

Hola

Por lo general es es cosa del DOCTYPE que tienes en tu documento HTML, prueba a eliminar la primera linea de tu documento donde pone <!DOCTYPE HTML PUBLIC ...> y muy posiblemente te funcionará, tienes que tener en cuenta que la propiedad "height" no es estandar para las tablas.

Salu2
KAYETANO

kemie · #3 (**permalink**) 30/03/2005, 10:59

por favor no quites tu doctype, ya que es una parte muy importante de tu documento html, y tiene una (muy buena) razón para estar ahí.

prueba, mejor, agregar esto a tu css:

body,html{
height:100%;}

programeitor · #4 (**permalink**) 30/03/2005, 13:14

mejor aun ,dale margin:0; al body.

Por otra parte, si al de arriba le das 92px de altura, y al de abajo 100%, te van a quedar 92px de la del medio ,abajo , fuera de pantalla.
Si pudiera ser ,seria mejor dar las dimensiones en '%'

iconogt · #5 (**permalink**) 30/03/2005, 15:38

Pues de algo estoy muy seguro... no es bueno mezclar Píxeles con Porcentajes,

Mejor si vas a usar Píxeles pues usa sólo eso para tus medidas, y lo mismo con porcentajes, cm pt, etc, etc,

Es mi opinión,

Slds y buena suerte

kayetano · #6 (**permalink**) 31/03/2005, 02:37

Hola

x kemie
Esta claro que el DOCTYPE esta para algo, yo simplemente quería que se diese cuenta que quitandolo la página actua de otra forma.

Cita:

Iniciado por kemie

tiene una (muy buena) razón para estar ahí.

Yo llevo muchos años trabajando en web y no hace tanto que utilizo el DOCTYPE y no considero que sea "una muy buena razón" es una opción mas. La W3C lo recomienda para seguir la norma pero no dice que sea obligatorio.

Como ya he dicho no hace mucho que pongo el DOCTYPE en mis documentos HTML ¿Puedes explicar que utilidad tienen y porque es aconsejable ponerlo?

kemie · #7 (**permalink**) 31/03/2005, 03:35

Es tan obligatorio, que sin él no es válido un dcoumento html.
checate esta especificación:
http://www.w3.org/TR/REC-html40/struct/global.html

ahi dice:

Cita:

Un documento HTML se compone de 3 partes:

1. una linea que incluye la información de la versión de html (el doctype)
2. una sección declarativa en el encabezado (delimitada por el elemento HEAD),
3. Un cuerpo, que contiene el contenido del documento...

kayetano · #8 (**permalink**) 31/03/2005, 09:04

Hola

Lamento ser tan coñazo pero sigo sin tenerlo claro. En la dirección que das leo lo siguiente

Cita:

An HTML 4 document is composed of three parts:

Por lo que entiendo que para cumplir el HTML 4 debo incluir estas tres partes, pero existen varias versiones de HTML.

Es obligatorio para cumplir el estandar HTML 4 pero ¿que ocurre con el resto?

kemie · #9 (**permalink**) 31/03/2005, 11:40

el html 4.1 y el xhtml están basados en html 4

pero mas facil: has intentado validar un documento sin doctype?

edudw · #10 (**permalink**) 31/03/2005, 12:31

hola Kayetano, Kemie 6 Programeitor.

He seguido las indicaciones que me han dado y no resulta nada. entonces pense que tgalvez tenia algo malo que no encontraba, por lo que hice una nueva pagina, sin nada. Lo unico que queria era que tuviera un div de ancho y alto 100%, o sea que ocupe todo el espacio, este es el codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A ver si resulta</title>
<link href="/prueba.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style></head>

<body>

<div id="Layer1" style="position:absolute; visibility:visible; left:0; top:0; width:100%; height:100%; background-color:#CCCCCC; layer-background-color:#CCCCCC; border:1px none #000000; z-index:1"></div>
</body>
</html>

Y que paso?. sorpresa, respeta el ancho de 100%, pero no el alto de 100%. Es cierto que podria solucionar el asunto colocando el fondo de la pagina con el color de la tabla que no anda, pero es esa una solucion de parche, cierto? Si los divs con css tiene tanto poder de configurar un documento, poruqe esto tan sencillo no lo puedo hacer?

Desde ya gracias. Estoy confundido.

edudw · #11 (**permalink**) 31/03/2005, 12:35

Cita:

Iniciado por iconogt

Pues de algo estoy muy seguro... no es bueno mezclar Píxeles con Porcentajes,

Mejor si vas a usar Píxeles pues usa sólo eso para tus medidas, y lo mismo con porcentajes, cm pt, etc, etc,

Es mi opinión,

Slds y buena suerte

hola, en este caso debo usar pixeles y %, xq el div superior siempre debera ser 92px y el otro div q va bajo este debería ocupar el resto del documento, la logica es sencilla, pero pruebo y pruebo y me fustro y fustro

programeitor · #12 (**permalink**) 31/03/2005, 15:27

Perdon, tal vez yo no me explique bien.
es que no has puesto al body height:100% como te dijo Kemie.

html,body{height:100%;margin:0;}

frijolerou · #13 (**permalink**) 31/03/2005, 16:24

Kayetano, si no utilizas un doctype o lo utilizas de manera incorrecta ocurre lo siguiente:

Mozilla entra en Quirk Mode, es decir, actúa como lo haría Netscape 4.
Internet Explorer lo mismo también entra en Quirk Mode y actúa como lo haría IE4

Aquí tienes más información de porqué es necesario el doctype.

http://ignside.net/man/html/doctype.php

Edudw, te sirve esto??

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
    margin:0;
    padding:0;
    }
body,html{
    height:100%;
    }
#top{
    height:92px;
    background-color:yellow;
    }
#contenido{
    background:silver;
    min-height:100%;
    _height:100%;
    }
</style>
</head>
<body>
<div id="top">
top
</div>
<div id="contenido">
contenido
</div>
</body>
</html>

kayetano · #14 (**permalink**) 31/03/2005, 23:57

Hola

x frijolerou
en eso estamos de acuerdo.

x edudw
yo he probado lo del body con height a 100% y funciona correctamente. Nunca se me había ocurrido esta solución.

edudw · #15 (**permalink**) 04/04/2005, 10:41

hola a todos.

Fantastico, no sabia eso agregue ( body,html{
height:100%;} )en el inicio de mi hoja de estilos y voila, todo funciono como quería, excepto xq la barra de scroll horizontal se veía, no se xq sucedera eso ya que al usar el codigo del post de Frijolerou eso no pasa. De todos modos ya todo comienza a andar. No se si abrir otro post, pero ustedes; kemie, kayetano, programeitor, frijolerou, usan DW cuando trabajan un sitio con capas, divs, y css?

DEsde ya gracias

frijolerou · #16 (**permalink**) 04/04/2005, 12:18

nop... yo uso el Notepad Plus

kemie · #17 (**permalink**) 04/04/2005, 14:22

yo uso una combinacion de DW y topstyle.

programeitor · #18 (**permalink**) 04/04/2005, 15:22

Yo utilizo para todo, 1st Page 2000 ,programacion manual ,aun no he utilizado ningun editor avanzado ,aunque puede ser interesante para trabajos rapidos y "simples" ,supongo.

edudw · #19 (**permalink**) 05/04/2005, 09:49

hola.

Bueno, yo uso DW y tambien algo el phpexpert editor cuando lo tenía, pero ahora como he aprendido algo de las capas y css creo que seguire con DW y con topstyle u otro que sea fuerte en CSS. Mucho me habian dicho que DW dejaba cantidades de codigo de mas, pero ahora y analizando todo me doy cuenta que ese tipo de codigo de mas esta mas present en el trabajo de DW al usar tablas y celdas y no tanto con divs.

Gracias nuevamente amigos.