Pubblicato il 09/08/14e aggiornato il

Come creare elenchi divisi in più colonne con HTML e CSS.

Come suddividere gli elenchi su 2, 3, 4 o più colonne usando HTML e CSS e come personalizzare colori, sfondi e bordi.
Vediamo come utilizzare il programma BlueGriffon per realizzare degli elenchi su più colonne. L'idea è quella di inserire ciascun elenco in una cella di una tabella per poi visualizzarli uno fianco all'altro. Con BlueGriffon si possono anche scegliere stili di elenchi anche diversi da quelli che ho già proposto in un recente post su questo sito

Con gli Editor WYSIWYG non occorre neppure conoscere il linguaggio HTML anche se una infarinatura propedeutica è opportuna. A tale scopo vi consiglio di scaricare il mio ebook gratuito Guida all'HTML e al CSS che serve per avere una pur minima conoscenza di base.

Utilizzando gli strumenti di BlueGriffon potremo realizzare un elenco su 4 colonne

Elenco-4-colonne

Andando su Sorgente potremo quindi copiare quello che è il codice di questo elemento

codice-elenchi-4-colonne

Come indicato nel tutorial di BlueGriffon non si devono copiare i tag iniziali, quelli <head>, </head>, <body>, </body> e </html>. Ecco un codice di esempio che ho creato 

<style>
#elenco {
background:#111; /* Colore di background */color:#FFF; /* Colore del testo */      
border: 2px dotted red;}
#elenco td a {
color:#FFF !important; /* Colore del link */}
#elenco td a:visited {
color:#F00 !important; /* Colore del link visitato */}
#elenco td a:hover {
color:#00F !important; /* Colore del link al passaggio del cursore */}
</style>
<table id="elenco" border="0" cellpadding="2" cellspacing="3" width="700">
      <tbody>
        <tr>
          <td>
            <ol>
              <li>Elemento 1.1</li>
              <li>Elemento 1.2</li>
              <li>Elemento 1.3</li>
            </ol>
          </td>
          <td>
            <ol>
              <li>Elemento 2.1</li>
              <li>Elemento 2.2</li>
              <li>Elemento 2.3</li>
            </ol>
          </td>
          <td>
            <ol>
              <li>Elemento 3.1</li>
              <li>Elemento 3.2</li>
              <li>Elemento 3.3</li>
            </ol>
          </td>
          <td>
            <ol>
              <li>Elemento 4.1</li>
              <li>Elemento 4.2</li>
              <li>Elemento 4.3</li>
            </ol>
          </td>
        </tr>
      </tbody>
    </table>

dove è stata creata la regola univoca per il selettore #elenco. I principali parametri sono accompagnati da un commento che ne spiega l'utilizzo. Al posto di Elemento X.y può essere inserito testo, link e anche immagini. La tabella ha una larghezza di 700 pixel e ha una distanza di 3 pixel tra le singole celle e una distanza di 2 pixel tra la parte interna delle celle e il loro bordo. Tale codice può essere incollato in un post in Modalità HTML o in un widget HTML/Javascript in Sezioni del sito.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.