Distanziare il contenuto dai bordi delle sezioni


Un problema che mi è stato posto molte volte da chi ha modificato il proprio template è come spesso il contenuto di una sezione, come ad esempio il testo di una sidebar, tenda ad attaccarsi troppo ai suoi bordi, con un effetto decisamente poco elegante, come in questo che ho creato apposta:

image

Spesso ha questo problema anche chi cambia magari il colore della colonna laterale o vi inserisce un sfondo: finchè la colonna rimane bianca non si vede questo difetto, ma colorata lo fa saltare subito all’occhio.

Con questo articolo vedremo come gestire questo problema, sia per le colonne.

Individuare il codice

Per prima cosa, dobbiamo individuare il codice della sezione su cui vogliamo intervenire. Nel caso della colonna laterale, nel template Minima (e nella maggior parte dei template in giro), dobbiamo trovare questo:

.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em; 
}

Se invece vogliamo intervenire nella sezione dei post, la porzione di codice comincia con questo:

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;

Alternativamente, potremmo trovare

#sidebar

o

#post

Ogni template è una storia a sè per queste definizioni CSS. Non vi resta che fare varie prove e cercare le porzioni di codice che vi interessano nel vostro specifico template.

Utilizziamo il padding

Una volta individuato il codice relativo alla sezione che ci interessa, per distanziarne il contenuto dai bordi la parola da usare è Padding. Nel caso che abbiamo visto della colonna laterale, ipotizziamo di voler distanziare di 5 pixel il contenuto dal bordo:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em; 
padding: 5px;
}

Ecco l’effetto ottenuto:

image

Rispetto alla prima immagine, le parole sono staccate dal bordo nero. Lo spazio è di 5px in tutte le direzioni. Padding però accetta anche quattro parametri invece di uno solo, nel caso in cui volessimo indicare diverse distanze nei vari lati. Per esempio:

.sidebar {
color: $sidebartextcolor;
line-height: 1.5em; 
padding: 0px 10px 20px 50px;
}

I quattro valori indicano rispettivamente:

  1. lo spazio da lasciare sopra
  2. lo spazio da lasciare a destra
  3. lo spazio da lasciare sotto
  4. lo spazio da lasciare a sinistra

Utilizzando questo esempio, ecco cosa si ottiene:

image

E’ anche possibile indicare un padding specifico in una singola direzione, invece del comando generico:

  • padding-top: permette di indicare lo spazio da lasciare sopra
  • padding-left: permette di indicare lo spazio da lasciare a sinistra
  • padding-bottom: permette di indicare lo spazio da lasciare sotto
  • padding-right: permette di indicare lo spazio da lasciare a destra

Come sempre, la cosa migliore da fare per acquisire i meccanismi è provare e riprovare. Per qualsiasi chiarimento, lasciatemi un commento.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su 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!

17 commenti:

Mr.Nessuno ha detto...

Ottimo come al solito, non mi serve, ma, sempre utile sapere che hai scritto un post su come risolvere il problema.
Ciao Tenebrae

Vinnie ha detto...

Ottimo come sempre. Mi sarebbe tornato utile per il primo template che ho utilizzato.

Nel vostro account AdSense è apparso AdSense per i domini? A quanto pare esiste già da circa un anno (ma a me è stato aggiunto solo stasera).In breve da quello che ho capito, serve a monetizzare domini (attivi ma senza contenuti) e nella pagina di questo spazio web vengono visualizzati annunci AdSense con lo stesso sistema di guadagno pay to click. Leggendo su internet alcuni post lo hanno tutt' altro che osannato, altri invece confermano che è sempre un qualcosa in più per incrementare la monetizzazione. Che ne pensate?

Dany ha detto...

Utilissimo, era proprio una cosa che non mi piaceva. GRAZIE
Sono riuscita a metterlo sia nei post che nel sidebar, ma non nel sidebar dove ho i banner come mai?
ciao

Gessica ha detto...

Grazie Tenebrae!!!!
Sai che spettavo con ansia questo post!!
Oggi mi ci metto, così finalmente potrò cambiare faccia al mio blog!!!
Grazzzzzzisssssimo.

Monica ha detto...

qui non si finisce mai di imparare! Grazie Orazio :)
Ma si può fare la stessa modifica anche sui singoli gadget che si mettono nella sidebar?
Ad esempio io ho sostituito i titoli delle varie sezioni con delle immagini ma mi paicerebbe regolarne le distanze

Anonimo ha detto...

Grazie, era proprio quello che cercavo! Fantastico!

gancjo ha detto...

Grazie Tenebrae, come al slito il post giusto al momento giusto. Ottimo lavoro. Ciao, gancjo.

Anonimo ha detto...

Tenebrae ti ho mandato una mail, devo sempre risolvere il problema del restrinzione dei post...

Circuito Cinema Bologna ha detto...

Non ho più complimenti da farti, nel lugo lavoro dei blog del circuito cinema bologna ho messo il bannerino, in http://fantatrailer.blogspot.com

Circuito Cinema Bologna ha detto...

Per quanto riguarda i commenti, quando apro un post, dove devo mettere il padding, perche sarebbe da aggiustare pure quello.Ciao Sandro

chienkiri ha detto...

ciao scusa ma ho seguito al dettaglio il distanziamento per i post e qui tutto ok, quando seguo i tips per le sidebars non succede nulla :(

ELENA ha detto...
Questo commento è stato eliminato dall'autore.
Dany ha detto...

Ciao e grazie per le tue spiegazioni sempre molto utili
sono riuscita ad usare i padding in varie situazioni, ma non riesco a risolverne una,
ho inserito la firma nei post, ma rimane troppo distanziata, non riesco a capire dove devo inserire i padding per alzarla, mi aiuti per favore.
Grazie ciao

ambramelly ha detto...

a me non funzionaaaaa come mai??
aiutooooooooooo

batu ha detto...

Ciao, grazie i tuoi consigli sono stati utilissimi per la "ristrutturazione" del mio blog.

Ho riscontrato però un problema nello spostare il titolo del blog e relativa descrizione.
Sono riuscita ad inserire un immagine a fianco al titolo la quest ultimo resta sempre in basso mentre vorrei spostarlo più centralmente...come fare? grazie!

elcapellone ha detto...

carissima monica per spaziare i gadget devi fare questa procedura che questo scopiazzone non sa.
cerca la stringa:
.sidebar .widget, .main .widget {
}
aggiungi sotto questi due valori:
margin:0 0 1.5em;
padding:0 0 1.5em;
così:
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
padding:0 0 1.5em;
}



che naturalmente pui cambiare i valori a piacere tuo intervenendo su il numero 1 e 5

Tenebrae ha detto...

@elcapellone: bravo, hai fatto la rima: scopiazzone, elcapellone... ma lo sai che sei un bell'anonimone? a parte il tuo savuar fair, grazie per aver suggerito la soluzione al problema

i commenti ai post sono decine ogni giorno e sono costretto per motivi di tempo a concentrarmi sui più recenti - e questo post è di un anno fa

x monica: il consiglio del gentleman è valido


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.