Gestione delle dimensioni: larghezza | Guida CSS

Gestione delle=20 dimensioni: larghezza

La definizione della larghezza e pi=F9 in generale la = formattazione=20 orizzontale degli elementi sono pi=F9 problematiche rispetto = all'altezza e alla formattazione verticale. A questo punto = =E8 utile=20 richiamare alla mente i concetti visti per il box model e = ribadire a=20 cosa si riferiscono le propriet=E0 che stiamo per esaminare. =

width

Le dimensioni orizzontali di un elemento sono date dalla=20 combinazione di varie propriet=E0. Un errore macroscopico = =E8 ritenere=20 che esse siano definite semplicemente dalla propriet=E0 = width.=20 In pratica, dovete sempre distinguere tra la larghezza = effettiva di=20 un elemento (i pixel di spazio che occupa sulla pagina) e la = larghezza dell'area del contenuto. La prima =E8 data dalla = somma di=20 questi valori:

margine sinistro + bordo sinistro + = padding sinistro=20 + area del contenuto + padding destro + bordo destro + = margine=20 destro

La seconda =E8 impostata tramite la propriet=E0 = width (si=20 vedano gli esempi gi=E0 visti per il box = model).

E' possibile ovviamente che i due valori coincidano. = Accade=20 quando di un particolare elemento non si impostino margini, = paddding=20 e bordi; o quando il valore di tali propriet=E0 sia uguale a = 0. L'esempio mostra chiaramente questa = situazione. I=20 due box dovrebbero avere la stessa larghezza. Ma se usate = Explorer 5=20 o 5.5 su Windows noterete che non =E8 cos=EC.

E qui introduciamo una questione di rilevanza assoluta = per il=20 semplice fatto che coinvolge il browser attualmente pi=F9 = usato.=20 Explorer per Windows fino alla versione 5.5 interpreta male = il=20 concetto di width. Nel senso che con questa = propriet=E0 intende=20 la larghezza globale dell'elemento, compresi margini, = padding e=20 bordi. Proprio l'errore che prima abbiamo definito = macroscopico! Per=20 chi ha Explorer 6 abbiamo preparato questo documento di esempio che ricalca = e mostra=20 con evidenza l'errore. Se nel documento, infatti, non si usa = nessun=20 DOCTYPE il browser di Microsoft funziona in modalit=E0=20 retro-compatibile, ripetendo bug ed errori dei suoi = predecessori. Un=20 comportamento utile per gli sviluppatori che possono cos=EC = simulare=20 nella versione 6 i comportamenti delle precedenti versioni. =

In questo articolo viene spiegato un = trucchetto utile=20 per correggere l'anomala gestione di width da parte = di=20 Explorer 5.

Fatta questa fondamentale premessa, possiamo analizzare = nei=20 dettagli la propriet=E0.

Sintassi

selettore {width: <valore>;}

Valori

auto. Valore di default. Se non si impostano = margini,=20 bordi e padding la larghezza dell'elemento sar=E0 uguale = all'area=20 del contenuto dell'elemento contenitore.=20
un valore numerico con unit=E0 di misura.=20
un valore in percentuale. La larghezza sar=E0 = calcolata=20 rispetto a quella dell'elemento contenitore.

La propriet=E0 width non =E8 ereditata.

Esempi

p {width: 90px;}
div.box {width: = 50%;}

Per verificare il funzionamento delle varie impostazioni = avete a=20 disposizione la consueta pagina con codice e commenti.=20 L'avvertenza speciale =E8 per i possessori di Explorer 5/5.5 = su=20 Windows: testate il documento con Mozilla o Opera per = apprezzare la=20 resa corretta degli esempi. Quello che vedrete voi non =E8 = sempre la=20 cosa giusta.

min-width

Imposta la larghezza minima di un elemento. Si applica a = tutti=20 gli elementi tranne che a quelli in linea non rimpiazzati e = agli=20 elementi di tabelle. Propriet=E0 non supportata da Internet = Explorer e=20 non ereditata.

Sintassi

selettore { min-width: <valore>; = }

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale. La larghezza sar=E0 = come minimo=20 quella espressa dalla percentuale riferita alla larghezza=20 dell'elemento contenitore.

Esempi

div { min-width: 400px; }

Per testare la propriet=E0 usate questa pagina.

max-width

Imposta la larghezza massima di un elemento. Non =E8 = ereditata.

Sintassi

selettore { max-width: <valore>; = }

Valori

none. Valore di default. Non c'=E8 un limite = per=20 larghezza dell'elemento.=20
un valore numerico con unit=E0 di misura.=20
un valore in percentuale

Links

Utili riferimenti agli argomenti trattati nella lezione e = casi di=20 applicazione li trovate negli articoli della sezione PRO = dedicati=20 alla realizzazione di layout con i CSS. Gli articoli sono = corredati=20 di codice, esempi e link a risorse esterne.

Un sito ridimensionabile con i CSS: parte = I.

Un sito ridimensionabile con i CSS: parte = II.

Un sito ridimensionabile con i CSS: parte = III.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =