In questo articolo sui CSS impagineremo del testo sempre su due colonne, ma "preserveremo" uno spazio che potrebbe esserci utile per inscrivere una immagine o altro.
L' impostazione della pagina rimane sempre la stessa; quello che andremo ad aggiungere è uno spazio in una colonna o, volendo, in entrambe.
Impostazione della pagina
Riporto il codice che ci ha permesso di avere il testo diviso su due colonne, senza ripetermi nel commento dello stesso ma mi soffermerò sulla parte che ci permette di avere il "vuoto".
#container {
width:770px;
margin: 10px auto;
padding:0;
}
.colonna {
width:370px;
padding: 0 5px;
float:left;
margin:0;
text-align:left;
}
.colonna h1{
margin:0;
padding:3px;
font-size:1.5em;
color:#980;
}
p {
padding:3px;
text-align: justify;
line-height:1.6em;
}
Il codice fin qui riportato è quello che abbiamo utilizzato nell' articolo precedente; adesso vediamo quello relativo allo spazio. Premetto subito che si tratta di una semplicissima classe, che chiamerò: .spazio; questo per individuare facilmente i nostri elementi sia nel foglio di stile che nella pagina HTML. Ecco il codice:
.spazio {
width:150px;
height:200px;
padding:5px;
float:right;
}
Il nostro spazio avrà una larghezza pari a 150 px, un' altezza di 200 px, un margine interno (padding) di 5 px e, cosa molto importante, flotterà verso destra; vale a dire che, quando visualizzeremo la pagina finale, avremo un vuoto sul lato destro, ma possiamo scegliere anche a sinista, della colonna nella quale abbiamo deciso di inserirlo. Perchè abbiamo dichiarato una classe? Potremmo volere due "vuoti" nella pagina: o su una stessa colonna oppure su entrambe. Invece di creare due box con ID univoco, le classi ci permettono di essere richiamate quante volte vogliamo all' interno della stessa pagina.
Nessun commento:
Posta un commento