facebook
mail
print
Utilice columnas en su página web
Introducción
Cuando debemos presentar una gran cantidad de contenido en nuestra página web, tenemos la posibilidad de hacerlo en columnas como un artículo de prensa (periódico o diario), que facilita su lectura.
CSS 3 incorpora la presentación de texto en columnas, que aunque no todos los navegadores soportan el estandard, cuentan con definiciones propias que podemos utilizar y dar compatibilidad con los navegadores más comunes, y en el caso que no lo interprete, el texto se presentará normalmente en una columna.
Definición
Por lo general, la definición de las columnas se realiza sobre un elemento <div>, que contiene diferentes
párrafos (<p>), donde la altura del elemento se ajusta balaceando el texto en las columnas disponibles.
La compatibilidad entre los diferentes navegadores se detalla en la siguiente tabla donde se indica además si se requiere como atributo customizado para el navegador:
| Navegador | Versión | Atributo |
|---|---|---|
| Internet Explorer | 10.0 | Standard |
| Chrome | 4.0 | -webkit-* |
| Firefox | 2.0 | -moz-* |
| Safari | 3.1 | -webkit-* |
| Opera | 15.0 | -webkit-* |
Los atributos css que tenemos para manejar el texto en columnas son:
| Atributo | Descripción |
|---|---|
-webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; |
Define el ancho de la columna, la cantidad de columnas de ajusta según el ancho del elemento que le contiene. Por defecto se utiliza el valor "auto", que inversamente calcula el ancho según la cantidad de columnas definidas |
-webkit-column-count: 3; -moz-column-count: 3; column-count: 3; | Define la cantidad de columnas en que se distribuye el texto, en el ejemplo se definen 3 columnas. Por defecto se utiliza el valor "auto" que determina la cantidad de columnas según el ancho definido por column-width |
-webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; |
Especifica la separación entre las columnas |
-webkit-column-rule: 2px solid navy; -moz-column-rule: 4px solid navy; column-rule: 4px solid navy; |
Define una línea de separación entre las columnas, igual como la definición de atributo border
|
Ahora veamos como se ve un lindo "Lorem Ipsum" presentado en columnas de 240px, probablemente si está viendo la página desde un celular, deberá colocar la pantalla de lado para apreciar el efecto, en un PC, puede cambiar el ancho del navegador para apreciar como se distribuye el texto en las columnas. Partamos por definir la clase "newspaper":
.newspaper {
-webkit-column-width: 240px;
-moz-column-width: 240px;
column-width: 240px;
-webkit-column-rule: 2px solid navy;
-moz-column-rule: 2px solid navy;
column-rule: 2px solid navy;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nunc risus, sollicitudin eu lobortis vel, euismod a nisi. Etiam volutpat augue velit, ut gravida velit interdum sit amet. Donec vel enim porta, aliquam eros sed, imperdiet nisi. Cras laoreet neque ante, a ultricies dui iaculis ut. Aenean bibendum felis nec quam lacinia, at cursus nibh molestie. Nulla non ipsum elit. Nam blandit a lacus sit amet suscipit. Nulla facilisi. Vestibulum sed quam pulvinar, placerat nisl sit amet, facilisis urna. Mauris suscipit tincidunt elit, sit amet fringilla felis vehicula a. Morbi maximus convallis lectus a lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris nec arcu at metus vestibulum auctor eu a nisl. In a ultricies velit, et lacinia magna. Sed felis tellus, aliquet sed mollis ut, tincidunt id nisi. Vivamus laoreet varius mi, id convallis est iaculis vitae.
Aenean at elit nibh. Nulla auctor magna eget erat iaculis, in finibus libero dignissim. Maecenas bibendum dictum turpis vitae vehicula. Cras suscipit pellentesque iaculis. Duis non massa mattis sapien hendrerit dapibus. Nulla vestibulum sagittis sem, vitae tempus risus auctor sit amet. Duis iaculis consectetur ipsum id lobortis. Nam at felis rhoncus, dignissim lacus eu, placerat est. Pellentesque quis erat nec magna fermentum ultrices. In dapibus tortor ultrices tristique volutpat.
Generado por Sistema y almacenado en cache
| Wyzer Luis Hernán de la Barra |
|
| Teléfono: | +56995451689 |
| WhatsApp: | +56995451689 |
| E-Mail: | info@wyzer.cl |
| Web: | www.wyzer.cl |