Unidad 18. Diseño de página. Maquetación web (V)

Utilizando este posicionamiento, obtenemos gran flexibilidad para maquetar nuestra página. Por ejemplo, podemos dividir la página en dos (o más) columnas. Utilizaremos dos capas, con un alto al 100%, y que la suma de sus anchos sea el total de la página. Por ejemplo:

div#columna_izquierda {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 50%;
	}
div#columna_derecha {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: 50%;
	}

Esto originaría dos columnas, cada una con un ancho de la mitad del de la página (o del elemento que las contenga).

Si queremos obtener dos columnas, una con un ancho fijo y la otra con lo que sobre, lo haremos de otra forma. Por ejemplo, si la columna de la izquierda la queremos con un ancho fijo, por ejemplo de 200px, lo que haremos será asignar a la columna de la derecha una distancia con el lado izquierdo de esos 200px, y con el lado derecho de 0, en vez de indicar el ancho.

div#columna_izquierda {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 200px;
	}
div#columna_derecha {
		position: absolute;
		right: 0;
		left: 200px;
		top: 0;
		height: 100%;
	}

Hay que decir que esto no funciona correctamente en Internet Explorer 6, que no interpreta correctamente el ancho del elemento si definimos la posición de los dos lados, en vez de un lado y el ancho.

No obstante, como veremos, para obtener una columna fija, y la otra líquida, es mejor hacerlas flotantes.

Podemos conseguir un efecto muy interesante controlando el desbordamiento de las columnas. Podemos dejar una columna fija, por ejemplo con un menú, y otra que muestre el contenido, a la que damos la propiedad overflow: auto;. Esto hará que nos podamos desplazar por el contenido de la página manteniendo el menú siempre visible. Como por defecto, Internet Explorer siempre muestra la barra de desplazamiento en la etiqueta html, queda mejor si lo quitamos html {overflow:hidden;}.

Recuerda que podemos anidar las capas. Por ejemplo, podríamos subdividir una de las capas en otras dos dentro de ella, utilizando el mismo sistema.

Puedes ver un ejemplo de página maquetada con posicionamiento absoluto aquí.

Otro elemento muy utilizado en la maquetación, es el encabezado y el pie. Observa que en los ejemplos que hemos visto, colocábamos las capas en la parte superior del todo (top: 0;). Si queremos utilizar un encabezado, en vez de comenzar arriba del todo, debemos de dejar una separación igual al alto del encabezado. Si el alto del encabezado lo indicamos en porcentajes, el alto de las columnas deberá de ser del 100% - el alto del encabezado. En vez de eso, resulta más claro si en vez del alto de las columnas, indicamos la parte superior (top) y la inferior (bottom). En este caso, nos dará igual la medida que utilicemos. Como mejor lo veremos será con un ejemplo:

   div#encabezado {
     position: absolute;
     top:0; left: 0;
	    height:10%;
     width:100%;
     background-color:RoyalBlue;
    }
   div#columna_izquierda {
     position: absolute;
     top:10%; left: 0;
	    height: 90%;
     width:20%;
     background-color:SandyBrown;
    }
   div#columna_derecha {
     position: absolute;
     top:10%; right: 0;
	    bottom: 0;
     width: 80%;
     background-color:LightGreen;
    }
 

Los principales inconvenientes del posicionamiento absoluto es que hemos de definir el tamaño del elemento, no se ajusta al contenido, y no se crean huecos en la página, por eso no podemos utilizarlo para cualquier cosa.

 Cursos Informática Gratuitos