Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a

Datos de búsqueda

Etiqueta ‘Listas’

El elemento OL y el atributo start

Fecha de publicación: 2007/07/18

En el caso de crear una serie de listas ordenadas que tengan continuidad de una a otra puede ser interesante que algunas empiecen por un número distinto de 1.

La solución a ese problema es el atributo start en el eelemento OL. Pero resulta que el W3C lo considera fuera de uso, por lo que solo valida para HTML 4.01 Transitional. Esto es lo que dice la referencia HTML acerca del atributo start:

start = number [CN]
Deprecated. For OL only. This attribute specifies the starting number of the first item in an ordered list. The default starting number is “1”. Note that while the value of this attribute is an integer, the corresponding label may be non-numeric. Thus, when the list item style is uppercase latin letters (A, B, C, …), start=3 means “C”. When the style is lowercase roman numerals, start=3 means “iii”, etc.

Se puede hacer por CSS, pero aquí surge el inconveniente de que cuando CSS no esté disponible no se verá la numeración.

No creo que sea lógico dejar fuera de uso este atributo, ya que se valor podría considerarse semántico, y no solo de presentación. Creo que en W3C no han estado muy acertados al tomar esta decisión.

Saber más

Datos del artículo:

HTML-CSS: Listas multicolumna (1)

Fecha de publicación: 2007/05/30

Existe un método muy sencillo para crear una lista que se muestre en varias columnas, con el inconveniente de que no siempre funciona bien en Internet Explorer, como en este caso, pero creo que la idea es interesante.

En los elementos de lista (LI) se insertará una clase (class="colx", donde x es el número de columna) que indica en que columna se sitúa, y en el primer elemento de la columna otra clase que indique el comienzo de la columna (en este caso son 17 elementos de lista en 3 columnas):

<ul>
 <li class="col1">Elemento de lista 12</li>
 <li class="col1">Elemento de lista 2</li>
 <li class="col1">Elemento de lista 3</li>
 <li class="col1">Elemento de lista 4</li>
 <li class="col1">Elemento de lista 5</li>
 <li class="col1">Elemento de lista 6</li>
 <li class="col2 sube">Elemento de lista 7</li>
 <li class="col2">Elemento de lista 8</li>
 <li class="col2">Elemento de lista 9</li>
 <li class="col2">Elemento de lista 10</li>
 <li class="col2">Elemento de lista 11</li>
 <li class="col2">Elemento de lista 12</li>
 <li class="col3 sube">Elemento de lista 13</li>
 <li class="col3">Elemento de lista 14</li>
 <li class="col3">Elemento de lista 15</li>
 <li class="col3">Elemento de lista 16</li>
 <li class="col3">Elemento de lista 17</li>
</ul>

Y ahora el CSS. Se le puede dar una anchura al elemento UL, en este caso 630px. Ahora ese ancho hay que repartirlo entre las columnas, a las que se le dará 200px, después de quitarles 5px en cada lado para separarlas unas de otras. Ahora hay que dar altura, 16px, con un line-height. A cada columna, definida por las clases de los elementos LI, se le define un margen izquierdo, estrechamente relacionado con las anchuras de los UL y LI. El primer LI de cada columna lleva una clase a la que se le dará un margin-topnegativo equivalente a la altura de cada columna, para que todas ellas queden a la misma altura: 96px (16px por los 6 elementos de lista LI en cada columna).

Código CSS

ul {width:630px;}
ul li {width:200px;margin:0 5px;line-height:16px;}
ul li.col1 {margin-left:0;}
ul li.col2 {margin-left:210px;}
ul li.col3 {margin-left:420px;}
ul li.sube {margin-top:-96px;}

Ver ejemplo

La limitación de este método es que se ha definido una altura de línea en los elementos de lista (LI), lo cual hace que la clase sube pierda su eefectividad en caso de que uno de dichos elementos de lista tenga más de una línea.

Referencia y enlaces relacionados

Datos del artículo:

XHTML: Listas anidadas

Fecha de publicación: 2007/03/03

Las listas en XHTML pueden estar anidadas, usando al mismo tiempo diferentes tipos de listas (ver resultado en el navegador):

<dl>

<dt>Aplicaciones a utilizar:</dt>
<dd>
<ul>
 <li>Quanta</li>
 <li>The Gimp</li>
 <li>Mozilla Firefox</li>
</ul>
</dd>

<dt>Pasos a seguir:</dt>
<dd>
<ol>
 <li>Prototipado en papel de la interfaz y la estructura del sitio.</li>
 <li>Evaluar la usabilidad de los resultados obtenidos en los pasos anteriores.</li>
 <li>Escribir el código y crear las imágenes con las aplicaciones listadas.</li>
</ol>
</dd>

<dt>Nota:</dt>
<dd>Las aplicaciones utilizadas pueden variar.</dd>

</dl>

<dl>

Artículo relacionado: XHTML: creación de listas (odenadas, desordenadas y de definiciones).

Datos del artículo:

XHTML: creación de listas (ordenadas, desordenadas y de definiciones)

Fecha de publicación: 2007/03/01

Existen tres tipos de listas:

  • Listas desordenadas.
  • Listas ordenadas.
  • Listas de definiciones.

Listas desordenadas

Para crear listas desordenadas se utilizarán las etiquetas ul y li. Con la etiqueta ul se delimitará la lista, y con la etiqueta li se delimitarán los elementos de la lista.

Este es el código XHTML de una lista desordenada (ver resultado en el navegador):

<ul>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 <li>Elemento 3</li>
</ul>

Listas ordenadas

Se trata de listas numeradas. Funcionan de la misma forma que las ordenadas, pero cambiando la etiqueta ul por la etiqueta ol.

Este es el código XHTML de una lista ordenada (ver resultado en el navegador):

<ol>
 <li>Elemento 1</li>
 <li>Elemento 2</li>
 <li>Elemento 3</li>
</ol>

Listas de definiciones

Las listas de definiciones quedan delimitadas mediante la etiqueta dl. Cada elemento de la definición se divide en dos partes:

  • El término, delimitado por la etiqueta dt.
  • La definición delimitada por la etiqueta dd.

Este es el código XHTML de una lista de definiciones (ver resultado en el navegador):

<dl>
 <dt>Término 1.</dt>
 <dd>Texto asociado al término 1.</dd>
 
 <dt>Término 2.</dt>
 <dd>Texto asociado al término 2.</dd>
 
 <dt>Término 3.</dt>
 <dd>Texto asociado al término 3.</dd>
</dl>

Artículo relacionado: XHTML: Listas anidadas.

Referencia y enlaces relacionados

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: Desarrollo web, XHTML
  • Comentarios desactivados en XHTML: creación de listas (ordenadas, desordenadas y de definiciones)

Información del sitio