comparte el articulo 

Layouts con XHTML y CSS: Parte 2

Actualizado el 28/12/2011 < > 0 Comentarios

Resumen: Complementamos la información relacionada a los layouts con XHTML y CSS. Estudiamos los distintos tipos de posicionamiento y estructuramos un layout sencillo.

En la primera parte de este artículo sobre layouts en HTML y CSS, estuvimos estudiando conceptos básicos relacionados a la estructuración de una página, en esta ocasión utilizaremos el tema del posicionamiento como punto de partida para seguir desglosando el tema de los layouts.

Las cajas pueden se posicionadas en una página en diferentes partes y de distintas maneras, podemos utilizar un posicionamiento estático, relativo, absoluto o incluso una posición arreglada, todo a través de la propiedad “position” de CSS.

Posición estática

Por default todos los elementos de un documento XHTML tienen una posición estática, esto quiere decir que siguen el flujo normal de la página y el lugar que tomen en el código será el mismo donde se presentarán en la interfaz. Con esto se da entender que si existen otros elementos de tipo estático en el documento, aparte del elemento que queremos posicionar, estos se presentarán visualmente antes o después según su lugar en la estructura.

Posición relativa

La posición relativa es aquella que permite a la caja moverse en base a su posición inicial, dejando un espacio vacío en su posición original. Cuando una caja es posicionada relativamente, podemos especificar valores para indicar las distancias a las que recorreremos la caja, tanto horizontal como verticalmente, y para ello se utilizan las propiedades “top”, “right”, “bottom” y “left”.

Si quisiéramos mover una caja 10 píxeles a la derecha de donde se encontraba normalmente, entonces podemos utilizar una sentencia que indique la posición relativa y una distancia de 10 píxeles en su propiedad “left” para que recorra el inicio de su lado izquierdo, por irónico que parezca esto hará que la caja luzca más a la derecha ya que la distancia se recorrerá relativamente a partir del inicio de la caja.

h2{
position: relative;
left: 10px;
}

Si quisiéramos recorrer una caja a la izquierda con la misma propiedad “left”, entonces tendríamos que hacer uso de valores negativos, o simplemente utilizar la propiedad “right”.

Posición absoluta

La posición absoluta coloca una caja en base a la posición de su bloque contenedor. Dicho contenedor generalmente es la misma página, al menos de que la caja se encuentre depositada dentro de otro bloque relativo o absoluto, lo que haría que la distancia se calcule a partir de la posición de su contenedor.

Al igual que con la posición relativa podemos hacer uso de las propiedades “top”, “right”, “bottom” y “left”. Las cajas que posicionemos de manera absoluta serán sacadas del flujo normal de la página, por lo que existirán independientemente del resto del contenido.

h2{
position:absolute;
top: 100px;
left: 50px;
}

Posición fixed

Las cajas posicionadas de manera “fixed” son similares a las de posición absoluta, con la diferencia de que estás se encuentran fijadas a la vista. Es decir, una caja con posición “fixed” no se moverá con el resto de la interfaz, se mantendrá en una sola posición sin ser alterada y lucirá fija en la ventana del navegador.

Este tipo de posición puede ser útil para incluir algún tipo de mensaje o publicidad que necesite ser visible todo el tiempo, la única desventaja de su uso es que algunos navegadores antiguos como Internet Explorer 6 no las soportan, por lo que puede causar problemas en la interfaz.

Propiedad float CSS

El uso de la propiedad “float” es otro método para poder lograr posicionar cajas y manipularlas a lo largo de la interfaz. Una caja flotante básicamente es aquella que se coloca en el extremo izquierdo o derecho de la página y/o su contenedor, haciendo que el contenido la rodee en vez de que fluya por debajo de ella, anulando a la vez cualquier ajuste que se haya hecho mediante la propiedad “display”.

En caso de que desees que algún contenido que siga a la caja flotante se muestre debajo de esta y no a su alrededor, entonces debes de utilizar la propiedad “clear”, si le damos el valor de “left” entonces despejará las cajas flotantes a la izquierda de tal manera que el contenido se pueda mostrar, mientras que el valor “right” hará lo mismo con las cajas flotantes a la derecha.

Creación de columnas con CSS y HTML

Para poner en práctica los conceptos que hemos estudiado hasta ahora podemos empezar a crear una estructura sencilla, las columnas son adecuadas para hacer uso de ellos.

En primer lugar tenemos que tener un documento bien estructurado, debemos utilizar la etiqueta “div”, la cual fue diseñada específicamente para dividir grandes bloques de contenido y es generalmente la mejor opción para la definición de partes importantes.

<div id="menuNav">
<!--Contenido para la navegación-->
</div>
<div id=”contenido”>
<!--Contenido de la página (texto, impagenes, etc.)-->
</div>

Una vez organizada nuestra estructura, supongamos que queremos que la columna de navegación sea menos ancha que la de contenido, entonces necesitaríamos emplear la propiedad “width” para ello. Si queremos alinear y mover dicha columna a la izquierda tenemos que darle una posición absoluta y una distancia de 0 a la izquierda, lo que nos da una declaración como la siguiente:

#menuNav{ position:absolute; left: 0; width 20px; }

Una vez posicionado el menú de navegación la estructura empieza a tomar forma, para sacar a la vista el contenido tenemos varias alternativas, la más sencilla sería simplemente establecer un margen al div de contenido, para empujarlo más allá de la anchura de la zona de navegación.

#contenido {
margin-left: 25px;
}

Para resaltar más la diferencia entre las dos columnas se pueden utilizar bordes y colores de fondo mediante las propiedades “border” y “background”.

Columna flotante con CSS

Como alternativa al modelo anterior podemos utilizar una columna que se encuentre flotando a la derecha del sitio, esto se puede lograr mediante una sentencia como la siguiente:

#menuNav {
left: 0;
width: 20px;
}
#contenido {
float: right;
}

Estructurando el encabezado y pie de página

Para dar un toque final a la estructura podemos agregar una sección de encabezado y un pie de página, comúnmente conocidos como “header” y “footer”. Para esto necesitaremos dos nuevas cajas, pero la principal edición se realizará sobre las columnas ya existentes.

Para tener un “header” basta con asegurarnos que todas las cajas con posición absoluta se encuentren explícitamente abajo del “div” encabezado. Si el encabezado tendrá una altura de 100 píxeles basta con darle una distancia “top” igual o superior a esa medida para asegurar que las columnas se mostrarán por debajo de esta sección.

Por su parte agregar un footer es un poco más engañoso, necesitamos establecer una propiedad “clear” al div que establecerá la sección de pie de página para asegurar que ninguna capa se sobrepondrá. El hecho que las cajas posicionadas de manera absoluta sean sacadas del flujo normal de la página, causa que sea imposible predecir donde terminarán, por lo tanto para esta opción se puede optar por columnas flotantes y simplemente añadir la propiedad “clear” al pie de página.

#menuNav {
width: 10px;
background: #CCCCCC;
float: left;
}
#contenido {
margin-left: 10em;
}
#pie {
clear: both;
}

Publicado el 28/12/2011, última actualización 28/12/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras