Este es un ejemplo de página de dos columnas. Una aquí, en la izquierda, en la que se puede colocar el menú, algo que queramos destacar, listas de cosas, etc.

Puedes ver el código HTML seleccionando Ver código fuente de la página en el Navegador

Puedes ver La hoja de estilos CSS pinchando aquí

css

Página de dos columnas

Aquí, en la parte derecha, podemos poner el contenido principal: fotos, texto, etc.

Lo que hacemos es crear un contenedor general ("contenedor"), dentro del que colocaremos otros tres: la cabecera, el cuerpo y el pie.
"Al cuerpo" (aquí lo he llamado centro), le colocamos dentro dos contenedores de diferentes tamaños, uno a la izquierda (izG), y otro a la derecha (deG).

Una vez hecho esto, creamos "clases" para darle estilo a lo que vayamos a poner en la cabecera, el pie y a ambos lados del contenedor central. Como veréis en la hoja de estilos, le he dado unas instrucciones al contenedor de texto, tanto para la derecha como para la izquierda, así como a lo que va dentro del "pie".
Para no liarme y poner diferentes nombres a los contenedores de texto, lo que he hecho es lo siguiente:

#deG .txt { propiedades: valores;}
#izG .txt { propiedades: valores;}

El primer ".txt", al encadenarlo (anidarlo) a "#deG", le doy los valores que quiero para la derecha y sólo los muestra cuando el "div" que contiene la clase ".txt" está dentro de #deG.
Con el segundo ".txt" sucede los mismo, pues le indicamos que esas instrucciones son sólo para cuando el "div" que contiene ".txt" está dentro de #izG.

El menú está basado en una idea original de Stu Nicholls y es un poco complicado. De todas formas, en la sección "menús > desplegables", está el menú comentado.

Espacio web desarrollado por Antonio Payán

© 2010 antonio payán

Free Web Hosting