« Yourminis widget e BloggerItaliani.com | Main | Bmw spinge il prodotto ovunque e con ogni mezzo »
Tre colonne tableless: ottimizzate!!!
By Merlinox | February 18, 2008
Come sicuramente i più attenti e gli afecionados hanno notato, ho cambiato il blog e sono passato sotto piattaforma wordpress. Le mie manie però le ho mantenute tutte. Un po’ per distinguermi un po’ per gusti ho deciso di non fare il solito layout WP a due colonne che si vede in giro (o 3 con le 2 colonne affiancate a destra), ma volevo ancora il mio template a 3 colonne: 2 menù laterali e al centro i contenuti. Si lo so che sono retrò ma mi disegnano così.
Pieno di fretta, come sempre, cerco un template fatto come mi serviva (contate che non avevo mai visto prima WP) e lo personalizzo. Il gioco è fatto. Un po’ me ne ero già accorto, è poi Pandemia a darmi la spallata finale, con la sua solita sottiliezza:
il tuo blog non carica i contenuti per primi!
Di norma non ho timori reverenziali per nessuno, però il suo tono un po’ mi ha smosso… ed eravamo in chat.
Allora la mia testolina inizia a pensare come fare un layout a 3 colonne, tableless, ma soprattutto ottimizzato. Ottimizzato = Carica prima i contenuti e poi le colonne = Nel HTML prima c’è il DIV dei contenuti e poi quello delle colonne.
Obiettivo: i contenuti devono essere caricati prima di tutto.
Motivi: usabilità, SEO
I più abili e smaliziati dell’ambiente, che casualmente non avevano già la soluzione in mano, vista l’immagine hanno già trovato la soluzione. Per gli altri la spieghiamo:
- senza tabelle e senza posizionamento assoluto dei layer (position:absolute) non è possibile gestire 3 tabelle inserendole nel html in ordine contenuti, menu1, menu2e visualizzarle come nell’immagine.
- tutto il blog mettiamolo dentro un bel DIV grande e lo chiamiamo base e gli diamo delle dimensioni fisse (ex.: 1000px)
- raggruppiamo i primi due DIV in un nuovo contenitore (lo chiamiamo per praticità colMacro).
- colMacro lo mettiamo in float a sinistra, menu2 (quello a dx) lo mettiamo in float a destra
- dentro a colMacro posizioniamo prima i contenuti in float a destra, quindi il menu1 in float a sinistra
Il gioco è fatto. Se volete vedere un esempio: eccolo qua: 3 column, tableless, optimized 
Nel sorgente sono inclusi i css, compatibile con ie7 e firefox.
Tags: CSS, HTML, wordpress
Post simili
February 18th, 2008 at 11:20 am
grande
e io che t’avevo suggerito l’absolute
February 18th, 2008 at 11:21 am
Il problema principale dell’absolute, è che poi il footer te lo scordi. E poi sarebbe troppo facile, no?
February 21st, 2008 at 9:28 pm
C’è anche una soluzione con i margini negativi, se ti interessa… la trovi ad es. negli esempi layout gala di Fulciniti
February 21st, 2008 at 10:49 pm
@fra_t: riesci a spiegarmi meglio? o magari mandare un link?
September 19th, 2008 at 8:37 pm
Scusa il ritardo
40 layout fatti con lo stesso markup http://blog.html.it/layoutgala/ e contenuto all’inizio…
September 22nd, 2008 at 7:11 am
@Fra_T: cazzo che bella collection
Grazie!