Diseño de columnas con CSS

Transcripción

1 Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute y margin float en distintas variantes Veamos las dos variantes.

2 Columnas con position:absolute Se basa en la idea de asignar a un div un gran margin y colocar otro div dentro de dicho margin con ayuda del posicionamiento absoluto

3 Columnas con position:absolute Así, tenemos dos secciones div #areatexto y #navegacion: #areatexto tiene un gran margen izquierdo #navegacion se coloca dentro del margen La anchura del margen se puede indicar perfectamente en px, % o em. Así mismo, añadir una tercera columna es fácil: basta con asignar otro margen exterior a la derecha de #areatexto, en el que se colocará una tercera sección con posicionamiento absoluto

4 Columnas con position:absolute El posicionamiento absoluto para crear columnas es estable, fácil de comprender y solo presenta dos inconvenientes: 1) Si el diseño debe tener un encabezado que abarque todas las columnas, resulta difícil determinar el punto de partida superior (top) para navegación. Una solución es determinar una altura fija para el encabezado.

5 Columnas con position:absolute 2) No es posible dejar que una línea de pie abarque toda la anchura de la página debajo de las columnas, porque los elementos con posición absoluta no se pueden limpiar (clear), al contrario que los elementos flotantes. Si la columna de navegación es más larga que el área de texto, ésta fluirá encima de la línea de pie Veamos una imagen que lo ilustre...

6 Columnas con position:absolute

7 Columnas con position:absolute Los dos inconvenientes no siempre son problemáticos. Si en el diseño deseado no molesta que el encabezado tenga una altura fija y si la línea de pie no tiene que abarcar toda la anchura, sino que puede colocarse en la parte inferior de #areatexto, por ejemplo, el posicionamiento absoluto no presenta ningún inconveniente.

8 Columnas con float y margin Float no solo permite hacer que floten las imágenes, sino secciones div completas. A continuación crearemos un diseño sencillo de dos columnas con una navegación vertical en el lado izquierdo de la página. El proceso consta de seis pasos: 1) Flotación de la navegación 2) Atribución de un gran margen izquierdo a #areatexto 3) Preparación de la lista no ordenada 4) Formato de los vinculos de la lista 5) Resaltado del punto de navegación actual 6) Color de fondo para la navegación

9 Columnas con float y margin Antes de empezar, debemos dejar claro un aspecto importante: Cuando se utilice float, siempre se debe declarar la anchura con width En caso contrario, el comportamiento del navegador puede ser impredecible. Esto es particularmente importante en el caso de posicionar secciones div con float.

10 Columnas con float y margin Paso 1 Para crear las dos columnas recurriremos a un pequeño truco, parecido al que hemos usado con el posicionamiento absoluto: En primer lugar, #navegacion se coloca a la izquierda con float:left Después, se asigna a #areatexto un margen izquierdo Puesto que el margin izquierdo del área de texto se coloca debajo de la navegación flotante, parece como si ambas secciones estuvieran una junto a la otra

11 Columnas con float y margin Paso 1 En tu pagcodigo.css elimina todas las declaraciones existentes relativas a #navegacion, manteniendo los selectores: #navegacion { float:left; width: 130px; padding-left: 10px; padding-top: 20px;

12 Columnas con float y margin Paso 1 En tu pagcodigo.css elimina todas las declaraciones existentes relativas a #navegacion, manteniendo los selectores: #navegacion ul { #navegacion li { list-style:none;

13 Columnas con float y margin Paso 1 En tu pagcodigo.css elimina todas las declaraciones existentes relativas a #navegacion, manteniendo los selectores: #navegacion a { #navegacion a:hover, #inicio, #navi01 a, #pagcontacto #navi02 a {

14 Columnas con float y margin Paso 1 La navegación ya está colocada en vertical en el margen izquierdo, pero el área de texto la rodea en lugar de mostrarse en una columna separada. Bien, vamos al paso 2...

15 Columnas con float y margin Paso 2 El siguiente paso, supone asignar al área de texto un gran margen exterior izquierdo, y acolchar ligeramente el encabezado: 1) Asigna un margin izquierdo al área de texto: #areatexto { padding: 20 px; padding-right: 10 px; margin-left: 130px;

16 Columnas con float y margin Paso 2 El siguiente paso, supone asignar al área de texto un gran margen exterior izquierdo, y acolchar ligeramente el encabezado: 2) Amplía el padding-bottom del encabezado: #encabezado {... padding: 10px 20px;

17 Columnas con float y margin Paso 3 Vamos a preparar las propiedades de la lista: #navegacion ul { color: black; widht: 80px; padding-left: 10px; margin-left: 0;

18 Columnas con float y margin Paso 3 Vamos a preparar las propiedades de la lista: #navegacion li { list-style: none; border-left: 1px solid #d90000; border-bottom: 1px solid #d90000; margin: 0;

19 Columnas con float y margin Paso 3 Vamos a preparar las propiedades de la lista: /* línea de borde encima de inicio */ #navegacion #navi01 { border-top: 1px solid #d90000;

20 Columnas con float y margin Paso 4 Vamos a dar formato a los vínculos: #navegacion a { display: block; /*toda la superficie clickable*/ text-decoration: none; color: black; padding: 4px border-left: 3px solid white; /*invisible*/

21 Columnas con float y margin Paso 5 Vamos a resaltar el punto de navegación: #navegacion a:hover, #inicio, #navi01 a, #pagcontacto #navi02 a { color: black; background-color: white; border-left: 3px solid #d90000;

22 Columnas con float y margin Paso 6 Antes de seguir, es importante señalar que la columna de navegación no es realmente una columna, puesto que su altura viene determinada por su contenido. Asignemos otro color de fondo a #navegacion para que salte a la vista. Para dejarlo claro: La única forma segura de colorear toda la columna hasta el pie es utilizar una imagen de fondo Asignaremos dicha imagen a un elemento que llegue hasta el pie, por ejemplo, #wrapper

23 Columnas con float y margin Paso 6 Usaremos como fondo para #wrapper la imagen ubicada en la siguiente url: eboxes/master/navi_bg_solid.jpg Para que el pie de la página no adquiera color, deberemos asignarle explícitamente blanco como color de fondo

24 Columnas con float y margin Paso 6 Completando #wrapper #wrapper { color: black; background-color: white; background-image: url(navi_bg_solid.jpg); background-repeat: repeat-y; background-position: top left; widht: 720px; min-widht: 600 px; margin: 10px auto;

25 Columnas con float y margin Paso 6 Recuperando el fondo blanco de #pie #pie { color: black; background-color: white;... Ya tenemos listo nuestro diseño a dos columnas basado en float y margin.