Ciao a tutti!

Oggi iniziamo a vedere come fare il layout in CSS.

Un tipo di layout abbastanza semplice da realizzare è quello centrato, ovvero una colonna posta al centro della vostra pagina.

Prima di passare al codice dobbiamo chiarire bene la differenza tra layout fisso e layout fluido.

Per layout fisso si intende uno stile in cui gli elementi della pagina sono definiti con delle dimensioni espresse in pixel, soprattutto rispetto alla loro larghezza (più che all’altezza).

Al contrario per layout fluido si intende uno stile in cui si utilizza una dimensione percentuale degli elementi. Per fare un’esempio, se dicessi che un <div> ha una width di 1000 px questo farebbe pensare a un layout fisso; se invece la width fosse 80% allora avremmo un layout fluido.

Per centrare una colonna è importante ricordarsi che il margine è un nostro caro amico! 🙂 Non si deve scrivere “center” o “align” o cose del genere, ma bisogna agire sul margine destro e sinistro impostando entrambi al valore “auto”.

Qui sotto trovare un esempio di layout fisso centrato. Notate come la dimensione della colonna centrale non cambia anche se modificate la dimensione della finestra del vostro browser! ! !


1

Qui sotto invece trovate un esempio di layout fluido centrato. Notate come la colonna si adatti bene alla dimensione disponibile della finestra.


1

Prima di concludere questo articolo è bene vedere altre due proprietà CSS molto utili per il layout. La prima è max-width e la seconda è min-width.

La proprietà max-width viene generalmente utilizzata con una dimensione in pixel. Questa viene adottata per impostare la dimensione massima in larghezza di una data colonna del nostro layout.

Se ad esempio mettessimo una max-width di 800 px e la dimensione utile della finestra del browser fosse 2000 px, allora la colonna potrebbe al più essere grande 800 px di larghezza (e non oltre 800 è il valore massimo).

Se invece la dimensione della finestra del browser fosse di 400 px, allora la colonna occuperebbe tutti i 400 px disponibili di larghezza (a meno che non vi fossero altre proprietà CSS a dire il contrario).

Vediamo qui sotto un esempio dell’uso di max-width! Notate come la colonna si adatti bene anche qualora lo schermo fosse piccolo.


1

In taluni casi si ha bisogno di avere una colonna non troppo piccola. In altre parole, sappiamo qual è la dimensione minima possibile per un dato elemento. Ecco, in questi casi ci viene in aiuto la proprietà min-width che viene di norma utilizzata in coppia con una width percentuale.

Qui sotto trovate un esempio di utilizzo di min-width associata ad una colonna la cui width è pari a 80%. Quello che il CSS dice è che di norma la colonna deve essere larga 80% della dimensione utile disponibile, tuttavia anche qualora lo spazio disponibile fosse ridotto, la colonna non potrebbe essere più stretta di 400 px.


1

Buon halloween a tutti! 🙂




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.