Pubblicato il 04/08/12e aggiornato il

Come creare elenchi su 2 o più colonne.

Come creare degli elenchi personalizzati su più colonne con Windows Live Writer.
Dopo aver mostrato come si possa creare una Galleria Fotografica usando Windows Live Writer, con la funzione Tabella dello stesso programma vediamo come si riesca facilmente a creare un elenco suddiviso in varie sezioni. Questo sistema è molto utile se abbiamo a che fare con elenchi con molti elementi che sono però sufficientemente corti da essere visualizzati su più colonne senza problemi.

Si utilizza WLW semplicemente come Editor WYSIWYG per creare il nostro elenco su più colonne per poi copiare l'HTML andando su Origine e quindi incollarlo in un gadget HTML/Javascript o addirittura in un un post o in una pagina statica logicamente con l'Editor in Modalità HTML. L'aspetto dell'elenco sarà questo

elenco-colonne
in cui mi sono divertito anche a inserire un colore di sfondo, un colore per i link e un colore diverso per i collegamenti puntati con il cursore. Dopo essere andati su Tabella si sceglie la larghezza, il numero di colonne e opzionalmente anche altri parametri

elenchi-link-collegamenti

In ciascuna cella viene inserito un elenco cliccando su quello numerato o su quello puntato e immettendo le varie voci dopo aver pigiato su Invio. I link si inseriscono andando su Collegamento ipertestuale. WLW creerà un codice HTML che può essere selezionato e copiato andando su Origine nella parte bassa della pagina. Ho anche postato su Youtube un breve tutorial


Volendo si possono anche personalizzare alcuni aspetti delle colonne di elenchi di link. Basta incollare un codice di questo genere prima di quello della tabella con gli elenchi

<style>
.elenco {
background:#000000; /* Colore di sfondo */}
.elenco td a {
color:#ffffff !important;  /* Colore del link */}
.elenco td a:visited {
color:#ff0000 !important; /* Colore del link visitato */}
.elenco td a:hover {
color:#00ff00 !important; /* Colore del link al passaggio del mouse */}
</style>

dove ovviamente i colori possono essere scelti a piacere e essere inseriti anche altri parametri. Dobbiamo anche aggiungere una riga di codice all'inizio della tabella e un'altra alla fine in questo modo

<div class="elenco"><table border=….
………..
</table>
</div> 


dove le righe aggiunte sono state colorate di rosso.




7 commenti :

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  2. Ottimo, è stato facilissimo crearlo, non credo che servirà solo a me.
    Però quando lo inserisco (il codice) in fondo il blackground si vede a metà perché ho la parte finale del layout divisa in due.
    Per caso hai già creato la guida per aggiungere uno spazio del widget ad uno, nonostante si sia scelto di dividerlo in due?
    In poche parole vorrei che l'ultimo widget si vedesse per lungo, anziché diviso in due parti, come illustrato in figura:
    http://i.imgur.com/t07eA.png

    RispondiElimina
    Risposte
    1. @AndreaSaruppo
      Dovresti aggiungere un'altra sezione. Non so se è il footer. Forse ti può essere di aiuto la prima parte di questo post
      http://www.ideepercomputeredinternet.com/2009/06/come-aggiungere-tre-nuove-colonne-nella.html

      Elimina
  3. Ho letto la tua guida anche stamane, ma non mi pare sia quella che fa al caso mio.

    Il footer è già presente.
    In poche parole io devo lasciare il pié di pagina diviso in due.
    Però sotto il pié di pagina voglio inserire, non so' come dirlo, un'altro footer per avere la possibilità di inserire il gadget per esteso, in modo che ho la possibilità di inserire la tabella dei link oltre 800px.
    Nel modo attuale la tabella può essere allargata ma il blackgroud si ferma non appena arriva a inizio del secondo gadget.

    RispondiElimina
    Risposte
    1. dopo poco più di 7 ore ci sono riuscito da solo, grazie lo stesso (:

      Elimina
  4. Ciao ti scrivo per chiederti di risolvere se è possibile, un problema che non c'entra con questo post..
    Come correggere errore URL a cui allego link
    http://www.google.com/translate_c?langpair=it|de&u=http://%20massofisioterapistadalmolinroberto.blogspot.it/
    per il blog
    http://massofisioterapistadalmolinroberto.blogspot.it/?
    Grazie

    RispondiElimina
    Risposte
    1. @kamasa54
      Questo URL dov'è? E' nel tuo blog? Se è così apri il post in cui si trova e lo cambi o addirittura lo elimini. Se invece deriva da altri siti allora c'è poco da fare.

      Elimina

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.