Aprende Web
Crea y diseña tus sitios en la Web.
Manual de CSS
CSS: lenguaje de estilo para las páginas web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 87
Visitas el mes pasado: 151
WEB-GRAFÍA
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
- Desarrollo Web: manual de CSS
- Desarrollo Web, por Miguel Angel Álvarez
- Cómo crear tu Web: curso de estilos CSS
- ComoCrearTuWeb, Por Georgens
- Libros Web: introducción a CSS
- Libros web, por Javier Eguíluz Pérez
- Curso de css: Programación Web
- www.programacionweb.net
- WebEstilo: manual de css
- www.webestilo.com
- W3 schools; CSS Tutorial
- www.w3schools.com
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
10. Trucos CSS (II)
10.2 Columnas iguales.
Introducción
Uno de los problemas más habituales con los que se enfrentan los diseñadores al crear una página dividida en columnas es el de igualar la altura de todas ellas. Normalmente se indica el ancho de la columna, y el alto lo suele dar el contenido. Al acabar el contenido se acaba la columna, con lo que en algunas columnas queda un hueco debajo. Esto si las columnas llevan un color de fondo no queda bien, ya que se ve que una acaba antes que otra.
Con el diseño mediante tablas no ocurre este problema, ya que al ocupar cada columna una celda, éstas son siempre de la misma altura. Sin embargo el diseño de tablas es poco recomendable, y la gran mayoría de diseñadores no lo usan.
Hay varias soluciones para este problema, usando el código CSS. las cuales se verán a continuación:
En todas las soluciones propuestas partimos de un ejemplo de página con cabecera, pie de página y tres columnas creadas mediante "divs". El código HTML de la página es el siguiente:
<html> <head> <title> ... </title> <body> <div id="contenedor"> <div id="cabecera"> ... </div> <div id="menu"> ... </div> <div id="cuerpo_principal"> ... </div> <div id="lateral_dcha"> ... </div> <div id="pie"> ... </div> </div> </body> </html>
las columnas se definen mediante posicionamiento flotante en los "divs" menu, cuerpo_principal,
y lateral_dcha. (propiedad float), El pie de página (div "pie") debe llevar la
propiedad clear: both, para seguir el flujo normal de la página. El código
CSS que define la estructura es el siguiente:
#contenedor { width: 100%; background-color: fuchsia;}
#cabecera { width: 100%; background-color: lime;}
#menu { width: 20%; float: left; background-color: silver; }
#cuerpo_principal { width: 60%; float: left; background-color: aqua; }
#lateral_dcha { width: 20%; float: left; background-color: yellow; }
#pie { clear:both; width: 100%; background-color: orange; }
Y la página tendrá un aspecto similar al del ejemplo;
Ampliar márgenes inferiores.
La primera de las soluciones la publicó el diseñador Alex Robinson en su artículo Equal Height Columns - revisited y consiste en lo siguiente:
En primer lugar debemos aplicar la propiedad overflow: hidden; al
elemento contenedor:
#contenedor { overflow: hidden; }
Después aplicamos un espacio de relleno inferior (padding-bottom) muy grande a todas las columnas y después un margen inferior negativo (margin-bottom) del mismo tamaño. El valor del espacio de relleno debe ser por lo menos tan grande como la columna más alta. Para evitar quedarse corto, se recomienda utilizar valores a partir de 10.000 píxeles:
#menu, #cuerpo_principal, #lateral_dcha { padding-bottom: 30000px; margin-bottom: -30000px; }
Si tenemos posicionamiento flotante (propiedad float en la distribución de las columnas,
todos los elementos que les sigan deben tenerlo también. Así al div "pie" le cambiaremos la
propiedad clear: both por la propiedad float: left.
Las propiedades que hemos utilizado son las siguientes:
#contenedor { overflow: hidden; }
#menu,#cuerpo_principal,#lateral_dcha { padding-bottom: 30000px;
margin-bottom: -30000px; }
#pie { float: left }
Una vez aplicadas estas propiedades, la página de ejemplo anterior tendrá el siguiente aspecto:
Los dos problemas principales que presenta esta solución son que se producen errores al imprimir la página, y que si utilizamos enlaces internos de tipo ancla (a otra parte de la misma página, las columnas se desplazan y desaparece parte de la página.
Sin embargo podemos hacer la página imprimible, creando un estilo para impresora, de forma que se anulen los colores de fondo, y las propiedades descritas anteriormente. En el ejemplo anterior añadiremos el siguiente código CSS:
@media print {
* { margin: 0; padding: 0; }
#contenedor { overflow:visible; }
#menu,#cuerpo_principal,#lateral_dcha { padding-bottom: 0px; margin-bottom: 0px;
background-color: transparent; }
#pie { clear: both }
}
Con esto volvemos a convertir la página tal como estaba antes, y le hemos quitado el color a las columnas, con lo que la página podrá imprimirse, pero sin colores de fondo en las columnas.
El problema de los enlaces internos tipo ancla, no se le ha encontrado solución, por lo que si tenemos este tipo de enlaces en la página deberemos optar por otra solución.
Falsas Columnas
Esta otra solución la presentó el diseñador Dan Cederholm en su artículo Faux Columns. Si la solución anterior consitía en engañar al navegador, esta solución se basa en engañar al ojo del usuario.
La solución consiste en establecer una imagen de fondo repetida verticalmente en el elemento contenedor. La imagen debe imitar a las columnas que se formen, Como el contenedor es tan alto como la columna más alta, su imagen de fondo reemplaza a las otras columnas que se quedan más cortas. De esa manera da la sensación de que todas las columnas son de la misma altura.
El problema de esta solución es que la página tiene que ser de anchura fija, ya que la imagen de fondo es también fija, y siempre del mismo tamaño; no podemos por tanto usar porcentajes para definir el tamaño. Además debemos crear la imagen de fondo a medida de la página. Si queremos cambiar el fondo, deberemos cambiar también la imagen. En el ejemplo anterior deberemos variar el código CSS inicial que define la estructura de la siguiente manera:
#contenedor { width: 800px; background-image: url("fondo.gif"); margin: 0 auto; }
#cabecera { width: 800px; background-color: lime;}
#menu { width: 160px; float: left; background-color: silver; }
#cuerpo_principal { width: 480px; float: left; background-color: aqua; }
#lateral_dcha { width: 160px; float: left; background-color: yellow; }
#pie { clear: both; width: 800px; background-color: orange; }
Y la imagen de fondo utilizada, con sus medidas es la siguiente:
La imagen, al repetirse verticalmente, crea unas columnas de fondo iguales a las de la página, con lo que al acabarse la columna, ésta continúa en la imagen de fondo.
El resultado lo podemos ver en el siguiente enlace:
Uso de la propiedad display
La siguiente solucion puede considerarse la única técnicamente correcta, ya que no se basa en ningún truco para engañar al ojo o al navegador, y fue propuesta por por el diseñador Roger Johansson en su artículo Equal height boxes with CSS. y se basa en el uso de la propiedad display, de modo que se fuerza a los "divs" a comportarse como una tabla.
En primer lugar es necesario que las columnas estén dentro de un elemento contenedor, y a su vez éste dentro de otro elemento contenedor. La estructura de cajas en el código html será la siguiente:
<div id="contenedor">
<div id="cabecera"> ... </div>
<div id="contenidos1">
<div id="contenidos2">
<div id="menu"> ... </div>
<div id="cuerpo_principal"> ... </div>
<div id="lateral_dcha"> ... </div>
</div>
</div>
<div id="pie"> ... </div>
</div>
A continuación, se utiliza la propiedad display para mostrar los "divs"
añadidos como si fueran celdas de una tabla: El "div" más exterior llevará la propiedad
display: table, el segundo llevará la propiedad display: table-row
y los "divs" de las columnas llevarán la propiedad display: table-cell.
No deben aplicarse ninguna propiedad de posicionamiento a estos "divs", eliminaremos por
tanto las propiedades float y clear y la propiedad position
y otras de posicionamiento si las hubiera.
En el ejemplo anterior variaremos el código CSS inicial que define la estructura de la página de la siguiente manera:
#contenedor { width: 100%; background-color: fuchsia }
#cabecera { width: 100%; background-color: lime;}
#menu { width: 20%; background-color: silver; }
#cuerpo_principal { width: 60%; background-color: aqua; }
#lateral_dcha { width: 20%;; background-color: yellow; }
#pie { width: 100%; background-color: orange; }
#contenidos1 { display: table; }
#contenidos2 { display: table-row; }
#menu,#cuerpo_principal,#lateral_dcha { display: table-cell; }
La página la veremos de la siguiente manera:
Mediante la propiedad display, los elementos se comportan como una tabla, una fila de tabla o una celda de tabla, de forma que los elementos "div" que forman las columnas de la página en realidad se comportan como celdas de tabla, lo que permite que el navegador las muestre con la misma altura.
El único inconveniente es que Internet Explorer en vrsiones antiguas (version 7 y anteriorres) no muestra bien este tipo de estructura, quedando la página desestructurada.
Nuevas tendencias en CSS3
El nuevo CSS3 añade nuevas propiedades, que permiten distribuir un texto en columnas, y además añade otro tipo de diseño para las páginas, el diseño de cajas. La distribucion de un texto en columnas sirve para un texto dentro de una caja, pero no para varias cajas en sí mismas, mientrs que en el diseño por cajas, se facilita la distribución de varias cajas en el espacio de la página, pero nada dice de la igualación de la altura entre ellas.
Podemos ver cómo funcionan estas nuevas propiedades en nuestro Manual de CSS3.
En la siguiente página veremos como crear esquinas redondeadas en las cajas de los diseños web.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com