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.