Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Div con scrollbar e cornici con i CSS

Sfruttare al meglio la proprietà overflow.
Sfruttare al meglio la proprietà overflow.
Link copiato negli appunti

Per questioni di design a volte uno spazio limitato in verticale è una soluzione accettabile,
e perché no, auspicabile se si riesce a sfruttare im maniera adeguata. In questo articolo vedremo
come sfruttare un'altezza limitata grazie all'uso delle scrollbar e in particolare
grazie alla proprietà CSS overflow.

Questa proprietà, forse poco conosciuta, stabilisce come un contenitore si deve comportare
se il suo contenuto eccede le sue dimensioni orizzontali e/o verticali. Impostando i valori di overflow stabiliamo i diversi comportamenti:

Valore Comportamento
hidden il contenuto che "sconfina" verrà tagliato.
visible si forza il contenitore a rendere il contenuto anche se sborda.
auto aggiungerà le scrollbar orizzontale e/o verticale solo se necessario.
scroll mostrerà le scrollbar in ogni caso.

Con overflow impostato su auto, insieme a larghezza e/o altezza esplicita otterremo facilmente elementi di pagina con scrollbar. Vediamo subito il primo esempio, in cui un div che contiene diversi paragrafi viene reso con una scrollbar verticale.

L'HTML è molto semplice:

<div class="box">
il contenuto qui
</div>

Basterà attribuire la classe "box" al div cui vogliamo dare un'altezza prestabilita e le scrollbar.

Ora passiamo al CSS, che è piuttosto semplice. È necessario fare due piccole somme: nel caso dell'esempio si vuole ottenere un div quadrato di lato di 200 pixel totali, bordi e padding inclusi. Ricordo che le dimensioni CSS width e height si riferiscono secondo le specifiche infatti solo all'area utile al contenuto.

Usando un padding sui due lati pari a 4 px, e un bordo di un pixel solo sul lato sinistro,
la larghezza orizzontale (width) dovrà essere 191 pixel (ovvero 200-4-4-1).

Stesso discorso per l'altezza, tenendo presente che i bordi sono sui due lati in questo caso, ottenendo così una height effettiva pari a 190 pixel.

Specificate quindi dimensioni, bordi e padding non resta quindi che dichiarare l'overflow e un gradiente che si ripete come sfondo. Ecco quindi l'unica regola neccessaria:

div.box
{
 !important; width /**/:200px;
 !important; height /**/: 200px;
padding: 4px;
border:1px solid #EEE; border-right:0 solid;
background:url(gradient.png) repeat-x fixed top left;
overflow:auto
}

Da notare che le prime due dichiarazioni relative a width e height, ovvero quelle seguite da !important vengono servite ai browser moderni e aderenti alle specifiche, mentre le altre due solo a IE5.x. Il nostro esempio è quindi ultimato: rivediamolo.

Box con HTML scrollbar interna

Siamo così pronti a presentare il secondo esempio in cui si ha un box quadrato con una cornice grafica e una scrollbar al suo interno. In questo caso per ottenere l'effetto sono necessari due div come contenitori, ecco l'HTML:

<div class="box">
<div class="box-inner">
il contenuto qui
</div>
</div>

Al div con classe "box" verrà infatti attribuita la grafica, mentre a quello più interno con classe "box-inner" verrà attribuita la scrollbar. In questo caso non è necessario l'uso del box model hack, e il CSS è piuttosto semplice, vediamolo per intero:

div.box
{
; ;
background:url(boxbk.png) no-repeat top left;
padding:1px 0;
font-size:10px
}
div.box-inner
{
;
overflow:auto;
margin:25px 24px 0;
padding-right:2px
}

Da evidenziare che il padding verticale di 1px sul div class="box" è necessario per contenere i margini verticali del box interno, che infatti avrà il margine superiore (e quelli laterali) per distanziarsi dal suo contenitore. Il padding-right di 2px dichiarato sul div class="box-inner" serve per distanziare un po' la scrollbar. Per ottenere l'esempio è quindi bastata una semplice immagine (ovviamente potrete sbizzarrirvi con forme e colori) e due semplici regole CSS.

Codice e immagini sono disponibili per il download. Alla prossima.

Box model hack

Benché siano molto datate e poco utilizzate, le versioni di Internet Explorer 5.0 e 5.5 possono dare problemi di box model quando si lavora con altezze e larghezze impostate con bordi e padding.


Ti consigliamo anche