Posicionamiento con CSS

loic_sephiroth
07 de Enero del 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!

MC
07 de Enero del 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.

MC
07 de Enero del 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>