Gdesign.it :: Come progettare siti web accessibili ed efficaci ::


Home » How To » Elenchi puntati: un dolce a più strati

Elenchi puntati: un dolce a più strati

di Nandini Doreswamy, traduzione di Gdesign, 08 Marzo 2005

Versione Stampabile

L'articolo originale in lingua inglese è "Bulleted Lists: Multi-Layered Fudge" ed è stato tradotto per gentile concessione di A List Apart Magazine e dell'autore.


La progettazione con i CSS del nostro sito web aziendale stava procedendo al meglio fino a quando non incontrai un ostacolo. La sfida fu realizzare due colonne di elenchi puntati nel flusso di testo. La disposizione che avevo in mente era qualcosa di simile:

Paragrafo 1
Elenco puntato | Elenco puntato
Paragrafo 2
Elenco puntato | Elenco puntato
Paragrafo 3
Elenco puntato | Elenco puntato
...e così via

Provai alcuni elenchi che in IE6 funzionavamo bene, ma in quasi ogni altro browser mi causavano un'emicrania. Forse avrei potuto superare l'ostacolo utilizzando gli elenchi orizzontali, ma da sempre ho trovato più semplice ricorrere all'uso di oggetti fluttuanti, ed è quello che feci.

UL fluttuanti

Per risolvere il problema con gli oggetti fluttuanti, assegniamo due classi di elenchi non ordinati, ul.left ed ul.right, che disporremo in un div chiamato "div" largo 800 pixel (800 pixel è un valore arbitrario; potete impostare la larghezza che preferite). Il CSS di base quindi è:

#div {width: 800px;}
  ul.left {float: left;}
  ul.right {float: right;}

Per il codice utilizzeremo tre paragrafi di testo finto, posti tra gli elenchi non ordinati ed inseriti interamente nel div. Quindi avremo:

<div id="div">

  <p>Lorem ipsum dolor sit amet, consectetur
  adipisicing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud.</p>
  
  <ul class="left">
    <li>Voce 1: Sinistra</li>
    <li>Voce 2: Sinistra</li>
  </ul>
  <ul class="right">
    <li>Voce 3 Destra: Una voce lunga</li>
    <li>Voce 4 Destra: Questa è più lunga, così per divertimento</li>
  </ul>
    
  <p>Duis aute irure dolor in reprehenderit
  in voluptatevelit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat
  cupidatat non proident.</p>
  
  <ul class="left">
    <li>Voce 1 Sinistra: Lunghezza variabile</li>
    <li>Voce 2 Sinistra: Anche questa di lunghezza variabile</li>
  
  </ul>
  <ul class="right">
    <li>Voce 4 Destra: Questa è più corta</li>
    <li>Voce 4 Destra: Destra</li>
  </ul>

  <p>Pellentesque et erat. Quisque at quam.
  Donec accumsan tellus at tellus. Donec
  metus. Sed sit amet ante vitae metus imperdiet
  varius. Vestibulum pulvinar bibendum.</p>

  <ul class="left">
    <li>Voce 1 Sinistra<</li>
    <li>Voce 2 Sinistra<</li>
  </ul>
  <ul class="right">
    <li>Voce 3 Destra: Un'altra voce lunga</li>
    <li>Voce 4 Destra: Destra</li>
  </ul>

</div>

Il problema con gli UL

Il guaio degli nostri UL fluttuanti è questo: il testo del secondo paragrafo sale in mezzo ai due UL sopra. Inoltre l'UL fluttuante di destra perde l'allineamento.

Per superare il problema faremo tre cose:

  1. Impostiare il margin, il padding ed il bordo a zero. Questo per dare coerenza e per impedire ai browser di intrommetersi nell'allineamento dei nostri punti elenco con differenti valori di "default" di margin e padding.
  2. Specifichiare il tipo di punti elenco. Di nuovo, questo serve a mantenere la coerenza fra i browser. Utilizzeremo un semplice punto elenco quadrato.
  3. Dichiarare la larghezza degli UL. Nel nostro esempio assegneremo ad ogni UL un valore arbitrario di 400 pixel, pari alla metà della larghezza del div contenitore.

Il CSS adesso è:

#div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }

