Nell'articolo Margini negativi abbiamo esplorato
alcune potenzialità dei margini negativi orizzontali combinati
con la proprietà float. In questo appuntamento vedremo un altro
possibile uso dei margini negativi che si rivela molto utile
e pratico: i margini espandibili.
Margini espandibili: un caso molto speciale
L'uso dei margini negativi che faremo in questo articolo
è facilmente riassumibile nel seguente paragrafo:
L'effetto dei margini orizzontali su elementi block-level
che non siano float, né posizionati negativamente e che non
abbiano dimensioni esplicite, è quello di modificarne le dimensioni.
In particolare, margini orizzontali positivi restringeranno tali
elementi, mentre margini orizzontali negativi avranno l'effetto
di espandere l'elemento a cui sono applicati.
Focalizzeremo l'attenzione in particolare su quest'ultimo
caso, attraversando le basi teoriche per arrivare ad un semplice
esempio che potrà fornire
un buon punto di partenza per l'uso di questa versatile tecnica.
Le basi dell'esempio
Eccoci dunque all'esempio: si
tratta di un semplice div a larghezza fissa con angoli arrotondati,
e al suo interno un paragrafo e un titolo.
Per quanto riguarda la grafica, l'esempio
usa semplicemente questa immagine di sfondo,
larga 400 e alta 500 pixel. L'utilizzo di una sola immagine ha alcuni vantaggi,
tra cui una semplicità e una leggerezza in termini di peso, ma presenta anche
un vincolo intrinseco sull'altezza dell'elemento a cui verrà applicata, che
dovrà essere 500px al massimo o poco più; per piccole sezioni di testo si rivela comunque
un buon approccio. Ecco uno screenshot dell'esempio:
A questo punto procediamo con il markup dell'esempio,
che è piuttosto semplice:
<div class="box">
<h2>Titolo del box</h2>
<p>Contenuto del box</p>
</div>
Il CSS dell'esempio
Siamo pronti a procedere con il CSS.
Per prima cosa si dovrà attribuire la porzione inferiore dell'immagine di sfondo al
div class="box", unitamente a un padding inferiore di 20px (così
da lasciar posto per gli angoli arrotondati) e un padding laterale di 20px,
tale da separare il contenuto dai suoi estremi laterali.
Da notare che per avere una consistenza per quanto riguarda il box model e sistemare la
resa su IE5.x, dato che dichiareremo oltre al padding orizzontale anche la larghezza
utile al contenuto, è necessario fare affidamento al box model hack, e in particolare
alla tecnica presentata in Box model e workaround sul blog.
Il nostro div avrà una larghezza utile al contenuto di 360px
e un padding laterale di 20px: una larghezza totale quindi di 400px, pari proprio
alla larghezza dell'immagine di sfondo. Eccoci quindi alla regola CSS completa
per quanto riguarda il div contenitore:
div.box{
width:360px !important; /*IE6 e browser moderni*/
width /**/: 400px; /*IE5.0 e IE5.5*/
padding: 0 20px 20px;
background: #C7DDFF url(boxbk.png) no-repeat bottom left;
}
Siamo arrivati alla parte centrale dell'esempio,
ovvero quella che riguarda i margini espandibili. Attribuendo il padding laterale sul
div contenitore abbiamo distanziato dai suoi estremi laterali tutti gli elementi
al suo interno. Ciò si rivela molto pratico, dato che non dovremo più preoccuparci
di margini e/o padding orizzontali degli elementi al suo interno.
Quello che vorremmo, però, è recuperare il padding orizzontale del div
per poter attribuire al titolo h2 la parte superiore dell'immagine di sfondo conferendo
quindi la continuità grafica necessaria per gli angoli arrotondati.
Per far ciò basterà quindi espandere il titolo h2 attraverso i margini
negativi orizzontali (senza specificarne le dimensioni mi raccomando!) per poi attribuire
anche a questo elemento un padding laterale tale da allineare la larghezza apparente
con quella degli altri elementi. La seguente immagine, che mostra il comportamento
ad uno dei due lati del titolo, aiuterà nella comprensione dell'implementazione:
Stesso discorso anche per il lato destro del titolo, che ha anch'esso un margine
orizzontale negativo di -20px, con conseguente effetto di allargare il titolo
su entrambi i lati e recuperare perfettamente il padding del div contenitore.
Verranno infine attribuiti un padding superiore e la parte superiore dell'immagine di sfondo,
insieme ad alcune regole tipografiche. Ecco la regola CSS per il titolo dell'esempio per intero:
div.box h2{
margin:0 -20px; /* margini espandibili*/
padding: 20px 20px 0;
line-height: 1.2;
font-size: 150%;
color: #627CA7;
background: #C7DDFF url(boxbk.png) no-repeat top left;
}
Il nostro esempio è così ultimato. Sono
bastate due sole regole per avere un elemento con angoli arrotondati e una perfetta
resa cross-browser: è stato infatti testato con successo sulle versioni di Internet
Explorer dalla 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari.
La tecnica dei margini espandibili non si limita al solo utilizzo per gli angoli
arrotondati: in generale è utilizzabile qualora vi sia la necessità di una continuità
grafica o per contrastare il padding di un elemento contenitore. Alcuni approfondimenti si possono trovare in questo esempio
della serie Grafica per blog con i CSS e sul blog
in Margini orizzontali e negativi.
L'esempio dell'articolo è disponibile per il download. Alla prossima.
