HTML en castellano. Foros de debate. HTML html xhtml

Privacidad: Recuerde que la información escrita en los foros de programación es 100% pública y que su ip será registrada asociada a su mensaje. Si encuentra un mensaje fuera de lugar, por favor, notifiquelo para su revisión y eliminación.

Enviado por loic_sephiroth el día 4 de enero de 2006

Hola holita,

tengo un pequeño problema a la hora de colocar elementos de una página en la posición que deseo, a través de CSS.

Concretamente tengo tres elementos en la página:
- Un div que contiene un menú desplegable dinámicamente (por javascript) de 20 píxeles de altura.
- Un div con el contenido de la página
- Un div con un barra de utilidades varias, también de 20 píxeles de altura.

O lo que es lo mismo:

[code]
<html>
<head>

</head>

<body>
<div class="menu"> </div>
<div class="contenido"> </div>
<div class="taskbar"> </div>
</body>

</html>
[/code]
Bien, partiendo de esa situación, lo que quiero es que el menú, que es una barra horizontal de 20 píxeles de altura que ocupa todo el ancho de la pantalla, esté situado arriba del todo; que la barra de utilidades esté abajo del todo, sea cual sea la resolución de pantalla del usuario; que la altura del contenido sea lo que quede de espacio entre el menú y la barra de utilidades.
Puedo situar tanto el menú como el contenido con posicionamiento absoluto o fijado en CSS, pero lo que no sé es cómo darle el tamaño adecuado al contenido, y darle las coordenadas de posición a la barra de utilidades, sin salirme del CSS.

Hay alguna forma de hacer con CSS lo que quiero? Y si no es posible, cómo podría averiguar la resolución de la pantalla del usuario? O mejor todavía, el espacio que tiene disponible para poner elementos en una sola pantalla? (ya sea con Javascript o con ASP.Net por código)

He probado en CSS con los margin-bottom y margin-top, pero sólo consigo cosas raras.

Un saludito y gracias por adelantado!

Responder

Re: Posicionamiento con CSS

Enviado por MC el día 5 de enero de 2006

Te falta posicionar las capas:

1) position-left: mide en píxeles la distancia entre el borde izquierdo de la pantalla y el borde del elemento.

2) position-right: mide en píxeles la distancia entre el borde derecho de la pantalla y el borde del elemento.

position-top: mide en píxeles la distancia entre el borde superior de la pantalla y el borde del elemento.

position-bottom: mide en píxeles la distancia entre el borde inferior de la pantalla y el borde del elemento.

Responder

Re: Re: Posicionamiento con CSS

Enviado por MC el día 5 de enero de 2006

Para saber el ancho y largo de la pantalla:

<script language="javascript">
if((screen.width=800)&&(screen.height=600)){
window.alert("resolución:800*600);
}else if ((screen.width=1024)&&(screen.height=768)){
window.alert("resolución:1024*768);

}else{
window.alert("otra resolución"+screen.width+screen.height);
}

</script>

Responder

Re: Re: Re: Posicionamiento con CSS

Enviado por loic_sephiroth el día 6 de enero de 2006

Muchísimas gracias por vuestras respuestas!

Responder

Re: Re: Re: Re: Posicionamiento con CSS

Enviado por loic_sephiroth el día 7 de enero de 2006

La propiedad CSS position-bottom (y similares) no existe en el estandar CSS(ni en ningún otro lado que yo conozca). Pero he descubierto por fín, qué es lo que había que hacer:
Para el menú, un posicionamiento normal fijo, basta: position:fixed; top:0px;left:0px;height:20px;
Para la barra de abajo, hay que usar la propiedad bottom: position:fixed;bottom:0px;left:0px;height:20px;
Y para el contenido, hay que usar tanto la propiedad bottom como la propiedad top: position:fixed;bottom:20px;top:20px;left:0px;

Un saludo, y espero que esto ayude a alguien.

Gracias de todas formas a los que me han respondido.

Responder