[CSS]Max-width

[kwb]

Ciao a tutti!
Mi è sorto un dubbio sulle proprietà max/min - width/height .
Facciamo un esempio.
Partiamo da questo div largo 960px, ma scritto in percentuale per rendere fluido il design:

div{ width: 93.75%; /* 960px / 1024px = 0.9375 */}


Aggiungo i padding ( 10px ), quindi li sottraggo dalla larghezza totale:

div{
padding: 0 1.041666667%; /* 10px/960px */
width: 91.666666666%; /* 93.75% - paddingLeft - paddingRight */
}


Ora però se voglio usare max-width, la dicitura corretta è:

div{
padding: 0 1.041666667%; /* 10px/960px */
width: 91.666666666%; /* 93.75% - paddingLeft - paddingRight */
max-width: 960px;
}

Oppure:

div{
padding: 0 1.041666667%; /* 10px/960px */
width: 91.666666666%; /* 93.75% - paddingLeft - paddingRight */
max-width: 940px;
}


Non ho mai capito se questa istruzione tiene già conto dei padding/margini vari ( primo caso ) oppure devo tenerne conto io ( secondo caso ).

EDIT: Ho trovato scritto in giro: Note: The max-width property does not include padding, borders, or margins! ma non capisco se significa che devo tenerne conto io ( quindi scrivere 940px nel mio caso ) oppure no

[wingman87]

Guarda l'immagine del box model in questa pagina:
http://www.w3schools.com/css/css_boxmodel.asp
le proprietà width, height, max-width, max-height si riferiscono solo al content.

In css3 è presente la proprietà box-sizing che permette di scegliere che queste proprietà si riferiscano alla larghezza/altezza del box compreso il padding e il border.
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
In particolare:
box-sizing: content-box;
valore predefinito -> width, height, max-width, max-height si riferiscono solo al content

box-sizing: border-box;
-> width, height, max-width, max-height si riferiscono a content + padding + border

[kwb]

Hmm, ok!
Preferisco non fare ancora uso dei CSS3 su alcune cose perchè ancora non completamente supportato ( vedi il fatto che devi usare delle istruzioni diverse per FF e Safari per il box-model ).

Quindi, visto ciò che mi hai detto, temo dovrò rimodificarmi tutti i max-width messi, sottraendo padding e margini vari :muro:

[bobosg]

ciao,
ti sconsiglio l'uso della proprietà box-sizing perchè attualmente è pienamente supportata solo da firefox.

vedendo la composizione del box-model non c'è bisogno che ti dica altro su margin, padding e width

piuttosto mi chiedevo come mai avessi fatto la larghezza in percentuale e il max-width in px
cioè se vuoi rendere fluido il design (come dici tu) non dovresti dargli un max-width in px

[kwb]

ciao,
ti sconsiglio l'uso della proprietà box-sizing perchè attualmente è pienamente supportata solo da firefox.

vedendo la composizione del box-model non c'è bisogno che ti dica altro su margin, padding e width
Si ma infatti non c'ho nemmeno pensato. Non ho intenzione di mettermi a scrivere istruzioni diverse per fare la stessa cosa :muro:


piuttosto mi chiedevo come mai avessi fatto la larghezza in percentuale e il max-width in px
cioè se vuoi rendere fluido il design (come dici tu) non dovresti dargli un max-width in px
Il design è fluido anche così, perchè margini e padding sono tutti in percentuale, e l'interfaccia è stata sviluppata per essere meglio visualizzata su 1024px ( questa è la ragione dei 960px ). Semplicemente se ho uno schermo più grosso mi arriva massimo fino a 960 conservando la struttura.
Inoltre alcuni elementi sono costretto a darli in px ( ad esempio un'immagine che uso da bg diciamo non si deve ripetere e deve occupare tutta l'area per orizzontale, quindi è chiaro che sono costretto a dare una grandezza massima in px ).

In realtà l'interfaccia è stata sviluppata per essere adattabile a scalare verso il basso, nel senso, anche a risoluzioni minori ( 800x600, 768x1024 ). :)

[bobosg]

ok, quindi è un design fluido a meno di 960px