rubensa, algo en qué pensar

Miércoles, 15 de febrero de 2006

Menu vertical de alto completo

CSS Es habitual encontrarnos en muchos sitios páginas web que tienen un menú vertical en la izquierda, con un color de fondo ocupando el alto completo del contenido de las mismas. Esto es muy sencillo de conseguir utilizando tablas y coleres de fondo para sus columnas, pero la cosa cambia considerablemente si queremos hacerlo con DIVs y CSS unicamente.

Hasta ahora no he encontrado en ningún sitio la solución a este problema que no sea utilizando imágenes de fondo con una franja del color que nos interesa (lo cual no permite redimensionar el tamaño de la columna del menú sin tener que cambiar también la imagen de fondo de la página); así que he tenido que arreglármelas para obtenerla yo mismo.

A continuación presento un ejemplo muy sencillo de cómo conseguir un menú vertical a la izquierda de nuestra página que tenga un color de forndo que ocupe el alto completo de nuestra página, de tal modo que podamos desplazarnos con la barra de scroll vertical y no tengamos una zona al final del menú de otro color si resulta que el alto del contenido de la página es mayor que el alto del contenido del menú. Todo esto, por supuesto, funcionando tanto para IE como para Firefox (dos de los navegadores más utilizados hoy en día).

Pasemos entonces a ver el código de la página XHTML:

<?xml version="1.0" encoding="iso-8859-1"?>

<!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" xml:lang="es" >

<head>

<link href="css/estilos.css" rel="stylesheet" type="text/css"/>

</head>

<body>

	<div id="left_background"></div>

	<div id="header">

		Cabecera

	</div>

	<div id="content">

		<div id="left">

			Menu izquierdo

		</div>

		Cuerpo

		<br/><br/><br/><br/>

		<br/><br/><br/><br/>

		<br/><br/><br/><br/>

		<br/><br/><br/><br/>

		<br/><br/><br/><br/>

	</div>

</body>

</html>

Y de su hoja de estilo asociada:

html, body {

	height: 100%;

body {

	margin: 0px 0px 0px 0px;

	padding: 0px 0px 0px 0px;

	font-size: 16px;

#header {

	position: relative;

	width: 100%;

	height: 50px;

	vertical-align: bottom;

	background-color: #0000ff;

	z-index: 200;

#content {

	position: relative;

	height: 100%;

	z-index: 200;

#left {

	float: left;

	width: 8.6em;

	height: 100%;

	background-color: #ff0000;

#left_background {

	display: inline;

	position: fixed;

	left: 0px;

	width: 8.6em;

	height: 100%;

	background-color: #ff0000;

	z-index: 100;

* html #left_background {

	position:absolute;

Con lo cual obtendremos nuestro objetivo:

Ejemplo funcionando en Firefox e IE

Ahora una pequeña explicación de la solución.

Para que la solución funcione en ambos navegadores, necesitamos dos aproximaciones diferentes, una para IE y otra para Firefox.

Para Firefox lo que haremos será utilizar una capa con el color de fondo del menú que se situará detrás del contenido de dicho menú y que se irá desplazando a medida que se desplaze el scroll vertical. Para lograr esto, tenemos que fijar el alto de los elementos html y body y #left_background a "100%" con lo que conseguimos que los mismos tomen el alto del "viewport" (zona de visionado de la página) y con el posicionamiento "fixed" conseguimos que el #left_background se desplace a la vez que el scroll (queda fijo en la posición 0,0 del "viewport"). Ahora el problema está en que esta capa quede por detrás del resto de capas, para lo cual utilizamos el elemenento "z-index", pero tenemos que añadir al resto de capas el posicionamiento "relative" para que los z-index funcionen con el de una capa "fixed".

Para IE, en cambio, no podemos utilizar posicionamiento "fixed" ya que no funciona. Lo primero que hay que hacer por tanto, es evitar que nos moleste la capa utlizada para Firefox, lo que conseguimos utilizando:

* html #left_background {

	position:absolute;

que hace que se posicione de modo "absolute" unicamente en IE (aprovechando un mal uso de CSS en IE ^_^

). Lo que haremos en IE es fijar el alto del menú al "100%" que no hará como en el caso del Firefox, que toma el alto del "viewport", sino que tomará el alto de la capa "content" ya que esta tendrá el tamaño de su contenido si es que no entra en el "viewport".

Por: Rubén Suárez Alvarez | HTML/CSS | Comentarios (0) | Referencias (0)

Comentarios

Comentar

Referencia

URL para referencias o trackbacks

Acerca de

"El trabajo tiene un peso específico dentro de la empresa. A más trabajo, más peso y por tanto más abajo estás. A menor trabajo más ligero te vuelves y más asciendes. ¿Y tú, trabajas o asciendes en tu empresa?"

rubensa