diseño de columnas con css - certificado de …html.formacionatomica.com/assets/recursos/columnas...

Diseño de columnas con CSS

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.


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



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



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.



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...



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.


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ón2) Atribución de un gran margen izquierdo a #areatexto3) Preparación de la lista no ordenada4) Formato de los vinculos de la lista5) Resaltado del punto de navegación actual6) Color de fondo para la navegación


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.


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



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;}




#navegacion ul {}#navegacion li {list-style:none;}




#navegacion a {}#navegacion a:hover,#inicio, #navi01 a,#pagcontacto #navi02 a {}



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 ...



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;}



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;}



Vamos a preparar las propiedades de la lista:

#navegacion ul {color: black;widht: 80px;padding-left: 10px;margin-left: 0;}




#navegacion li {list-style: none;border-left: 1px solid #d90000;border-bottom: 1px solid #d90000;margin: 0;}




/* línea de borde encima de “inicio”*/#navegacion #navi01 {border-top: 1px solid #d90000;}



Vamos a dar formato a los vínculos:

#navegacion a {display: block; /*toda la superficie clickable*/text-decoration: none;color: black;padding: 4pxborder-left: 3px solid white; /*invisible*/}



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;}



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



Usaremos como fondo para #wrapper la imagen ubicada en la siguiente url:

https://raw.githubusercontent.com/ChristinaGaitan/Littleboxes/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



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;}



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.

diseño de columnas con css - certificado de …html.formacionatomica.com/assets/recursos/columnas...

Documents