Pubblicato il 15/03/15e aggiornato il

Come dividere un elenco in 2, 3 o più colonne con HTML e CSS.

Guida anche con video per realizzare e personalizzare con i vari colori un elenco su 2, 3 o più colonne tramite CSS e HTML.
Riprendo un post che ho scritto quasi tre anni fa che affrontava il tema di come si possa suddividere un elenco in più colonne allineate. Questa soluzione è spesso presente nelle pubblicazioni cartacee e online. Vedremo come si possa realizzare attraverso un Editor HTML WYSIWYG come potrebbe essere Windows Live Writer oppure BlueGriffon che supportano l'introduzione delle tabelle. 

Se si ha un Mac o un Linux invece di un OS Windows si può comunque utilizzare il codice di una tabella per allineare le varie colonne dell'elenco. L'idea è quella di aprire WLW e di andare su Inserisci > Tabella quindi configurarla come numero di righe e di colonne. Il numero di righe sarà ovviamente 1 mentre quello delle colonne può essere 2, 3 o anche di più.

inserire-tabella-windows-live-writer

Si possono settare anche lo spazio interno e quello esterno alle celle oltre al mostrare il bordo della stessa tabella, possibilità che sconsiglio. Dopo aver impostato la larghezza si va su Inserisci

elenco-windows-live-writer

Si clicca con il mouse sulle singole celle e in ciascuna di queste si inserisce un elenco che può essere numerato o puntato. Si completano gli elenchi con tutti gli elementi inserendo anche dei link se vogliamo creare un elenco su più colonne anche con dei collegamenti

collegamenti-ipertertestuali

I vari link si ottengono selezionando il testo, cliccando sulla icona Collegamento ipertestuale per poi incollare l'URL del link. L'elenco su più colonne è già creato. Non ci resta che andare in basso su Origine per visualizzare il codice risultante e copiarlo in un post in Modalità HTML oppure su Layout > Aggiungi un gadget > Base > HTML/Javascript in Sezioni del sito. Il codice da copiare inizierà con il tag di apertura <table… e terminerà con il tag di chiusura </table>

codice-elenco-2-3-colonne
In passato ho anche realizzato un video che mostra la creazione di un elenco su più colonne.


Possiamo anche procedere a una personalizzazione per creare una cosa di questo tipo 
 elenco-2-3-colonne-personalizzato

 

 

PERSONALIZZARE ELENCO SU 2, 3 O PIÙ COLONNE


Per aggiungere dei colori personalizzati nello sfondo, nei link, nei link visitati e in quelli puntati dal mouse dobbiamo creare una classe di stile per il nostro elenco. Nel caso in cui le si dia il nome elenco dobbiamo inserire all'inizio e alla fine del codice copiato da WLW due righe in questo modo 

<div class="elenco">
<table ...
………… CODICE ELENCO …….
</table>
</div>

Successivamente dobbiamo creare delle regole da inserire tra i tag <style> e </style> da incollare subito sopra al codice dell'elenco modificato nel modo già descritto 

<style>
.elenco {
background:#111; /* Colore di sfondo */
}
.elenco td a {
color:#eee !important; /* Colore del link */
}
.elenco td a:visited {
color:#f00 !important; /* Colore del link visitato */
}
.elenco td a:hover {
color:#0f0 !important; /* Colore del link al passaggio del mouse */
}
</style>

dove i codici dei colori possono essere scelti a piacere. Concludo ricordando che oltre a elenchi numerati e puntati possono essere realizzati degli elenchi più sofisticati anche con icone come marcatori che possono essere usati per personalizzare ulteriormente i nostri elenchi su più colonne.




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.