Noticias de Tecnología, Tecnología a full minuto a minuto, lo que pasa en la Web encuéntralo en Seguilaflecha.com, Noticias de Tecnología actualizadas al instante


eSedo.com - Compra, venta y registro de dominios y proyectos web infos proyecto: seguilaflecha.com estadísticas para proyecto: seguilaflecha.com etracker® web controlling en lugar de analisis de archivos log
| Home | Noticias | Bajar Archivos | Blogósfera | Proponer Feed RSS | Publicar Noticia | Contacto | Agregar URL | Top10 | Chat | Juegos |
| Videos | iFlecha | Central de Archivos | Foros | Buscador | Crea tu Blog Gratis! en 3 pasos | Juegos, Tonos y Fondos para Móviles |
 Principal > Blogósfera > Tecnología > Hacer una lista ordenada (ol) cuenta regresiva o backwards
 
Tu voto decide
¿Cuál es el mejor Smartphone del 2008?
iPhone 3g (Apple)
Xperia (Sony Ericsson)
HTC Touch Diamond
Nokia N97
Se Dice en la Blogósfera
Noticias de Tecnologia

¡Noticias de
Tecnologia
al instante!

La tecnologia en tu idioma
Noticias Seguilaflecha
Perfil de Facebook de Pablo Ceccarelli
VI Seminario  Internacional de Protección de Datos Personales
Miembros de
Asociacion Usuarios de Internet de la Republica Argentina
   

Hacer una lista ordenada (ol) cuenta regresiva o backwards
Fecha 19/11/2008 15:41 Autor Ceslava Visitas a esta noticia 92
Print Pdf RSS
Para crear una lista podemos utilizar las etiquetas ul u ol, esta última ordena los datos y podemos mostrar con CSS diversos tipos de numeración con list-style-type Ahora bien para convertir esto: Uno Dos Tres En: 3. Uno 2. Dos 1. Tres Tenemos dos opciones, una con CSS y otra con Javascript. Con CSS Podemos invertir el orden de la lista en horizontal, simplemente flotando li [...]

Para crear una lista podemos utilizar las etiquetas ul u ol, esta última ordena los datos y podemos mostrar con CSS diversos tipos de numeración con list-style-type

Ahora bien para convertir esto:

  1. Uno
  2. Dos
  3. Tres

En:

3. Uno
2. Dos
1. Tres

Tenemos dos opciones, una con CSS y otra con Javascript.

Con CSS

Podemos invertir el orden de la lista en horizontal, simplemente flotando li a la derecha:

ol li {float: right;}
  1. Uno
  2. Dos
  3. Tres

Pero lo que nosotros queremos es mantener el orden pero cambiar la numeración. Con este método también lo conseguimos aunque no es compatible con todos los navegadores:

ol {
  list-style: none;
  counter-reset: c 4; /* No. de elementos de la lista +1  */
}
ol > li::before {
  content: counter(c) ".  ";
  counter-increment: c -1;
}

Con Javascript

Primero ocultamos la numeración:

list-style-type: none;

Luego invertimos el orden y volvemos a mostrar la numeración con este código javascript:

<script type="text/javascript">
    <!--
      var ol = document.getElementById("cuenta_atras");
      var lis = ol.getElementsByTagName("li");
      for (var i = 1; i <= lis.length; i++)
        lis[lis.length-i].value = i;
      ol.style.listStyleType = "decimal";
    //-->
  </script>

Donde (”cuenta_atras”) será el id de nuestra lista.

<ol id="cuenta_atras">
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ol>

Si lo vas a utilizar en varias listas, utiliza clases en vez de ID.

En mi página de archivos puedes ver un ejemplo, donde todos los artículos aparecen en una lista ordenada con la numeración backwards o regresiva.

lista ordenada backwards por ti.

Fuentes:

+ Webdeveloper.com

+ SitePoint



Source: ceslava.com
RankRankRankRankRank
Tags - Del Tec Bli Spu Dig
No hay comentarios. ¿Quieres ser el primero?

Búsqueda personalizada

Hola Navegante
IP: 38.103.63.58

Nombre de Uusario
Contraseña
RSS DE TECNOLOGIA

¡Noticias de
Tecnologia
al instante!

Ultimas noticias
Escuchar Radio
iFlecha Nuevo!
iFlecha, tu lector de RSS onlineTe presentamos iFlecha, el nuevo lector de feeds RSS de Seguilaflecha. Pruebalo, lo puedes configurar a tu gusto. Agrega las fuentes de noticias que quieras y puedes mantenerte actualizado sin necesidad de visitar múltiples páginas o instalar pesados software.
Ingresar a iFlecha
Regionales
Argentina
Noticias Seguilaflecha
 
CopyLeft 2008 - Seguílaflecha.com Tecnología- Se permite la reproducción citando la fuente y enlazando a Noticias de Tecnología - Publicite en Seguilaflecha
Mira nuestras estadísticas de visitas
Clicky Web Analytics

Suscríbete al feed RSS. Ya somos