Gestire la distanza tra gli elementi in un template di Blogger

E' da un po' di tempo che non pubblico articoli su come personalizzare un template di Blogger, e nel frattempo si sono accumulate mail che da una parte mi chiedevano di continuare, dall'altra mi proponevano nuove domande. E' quindi il momento di riprendere le "lezioni", assicurandovi già fin da ora che cercherò di pubblicare un articolo a settimana sull'argomento, in maniera tale da poter arrivare presto a dare i mezzi, a chi volesse, di cimentarsi nella creazione del proprio template.

In particolare dopo l'ultimo articolo su come aggiungere la terza colonna nel template, molti mi hanno fatto notare come la terza colonna potesse risultare troppo attaccatta alla seconda, o alla colonna dei post.

Vediamo come distanziarle.

Abbiamo già visto i due gruppi di informazioni principali riguardo un elemento del template: la sua formattazione CSS (cioè lo "stile" di ogni elemento) e il suo codice html (che letteralmente stabilisce la posizione nel template). Nel precedente post, abbiamo aggiunto la terza colonna aggiungendo due porzioni di codice:

#new-sidebar-wrapper {   width: 220px;   float: $endSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */ }

e

<div id='new-sidebar-wrapper'>         <b:section class='sidebar' id='sidebar2' preferred='yes'>         </b:section> </div>

che rappresentano rispettivamente lo stile della colonna e l'elemento html che verrà visualizzato (id='new-sidebar-wrapper' indica che per questo elemento verrà utilizzato lo stile che si chiama "new-siderbar-wrapper").

Modificando il primo gruppo di righe, arriveremo al nostro obiettivo. La parola chiave per il CSS è margin:

#new-sidebar-wrapper {   width: 220px;   float: $endSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   margin: 10px; }

Aggiungendo questa riga, verrà lasciato un margine di 10px tutt'intorno alla sidebar (cioè a sinistra, sopra, a destra, sotto). Ipotizzando di riprendere le modifiche da come le avevamo lasciate nell'ultimo post, dovreste passare da così:

 

a così:

 

Come si vede è stato lasciato un margine (di 10 pixel appunto) tutt'intorno alla nuova colonna laterale che abbiamo aggiunto, e questa, oltre che spostarsi a sinistra, si è anche spostata di sotto.

In effetti, non è necessario applicare il margine a tutti i lati della sidebar. Possiamo scegliere il lato usando queste parole chiave:

• margin-left (margine a sinistra)
• margin-top (margine sopra)
• margin-bottom (margine sotto)
• margin-right (margine a destra)

Ovviamente è possibile anche fare combinazioni. Ad esempio, se volessimo lasciare un margine di 10px a sinistra e uno di 15px sopra, possiamo scrivere:

#new-sidebar-wrapper {   width: 220px;   float: $endSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   margin-left: 10px;   margin-top: 15px; }

Ottenendo quest'effetto:

Che rispetto alla seconda immagine, è ancora più sotto di 5 pixel.

E' possibile indicare le varie direzioni dando quattro parametri alla parola margin, ed esattamente:

margin <top> <right> <bottom> <left>;

dove

• <top> è lo spazio che vogliamo lasciare sopra
• <right> lo spazio che vogliamo lasciare a destra
• <bottom> lo spazio da lasciare sotto
• <left> quello da lasciare a sinistra

Possiamo quindi ripetere l'esempio di sopra con una sola riga:

#new-sidebar-wrapper {   width: 220px;   float: $endSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   margin: 15px 0px 0px 10px; }

sostituendo i valori per top e left nella posizione opportuna lasciando a 0 gli altri.

Per risolvere il problema che hanno avuto tanti, e cioè distanziare la terza colonna dalla seconda, basta semplicemente usare questo codice:

#new-sidebar-wrapper {   width: 220px;   float: $endSide;   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */   overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */   margin-left: 10px;  }

per ottenere quest'effetto:

Può darsi che nei vostri template la parola margin sia già usata dai vari elementi, in questo caso cambiatene il valore (e i parametri) secondo le vostre esigenze.

Ovviamente tutto questo potete applicarlo alle informazioni CSS di qualsiasi altro elemento del blog: outer-wrapper, main-wrapper, content-wrapper e tutti gli altri che avete nel vostro template.

Per qualsiasi dubbio, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!