- Learn
- Guida Layout dei siti con i CSS
- Una variante del layout con posizionamenti assoluti
Una variante del layout con posizionamenti assoluti
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-width:0 170px;
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
Se vuoi aggiornamenti su Una variante del layout con posizionamenti assoluti inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Open Tracing, per tracciare e comprendere le nostre API
Capire quale passo nelle pipeline sta impiegando troppo tempo, come misurare i ritardi e identificarne i motivi con Open Tracing, […]