Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

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

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 110

Visitas el mes pasado: 198

logo
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

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. Trucos CSS (II)

10.2 Columnas iguales.

css

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;

Ejemplo página.



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:

Ampliar márgenes inferiores.


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:

fondo de falsas columnas

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:

Falsas columnas.


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:

Propiedad display.


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 en Internet Explorer sólo se muestra correctamente la página si usamos la etiqueta !DOCTYPE con el lenguaje XHTML 1.0.




En la siguiente página veremos como crear esquinas redondeadas en las cajas de los diseños web.

Esquinas redondeadas.



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com