Guida Tecniche di design: layout e livelli

[Dade.]

Proviamo adesso a costruire lo stesso layout della lezione precedente

Perfavore, Entra oppure Registrati per vedere i Link!

​

senza l'utilizzo della tabelle ma col solo utilizzo dei livelli e dei CSS, allo scopo di favorire la velocità di caricamento e l'accessibilità della pagina.Proviamo quindi a costruire, con solo codice CSS, il layout mostrato nell'immagine precedente. Di seguito un esempio di codice, commentato esplicitamente in seguito.
Iniziamo dal codice HTML:

Perfavore, Entra oppure Registrati per vedere i codici!

Nulla di più e nulla di meno di una semplice pagina HTML con una serie di layer con degli ID, i cui nomi sono abbastanza esplicativi in merito alla funzione che svolgono ed ai contenuti che mostreranno a video sulla pagina. L'aspetto di questa pagina HTML, senza CSS, è il seguente:

Creiamo quindi il file style.css, che abbiamo richiamato nel codice HTML appena mostrato, ed inseriamo il seguente codice corredato da opportuni commenti:

Perfavore, Entra oppure Registrati per vedere i codici!

La pagina HTML, a questo punto, acquisterà il seguente aspetto:

Ovviamente è necessario conoscere i

Perfavore, Entra oppure Registrati per vedere i Link!

al fine di capire il codice utilizzato, soprattutto per sapere come è possibile affiancare due DIV, dato che, per default, i DIV vanno a capo automaticamente. A risolvere questo problema è il comando CSS float che, impostato su Left, garantisce che due DIV vadano affiancati. E' poi necessario stabilirne oculatamente le dimensioni.

Guida tratta da MrWebmaster