Foros del Web » Creando para Internet » CSS »

Posicion absoluta altura 100% no responde

Estas en el tema de Posicion absoluta altura 100% no responde en el foro de CSS en Foros del Web. Hola a todos. Tengo 2 divs en una pagina " top " y " medio ". Lo que quiero es hacer que el top se ...
  #1 (permalink)  
Antiguo 29/03/2005, 23:10
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
Posicion absoluta altura 100% no responde

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
  #2 (permalink)  
Antiguo 30/03/2005, 05:51
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
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
  #3 (permalink)  
Antiguo 30/03/2005, 10:59
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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%;}
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #4 (permalink)  
Antiguo 30/03/2005, 13:14
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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 '%'
  #5 (permalink)  
Antiguo 30/03/2005, 15:38
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Hola a todos,

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
__________________
_______
Jorge Rojas.
  #6 (permalink)  
Antiguo 31/03/2005, 02:37
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
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?
__________________
Salu2
KAYETANO

Última edición por kayetano; 31/03/2005 a las 02:46
  #7 (permalink)  
Antiguo 31/03/2005, 03:35
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
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...
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #8 (permalink)  
Antiguo 31/03/2005, 09:04
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
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?
__________________
Salu2
KAYETANO
  #9 (permalink)  
Antiguo 31/03/2005, 11:40
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
el html 4.1 y el xhtml están basados en html 4

pero mas facil: has intentado validar un documento sin doctype?
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #10 (permalink)  
Antiguo 31/03/2005, 12:31
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</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.
  #11 (permalink)  
Antiguo 31/03/2005, 12:35
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #12 (permalink)  
Antiguo 31/03/2005, 15:27
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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;}


Última edición por programeitor; 31/03/2005 a las 15:59
  #13 (permalink)  
Antiguo 31/03/2005, 16:24
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
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> 
__________________
El conocimiento es libre: Movimiento por la Devolución

Última edición por frijolerou; 31/03/2005 a las 16:41
  #14 (permalink)  
Antiguo 31/03/2005, 23:57
 
Fecha de Ingreso: marzo-2005
Mensajes: 74
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
Salu2
KAYETANO
  #15 (permalink)  
Antiguo 04/04/2005, 11:41
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #16 (permalink)  
Antiguo 04/04/2005, 13:18
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
nop... yo uso el Notepad Plus
__________________
El conocimiento es libre: Movimiento por la Devolución
  #17 (permalink)  
Antiguo 04/04/2005, 15:22
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
yo uso una combinacion de DW y topstyle.
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #18 (permalink)  
Antiguo 04/04/2005, 16:22
Avatar de programeitor  
Fecha de Ingreso: febrero-2005
Mensajes: 994
Antigüedad: 12 años, 10 meses
Puntos: 9
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.
  #19 (permalink)  
Antiguo 05/04/2005, 10:49
 
Fecha de Ingreso: abril-2004
Mensajes: 634
Antigüedad: 13 años, 7 meses
Puntos: 2
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.
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 22:40.