1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
---
title: Columnas con CSS-3
slug: Columnas_con_CSS-3
tags:
- CSS
- Todas_las_Categorías
translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts
---
<p>
</p>
<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3>
<p>Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos.
</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS-3</a> propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo) </p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">El blog de Robert O'Callahan </a> usa columnas CSS, pruébalo con Firefox 1.5
</p>
<h3 id="Usar_Columnas" name="Usar_Columnas"> Usar Columnas </h3>
<h4 id="Columnas.2C_Count_y_Width" name="Columnas.2C_Count_y_Width"> Columnas, Count y Width </h4>
<p>Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: <code>-moz-column-count</code> y <code>-moz-column-width</code>.
</p><p><code>-moz-column-count</code> indica el número concreto de columnas a crear. Por ejemplo:
</p>
<pre><div style="-moz-column-count:2; -moz-column-gap: 1em;">
Cuando leemos un texto las líneas muy largas resultan incómodas, si son
demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
de la línea en la que estabas. Por ello, pensando en los usuarios con
monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
en columnas, más o menos, como hacen los periódicos.</div>
</pre>
<p>Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior):
</p>
<div style="border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
<p><code>-moz-column-width</code> fija la anchura mínima de las columnas. Si no se indica un <code>-moz-column-count</code>, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible. </p>
<pre><div style="-moz-column-width:20em; -moz-column-gap: 1em;">
Cuando leemos un texto las líneas muy largas resultan incómodas, si son
demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
de la línea en la que estabas. Por ello, pensando en los usuarios con
monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
en columnas, más o menos, como hacen los periódicos.</div>
</pre>
<p>Se visualizará así:
</p>
<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
<p>Los detalles exactos son descritos en <a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS3</a>.
</p><p>En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir.
</p>
<h4 id="Equilibrado_de_altura" name="Equilibrado_de_altura"> Equilibrado de altura </h4>
<p>El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace. </p><p>Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS <code>height</code> en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente. </p>
<h4 id="Espacio_entre_Columnas" name="Espacio_entre_Columnas"> Espacio entre Columnas </h4>
<p>Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el <code>padding</code> de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad <code>-moz-column-gap</code> al bloque con multicolumna: </p>
<pre><div style="-moz-column-width:20em; -moz-column-gap:2em;">
Cuando leemos un texto las líneas muy largas resultan incómodas, si son
demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
de la línea en la que estabas. Por ello, pensando en los usuarios con
monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
en columnas, más o menos, como hacen los periódicos.</div>
</pre>
<p>Se visualizará así:
</p>
<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 1em;">Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.</div>
<h4 id="Degradado_elegante" name="Degradado_elegante"> Degradado elegante </h4>
<p>La propiedad <code>-moz-column</code> será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5.
</p>
<h3 id="Conclusi.C3.B3n" name="Conclusi.C3.B3n"> Conclusión </h3>
<p>Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura. </p>
<h3 id="Referencias_adicionales" name="Referencias_adicionales"> Referencias adicionales </h3>
<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a>
</li></ul>
<p><span class="comment">Categorías</span>
</p><p><span class="comment">interwiki links</span>
</p>{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}
|
