Liste puntate non 'standard'


Sia gestendo questo sito che aiutando qualche amico a metterne su uno ex-novo, spesso mi è capitato di avere a che fare con le liste puntate (quelle che si fanno con <ul>...</ul> oppure con <ol>...</ol>) ed ho che in alcune situazioni la loro gestione di default da parte del browser non è delle migliori.
Ad esempio se nel normale uso vanno bene liste normali, per gestire un elenco puntato di link, le cose non sono altrettanto ottimali: a meno di utilizzare un carattere molto grande, infatti, ci si ritrova ad avere link ravvicinati, con la possibilità di non cliccare quello giusto se solo ci si sposta di pochi pixel.
Come fare allora a distanziare ogni voce di menù da quella che gli sta sotto?
Niente di più semplice! Basta inserire due tag <br> e le vostre liste di link saranno distanziate come questa sotto:


Poi, se non vi sembrano molto originali, usando un po' di attributi dei css, è possibile sostituire i puntini (o i numeri) con delle immagini agendo proprio sulle liste, senza essere costretti a usare delle tabelle.
Ecco come fare: si usa solo il tag <ol> perché modificando lo stile di questo tag, possiamo assegnarli dei numeri al posto dei soliti puntini per indicare un elemento.
Dentro l'attributo style del tag basta mettere list-style-type e farlo seguire da uno dei seguenti valori:
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Ecco per ognuno di questi valori, come appare una lista:

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. disc

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. circle

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. square

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. decimal

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. lower-roman

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. upper-roman

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. lower-alpha

  1. Questo è il risultato che si ottiene
  2. con il valore
  3. upper-alpha

Naturalmente none non mostra nulla.
Fino a qui si tratta sempre di usare i vari tipi standard dell'HTML.
Vediamo invece come si può dare un tocco di originalità e rendere i nostri elenchi un po' meno 'standard'.
Se al posto del precedente attributo si usa invece list-style-image:url(indirizzo_immagine), questo mostra una immagine al posto dei soliti puntini o simili. Eccone un esempio:
  1. Questo è il risultato che si ottiene
  2. con list-style-image
  3. e una immagine con una freccia colorata

Adesso non giudicate l'immagine che ho fatto per sostituire i puntini, per favore... come scusa potrei dirvi che l'ho fatta in 25 secondi, salvataggio incluso :-D
Comunque, nel caso che l'immagine non venga caricata, viene sostituita dai numeri, continuando ad essere vista come una lista.


<-Indietro