Home Guide CSS: Usare i blocchi flottanti.

CSS: Usare i blocchi flottanti.

Nell’organizzazione del  layout di una pagina web, per avere ogni cosa al suo posto, è necessario ricorrere a tutta una serie di accorgimenti tecnici e “trucchi”. Anni fa, agli albori del webdesign, si usava “ingabbiare il tutto” sfruttando le tabelle. Il risultato ottenuto era abbastanza stabile sui vari  browser, ma poteva originare non pochi problemi di accessibilità. La diffusione ed evoluzione dei CSS, ha poi reso possibile il difficile connubio tra eleganza e accessibilità,  aprendo a quelle tecniche “tableless” oramai imprescindibili per chi realizza siti web.

A proposito delle straordinarie potenzialità dei CSS, oggi parleremo della proprietà “float”, che consente di posizionare ed affiancare i  nostri div e paragrafi, in maniera anche più semplice che per come facevamo con le tabelle.

Il piccolo esempio che segue la dice lunga su come si possa ottenere un bel risultato in poco tempo grazie ai CSS. Piuttosto che avviare una lunga e accademica dissertazione a riguardo, vi presento la via pratica più veloce per allineare tre contenuti su tre colonne, utilizzando i div e una sola regola css (segue una variante con tre regole).

Partiamo dal codice HTML disponendo i tre div, uno di seguito all’altro ed assegnando a ciascuno la classe che andremo a creare, che nel mio caso ho chiamato “affiancato” (fantasioso, no?)

<div class=”affiancato”>contenuto del div di sinistra</div>

<div class=”affiancato”>contenuto del div di centro</div>

<div class=”affiancato”>contenuto del div di destra</div>

Ora è il momento dello stile. Per comodità e velocità incorporiamo lo stile nella pagina stessa. A tal proposito, incolliamo questo codice nell’header del sito (tra i tag <head></head>)

<style>

.affiancato{float:left;width:30%;}

</style>

Bene! Così facendo i nostri contenuti si disporranno su tre colonne.

Nel caso in cui fosse importante differenziare la formattazione dei tre contenuti, non dovremo far altro che “clonare” la pseudoclasse due volte e rinominarla, ottenendo così le regole per i tre distinti livelli, che in questo caso chiameremo, con grande sforzo di fantasia “sinistra”, “centro”e “destra”, successivamente imposteremo un diverso colore di sfondo per ciascun livello, come si vede del codice css di seguito.

.destra{ float:left; width:30%; background-color: red; }

.sinistra{ float:left; width:30%; background-color: green; }

.sinistra{ float:left; width:30%; background-color: fuchsia; }

Ovviamente sarà necessario che ciascun div richiami la propria classe. Ed allora avremo:

[spoiler show=”Mostra codice HTML” hide=”Nascondi codice HTML”]<div class=”sinistra”>contenuto del div di sinistra</div><div  class=”centro”>contenuto del div di centro</div><div  class=”destra”>contenuto del div di destra</div>

[/spoiler]

il risultato Non resta che personalizzare il tutto secondo le nostre necessità, sfruttando questa struttura come scheletro per delle inclusioni di files esterni o…vedete voi cosa fare…

Per oggi è tutto.

Alla prossima!

Luigi Lacquaniti
Web designer freelance.

1 commento

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here

Ultime dal Blog

Netflix: ufficiale l’aumento dei prezzi sui piani Standard (HD) e Premium (UHD)

Era un rumors quasi certo, ed è stato alla fine ufficializzato: Netflix ha aumentato i prezzi su due dei tre piani sottoscrivibili. I piani Standard...

Google Maps: ora visibile anche il tachimetro mentre si guida

Da qualche settimana il famoso navigatore made in Google sta (finalmente) implementando delle funzioni prese in prestito dal suo fratellino Waze. Dopo aver visto...

Mounty: ed i dischi NTFS non sono più un tabù su MacOS

Chi possiede un Mac da diversi anni sa bene quanto sia poco intuitivo ed immediato poter scrivere su un disco esterno in formato NTFS. Il...

Tor Browser: la prima versione stabile è disponibile per Android

Tor, per chi non lo conoscesse, è un sistema di reti che permette di navigare nel web restando completamente anonimi e senza essere tracciati...

Share Mouse: controlla più computer usando un solo mouse

Oggi vi parleremo di Share Mouse, software veramente utile che vi permetterà di poter controllare più computer, usando un solo mouse e una sola...