Gli angoli arrotondati su box e div sono da sempre uno degli argomenti più seguiti, e già altre volte ne abbiamo parlato su HTML.it. Presenteremo qui una tecnica semplice, leggera e robusta per avere un numero arbitrario di box affiancati della stessa altezza con angoli arrotondati, usando un'unica immagine e poche regole CSS. Ecco una piccola anteprima dell'esempio che passo passo andremo a realizzare.
Esempio di base
Vediamo subito l'esempio di base che è il punto di partenza della tecnica. Ecco il codice HTML:
<div class="modular">
<div>
Il contenuto qui
</div>
</div>
Due parole di commento sul markup. Nell'esempio abbiamo
un elemento con angoli arrotondati che ha larghezza fissa ma si adatta, in altezza, al
contenuto: vi basta ridimensionare il testo del browser per notarlo. In questi casi sono
necessari due agganci grafici, uno per la parte superiore e uno per quella inferiore:
da qui l'uso di due div annidati. Prima di procedere
con il CSS, diamo uno sguardo all'unica immagine utilizzata, larga 180 pixel e alta 500. Ed
è circa 500 px l'altezza massima degli elementi che questa immagine può supportare.
Ora il CSS, che è molto semplice. Al div esterno viene attribuita la larghezza,
la parte inferiore dell'immagine e un padding inferiore così da lasciarle spazio:
div.modular{width:180px;
background:url(boxBk.png) no-repeat bottom left;
padding-bottom:15px}
Al div interno viene assegnata la parte superiore dell'immagine, un padding laterale
e superiore:
div.modular div{
background:url(boxBk.png) repeat-x top left;
padding:15px 15px 0}
L'esempio è così ultimato. A questo punto possiamo
procedere a estendere l'idea realizzando elementi affiancati.
Angoli arrotondati modulari
Cosa dovremo fare se volessimo estendere l'esempio appena visto in modo da contenere
due, tre o quattro div affiancati, ciascuno con bordi arrotondati e della stessa altezza?
Le cose sono abbastanza semplici in realtà: ecco il secondo esempio,
in cui troviamo un elemento singolo e due, tre quattro elementi affiancati. Ecco il codice HTML:
<div class="modular m4">
<div>Primo elemento di quattro</div>
<div>Secondo elemento di quattro</div>
<div>Terzo elemento di quattro</div>
<div>Quarto elemento di quattro</div>
</div>
<div class="modular m3">
<div>Primo elemento di tre</div>
<div>Secondo elemento di tre</div>
<div>Terzo elemento di tre</div>
</div>
<div class="modular m2">
<div>Primo elemento di due</div>
<div>Secondo elemento di due</div>
</div>
<div class="modular m1">
<div>Elemento unico</div>
</div>
Da notare che nell'esempio ciascun modulo (o riga che dir si voglia)
di elementi è racchiusa in un div del tipo div class="modular mX", dove X rappresenta proprio il numero di elementi
che contiene: ad esempio la classe "m4" verrà attribuita ai div che contengono quattro elementi.
Questo approccio di classi multiple ci consente di avere un CSS snello e
molta flessibilità.
Anche in questo caso si è usata un'unica immagine, che è la
stessa dell'esempio precedente. Siamo ora pronti a procedere con il CSS.
Per prima cosa ci sono alcune cose da considerare. Per poter affiancare gli elementi interni
dell'esempio bisognerà renderli float e, dato che vorremo
poter dar l'impressione che abbiano tutti la stessa altezza, l'unico aggancio grafico
utile è il div esterno che li racchiude, e dovrà quindi "contenerli" anche visivamente.
Per forzare il div esterno a contenere i singoli elementi, useremo la tecnica Simple Clearing
of floats di cui ho parlato nell'articolo Float - teoria e pratica.
In sostanza, basterà assegnare la larghezza e la proprietà overflow, impostata sul valore hidden.
Le classi m1, m2, m3 ed m4 servono appunto per specificare le varie larghezze
a seconda del numero di elementi interni: dato che un div interno è largo
180 pixel totali, le dimensioni saranno rispettivamente 180, 360, 540 e 720 pixel.
Una volta contenuti i float, basterà quindi ripetere per tutta la larghezza del div
esterno l'immagine di sfondo sulla parte inferiore e specificare un padding
così da lasciarle spazio. Ecco le regole:
div.modular{oveflow: hidden;
background: url(boxBk.png) repeat-x bottom left;
padding-bottom: 15px;margin-bottom: 10px}
div.m1{width: 180px}
div.m2{width: 360px}
div.m3{width: 540px}
div.m4{width: 720px}
Ora i div interni: verranno resi float, con larghezza esplicita e ciascuno
di essi avrà la parte superiore dell'immagine, insieme a un padding superiore
e laterale. Per poter garantire una resa consistente e cross-browser ed evitare
di incorrere nei problemi di box model di IE5 e IE5.5,
useremo il simplified box model hack di cui ho parlato qui sul blog. Ecco quindi la regola:
div.modular div{
float: left;width:150px !important; width /**/:180px;
background:url(boxBk.png) repeat-x top left;
padding:15px 15px 0}
Il nostro esempio è così ultimato: sono bastate poche regole CSS, l'uso di
classi multiple e una sola immagine per avere una buona flessibilità e compatibilità. Gli esempi
sono stati testati con successo su Internet Explorer dalla versione 5 alla 7 e le ultime versione
di Opera, Firefox e Safari. Codice e immagini sono disponibili per il download. Alla prossima.
