Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 30 di 41
  • livello principiante
Indice lezioni

Una variante del layout con posizionamenti assoluti

Usare un bordo spesso per separare le colonne
Usare un bordo spesso per separare le colonne
Link copiato negli appunti

Abbiamo già visto come ottenere le due colonne laterali in tinta: si assegna
un colore al container e il bianco al div principale. Il risultato è che le colonne
laterali danno l'impressione di estendersi fino al footer, dato che è la colonna
centrare a consentire il flusso di elementi.

Finora, inoltre, abbiamo visto che la soluzione per distanziare la colonna
centrale dai lati della finestra è aggiungere i margini, in modo da lasciare spazio
per il posizionamento delle colonne centrali. L'idea alternativa è abbastanza
semplice: usare un bordo spesso quanto i margini. Ecco le regole necessarie alla
colonna centrale (il resto rimane invariato):

div#content{
    border-style:solid;
    border-;
    border-color:#000 #BDDEFF #000 #C3FFFF;
    padding: 1em 10px
    }

I bordi spessi hanno due funzioni: separare la colonna centrale per fare spazio
a quelle laterali (sostituendo quindi i margini) e dare un colore alle due colonne
secondarie. Ecco il
risultato
. Semplice vero? Ci sono due questioni però riguardo a questo layout.
La prima è che Internet Explorer 5.x e 6 danno problemi di allineamento del testo
del footer nel caso in cui i bordi spessi non siano larghi uguali: per
qualche strano motivo sembra che il testo del footer soffra di una "traslazione
laterale opposta" pari alla diffenza di larghezza dei due bordi.

È per questo che non ho proposto una variante con bordo spesso per il
layout a due colonne, dato che la traslazione del testo del footer è proprio pari
alla colonna secondaria. Sul layout a tre colonne, se i due bordi spessi sono
larghi uguali non c'è problema: questi possono essere dimensionati in pixel, oppure
in em per avere colonne laterali elastiche.
La seconda questione è che mentre il background-color o le immagini di background
non vengono stampate di default dai browsers, i bordi sì. Per ovviare a questo
ci sono diverse possibili soluzioni, che comunque comportano lo specificare di
un foglio di stile per la stampa.

Scarica l'esempio zip di questa lezione


Ti consigliamo anche