Il problema della spaziatura

IE6 lascia la stessa quantità di spazio prima e dopo gli UL. Tuttavia le ultime versioni di Mozilla (1.7.3), Opera (7.54) e Firefox (1.0) lasciano lo spazio prima degli UL, ma non dopo. Per assicurarci che lo spazio prima e dopo gli UL sia identico assegneremo agli UL un padding superiore ed inferiore pari 15 pixel in questo modo:

#div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }

Su IE6 tutto ok, ma su Mozilla, Opera e Firefox c'è un pò di spazio a sinistra dopo gli UL ed inoltre lo spazio prima e dopo gli UL non è ancora esattamente identico. Questa spaziatura irregolare dipende dallo spazio di default lasciato a sinistra dopo il paragrafo precedente; per correggere il problema è necessario agire sul paragrafo. Definire il margin o il padding superiore dei nostri UL non risolverebbe questo problema.

Vogliamo preparare il nostro "dolce" alla perfezione, quindi assegneremo al paragrafo una classe chiamata .no-space e gli imposteremo margin e padding a 0:

.no-space {
    margin: 0px;
    padding: 0px;
  }

Inoltre cambieremo il codice per includere questa classe al paragrafo:

<div id="div">

  <p class="no-space">Lorem ipsum dolor sit
  amet, consectetur adipisicing elit, sed do
  eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam.</p>

 <ul class="left">
    <li>Voce 1: Sinistra</li>
    <li>Voce 2: Sinistra</li>
  </ul>

  <ul class="right">
    <li>Voce 3 Destra: Una voce lunga</li>
    <li>Voce 4 Destra: Questa è più lunga, così per divertimento</li>
  </ul>

<p class="no-space"> Duis aute irure dolor
  in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat.</p>

  <ul class="left">
    <li>Voce 1 Sinistra: Lunghezza variabile</li>
    <li>Voce 2 Sinistra: Anche questa di lunghezza variabile</li>
  
  </ul>
  <ul class="right">
    <li>Voce 4 Destra: Questa è più corta</li>
    <li>Voce 4 Destra: Destra</li>
  </ul>

<p class="no-space">Pellentesque et erat.
  Quisque at quam. Donec accumsan tellus at tellus.
  Donec  metus. Sed sit amet ante vitae metus
  imperdiet varius.</p>

  <ul class="left">
    <li>Voce 1 Sinistra<</li>
    <li>Voce 2 Sinistra<</li>
  </ul>
  <ul class="right">
    <li>Voce 3 Destra: Un'altra voce lunga</li>
    <li>Voce 4 Destra: Destra</li>
  </ul>

</div>

Tutto sembra più o meno a posto, abbiamo quasi finito.

Però sarebbe meglio se la colonna sinistra di punti elenco fosse indentata anzichè essere attaccata al margine sinistro. Per ottenere questo risultato, faremo quanto segue:

  1. Dichiarare il posizionamento relativo per l'UL sinistro.
  2. Specificare la sua distanza da sinistra. Nel nostro esempio impostiamo questa distanza pari a 50 pixel.

Adesso il CSS è:

#div {width: 800px;}
  
  ul.left {
    float: left;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
    position: relative;
    left: 50px;
  }
  
  ul.right {
    float: right;
    width: 400px; 
    margin: 0px;
    padding: 15px 0px;
    border: 0px none; 
    list-style-position: inside;
    list-style-type: square;
  }
  
  .no-space {
    margin: 0px;
    padding: 0px;
  }

Le cose sembrano a posto ed in realta lo sono, almeno per me. Potete vedere la pagina con i due elenchi puntati che è stata la causa della mia emicrania. La tecnica utilizzata lì è piuttosto simile a quella sopra descritta.

Spero gustiate questo dolce a più strati..... aggiungete i vostri squisiti punti elenco GIF e servite caldo!

^Top

Dai un voto a questo articolo:   HITS: 46 | VOTI: | MEDIA VOTI:     

Home:: Html:: Principi:: How To:: Download:: Tips:: Link:: Collabora:: Partners:: News&Updates:: Contatto:: Info

© 2001 - 2006 Giuseppe Di Carlo :: Riproduzione vietata ::

Utenti on line: 3