Come promesso eccoci ad analizzare un sito creato da altri, di modo che, facendo il percorso inverso, riusciamo a memorizzare e capire come si riescano a creare certe bellezze di siti. Come questo: Legionarystudio. Bello vero? Ma non fermiamoci solo al suo aspetto esteriore. Guardiamo il suo codice com’è fatto, e per capire meglio puliamolo da tutto ciò che è “contenuto” e lasciamo la “struttura”, che sarà formata da alcuni div con uno specifico “id”.
Eccola:
Commentiamola insieme guardando la struttura schematizzata:
L’intero sito è delimitato da #wrapper, che contiene gli ulteriori div (o box) che lo compongono.
Al suo interno troviamo una #masthead e una #subhead, che come dicono i nomi stessi, sono la testata principale e secondaria.
Successivamente troviamo un #maincontentwrapper e #maincontent, uno dentro l’altro (vedremo poi perchè) che contengono a loro volta i tre box principali che vediamo e che contengono i progetti recenti (#recentprojects), le news (#news) e altre informazioni (#others, al cui interno troviamo #vcard, quella sorta di biglietto da visita che vedete sul sito).
Infine #footerwrapper e #footer, cioè il piè di pagina, anche questi l’uno dentro l’altro, vedremo poi perchè.
In realtà io l’avrei un po’ semplificato, ma non sempre si riesce ad andare a fondo sulle scelte che può fare un designer nell’utilizzo del codice html e css, a volte per ottenere determinati effetti si è costretti ad usare trucchetti, stratagemmi e div contenitori che altri non userebbero e viceversa.
Ecco perchè, nello spiegarvi le informazioni che ci interessano usate nel css per posizionare i vari box, tralascerò le definizioni usate in #maincontentwrapper e #footerwrapper, dato che sono state usate a fini che per ora non ci interessano (e che comunque io non avrei usato).
COME CENTRARE IL LAYOUT ALL’INTERNO DELLA PAGINA
Dovete sapere che non tutti i browsers si comportano allo stesso modo. Internet explorer 5 e minori infatti, nel momento in cui gli diciamo, nel body:
text-align: center;
che come sapete serve a formattare il testo di modo che sia allineato al centro, ebbene Explorer 5 non solo centrava il testo, ma anche tutto il contenuto della pagina, cosa che tecnicamente non è corretta dato che stiamo parlando di “text”. Infatti i browser successivi si sono corretti, attivando la centratura solo per il testo, ma non per tutti gli elementi di pagina (quali appunto div e tabelle).
Come dire allora ai nuovi browser di centrare il nostro div contenitore #wrapper?
Dicendo al nostro #wrapper di usare i margini laterali “automatici” e fissando ovviamente una dimensione di larghezza per lo stesso.
margin-left: auto;
margin-right: auto;
width: 1000px;
altrimenti sintetizzato, dato che gli altri margini sono azzerati:
margin: 0 auto;
width: 1000px;
Chiaramente, a quel punto, dobbiamo dire al nostro browser di ri-allineare il testo, contenuto nel div, a sinistra. E non facciamo altro che dirgli:
text-align: left;
COME POSIZIONARE I BOX ALL’INTERNO DELLA PAGINA?
Sappiate che di default i div si posizionano l’uno sotto l’altro, perciò ecco che non si rende necessario dire ai div #masthead e #subhead di farlo, se non aggiungendo un:
position: relative;
per sicurezza, per dir loro cioè di posizionarsi subito in alto a sinistra dopo la fine del div precedente.
Stessa cosa per il div #maincontent (saltiamo #maincontentwrapper come accennavo), che si posizionerà sotto la subhead.
Al suo interno invece quest’ultimo vediamo che ha tre box: come fare in modo che si posizionino l’uno di fianco all’altro? Con il
float:left;
Stando bene attenti che il width+eventuali margin e padding usati per quei tre box sommati diano esattamente 1000px altrimenti…l’ultimo div finirà inevitabilmente sotto gli altri due. (Questa cosa capita spesso su Explorer 6 nonostante abbiate fatto bene i conti, spiegheremo più in là perchè).
Ci siamo fin qui? Ebbene…
CHIUDIAMO TUTTO CON IL FOOTER
Infine per chiudere tutto con il #footer (anche qui tralasceremo il div ulteriore che il nostro designer ha voluto mettere) non dobbiamo far altro che dirgli:
clear: left;
questo perchè, avendo usato tre box con un float:left; , seppur contenuti in un div contenitore, il nostro div tenterà di posizionarsi nei pressi dell’inizio del box che li contiene, proprio perchè sono tre box “flottanti”. Dicendogli “clear:left” gli diciamo di dimenticare le informazioni riguardo al float e di posizionarsi subito sotto al div che lo precede, quindi il div che contiene i tre blocchi flottanti.
Se avessimo usato un float:right o misto avremmo dovuto usare per il footer un clear:right o addirittura un clear:both.
Per ora terminiamo qui questa lezione, guardate però il css del sito in questione: è un po’ complesso e divide le definizioni di uno stesso box in diversi punti in quanto definisce prima la posizione, poi di seguito tutti gli aspetti o gli sfondi usati. Vi servirà però per capire poi la grafica che ha usato per i vari box e come, combinati, hanno prodotto quel risultato.
Ci sono domande?
P.s. un grazie a Jack che stamattina ha studiato il layout con me 🙂
INTEGRAZIONE:
Allora, ho fatto una piccola analisi e ricerca, e grazie al libro di Dave Shea “Lo Zen e il design css” mi sono chiarita le idee. Che bello italianwebdesign, permette persino a me, che pretendo di insegnare, di crescere e capire! 😀
Allora: è meglio usare il float o il position: absolute a seconda del layout e di quello che si deve fare. In sostanza e sintetizzando, è meglio il secondo quando si hanno delle colonne con un’altezza fissa (tipo appunto questo che stiamo analizzando). Questo perchè altrimenti non ci sarebbe altro modo per posizionare il footer, che erroneamente si posizionerebbe in alto a sinistra.
Invece il float è più adatto a blog o comunque siti di cui è impossibile prevedere l’altezza delle colonne, e per ovviare ai problemi che da con explorer, secondo Shea e anche secondo Troiani, è sufficiente aggiungere un display: inline; ai box delle due/tre colonne che compongono il layout. Se proprio dovessero darvi ulteriori problemi c’è un hack per explorer, una roba da niente.
Detto questo rivedremo il presente layout con il position: absolute e studieremo poi a parte il float.
