Ruthsarian Layouts - 2col.v5
Il colore di sfondo per questa colonna è attualmente una immagine gif larga 200 pixel applicata all'elemento page Frame con un comando background-repeat: repeat-y.
Colori di background
Potete cancellare o cambiare il background nel file colors.css, con i colori background/foreground ed anche i colori di ogni altro elemento di questa pagina.
Nello scegliere i colori provate ad usare le varie tonalità di uno stesso colore. Fornisce una maggiore uniformità e pulizia estetica.
Un altro metodo consiste nello scegliere uno schema di colori che avete visto nella vostra vita e che pensate sia bello; a questo punto "rubate" questo schema di colori. Per esempio se vedete un poster che vi sembra proprio bello provate lo schema dei suoi colori in questo layout.
Fonts
Font family (face type) e grandezza possono essere cambiati usando il foglio di stile theme.css. Questo foglio di stile viene letto da Netscape 4 per cui ci vuole un pò di attenzione con quello che mettiamo qui. Oppure potete mettere questo file col comando @import per cui sarà nascosto a Netscape 4.
Magari qualcuno vorrebbe diminuire la grandezza del font della colonna innerContentColumn (la zona in bianco qui a destra) o aumentare le misure del font usate nei menu orizzontale e verticale.
x x x x x questo serve per testare il bug con il corsivo di ie x x x x x
Inizia la traduzione:
Potete copiare tutto il contenuto, incluso i fogli di stile e l'Html di questa pagina. Questo lavoro è qui per chiunque lo voglia, gratis e senza restrizioni di copyrights o licenza. In altre parole prendetevi la mia pagina web, per favore.
Questa pagina include i links ai files di css che ho usato qui.
Obiettivi Primari
Avere un layout a due colonne che usa solo CSS (senza tavole), che ha un footer che allinea entrambe le colonne sotto senza guardare a quella che può essere la più lunga. Che supporti i grandi browsers e degradi bene nei browsers con poca o alcuna dimistichezza con i CSS. E questo include Netscape 4.
Obiettivi Secondari
Riuscire a mostrare la separazione fra le due colonne in qualche maniera (bordo) usando solo CSS (quindi senza far uso di immagini, sfondo o altro). Includere un masthead (trivial) ed includere menu basati in liste non numerate. Avere colori di sfondo propri ad ogni colonna è possibile ma, attualmente, ho usato solo una immagine di sfondo (per la colonna di sinistra).
L'idea di base
La colonna di sinistra ha una larghezza dichiarata (200px in questo caso) e galleggia (float) a sinistra. La colonna principale (contenitore) non ha una larghezza specificata ma si autodecide con il margine di sinistra. Il box del footer (box ai piedi della pagina) ha l'attributo del CSS "clear" settato a sinistra in modo che non importa quale delle due colonne (sinistra o contenitote) è più lunga: il footer sarà sempre a fondo pagina.
Dettagli importanti
L'intero layout è incapsulato in un DIV di blocco chiamato pageFrame. Questo permette ad un margine di essere applicato all'intera pagina senza dovere editare le proprietà CSS dei vari elementi. Permette inoltre in maniera molto facile di mettere questo layout ad una larghezza fissa.
L'uso dei bordi è lealmente straight-forward. L'unico momento che le cose diventano tricky è con il bordo che separa la colonna di sinistra con quella del contenitore. Il problema qui è che se definiamo che il bordo appartiene alla colonna di sinistra, la linea che separa sarà alta come lo è la colonna di sinistra. Se invece la facciamo appartenere al contenitore allora se la colonna di sinistra è più lunga la linea si fermerà prima di arrivare al footer. Noi stiamo usando un layout fluido per cui non possiamo sapere che tipo di settaggi ha l'utente finale che ci legge. Per cui per rimediare ad entrambe le possibilità (la sinistra è più lunga del contenitore o il contenitore è più lungo della colonna di sinistra) entrambi i bordi sono definiti in modo da sovrapporsi.
Per sovrapporre i bordi dobbiamo ottenere pixel perfetti. Per questo motivo la colonna di sinistra è impostata a 200px di larghezza e il margine di sinistra della colonna contenitore è impostato a 199px. Tuttavia questo non funziona molto bene nei vecchi browser. Per questo ci sono alcuni CSS supplementari nel foglio di stile simple con larghezze e margini della colonna di sinistra che possono sembrare un pò inutili. IE 4 ha bisogno di un margine di -200px a destra sulla colonna di sinistra e Netscape 4 ha bisogno di un margine di 2px a sinistra sulla colonna di sinistra. Alla fin fine funziona ed è quello che ci interessa.
Un trucco chiave
Guardando al sorgente di questa pagina si vedranno alcune istanze (3) dove c'è un DIV di blocco all'interno del quale è messo un DIV di blocco (leftCoumn contiene innerLeftColumn). Il motivo di tutto questo è che IE e Mozilla (insieme ad altri browser) hanno metodi diversi per misurare la larghezza e l'altezza dei boxes. IE includerà margine, padding e bordi all'interno di una larghezza specifica di layout. Mozilla, che si conforma agli standard del CSS, prende la larghezza definita di un box e poi aggiunge padding, bordi e margine sopra di questo. Questo diversa maniera di vedere i modelli di box ha creato problemi non piccoli agli sviluppatori del web che per anni hanno cercato di risolvere. La soluzione più comune è stata quella di usare il box model hack. Io ho fatto uso di una soluzione diversa.
Per risolvere il problema del box ogni box è messo all'interno di un altro. Il blocco esterno contiene gli attributi di dimensione della larghezza (e altezza) e solo quei due attributi che influiscono sulle dimensioni di un box. Il box interno è dove possono essere usati padding, bordo e margini. Usando questo metodo sia IE che Mozilla renderanno correttamente i boxes indipendentemente da quale modello di box si sta facendo uso. In questa maniera possiamo tenerci lontani dall'hack box model hack. Non è che box model hack sia non valido o che non si dovrebbe usare. E' soltanto un fatto di gusto personale di star lontani da quel particolare hack.
E che ci importa di Netscape 4?!
A me importa, perché c'è un punto più grande da esaminare. Volevo sapere di cosa si trattasse. Ha qualcosa a che fare con lo sforzo che si prova a venire incontro a tutti i vostri utenti e questo anche se avete, per esempio, una utenza di base con IE 6, l'esplorazione del supporto di altri browsers e l'apprendimento da questa esperienza ha un valore maggiore del tempo salvato ignorando il problema.
Ma questo è un punto di vista condiviso solo dagli sviluppatori duri a morire di CSS/web che sono pazzi abbastanza da godersela con questo tipo di esplorazione. Noi li chiamiamo masochisti.
Mia nota (Maurizio):
questo pezzo sotto "Una storia" era "nascosto", l'ho reso visibile perché molto interessante.
Una storia:
Una unità di memorizzazione dati si corrompe. Ha dati che ti servono urgentemente. Non ci sono in giro altri computers per spostare quei dati interni. Il sistema operativo deve essere riavviato e l'unica cosa che abbiamo è una vecchia copia di Win95. Il sistema operativo viene installato e per fortuna c'è il supporto per il modem. Ma non c'è il supporto per quel tipo di device. E allora andiamo in internet per scaricare i giusti drivers. Ma l'unico browser a disposizione è IE3 che abbiamo insieme a Win95. Se quel sito di download non supporta IE3 come possiamo scaricare i drivers? Non si può e le informazioni ci servono fra 10 minuti. Uh oh. Ma se quel sito di download è stato disegnato per funzionare bene anche con i browsers più vecchi, come IE3, allora avremo salvato la giornata.
La morale è che, sebbene avete coperto il 98 per cento degli utenti nel vostro progetto di layout, quel 2 per cento potrebbe essere quello più importante da supportare e quella mancanza di supporto potrebbe tornare indietro a mordervi nel posteriore.
Fogli di stile usati e loro scopi
- simple.css
- Qui è dove il CSS sicuro-universale-browser va messo. Questo foglio di stile è l'unico che sarà visto da Netscape 4 e da altri browsers che supportano un minimo di CSS. Per questo è qui per generare il layout, ma deve essere CSS sicuro.
- complex.css
- Qualsiasi stile non-sicuro va qui. Questo può mandare in crash Netscape 4 ed altri browsers che non supportano correttamente il CSS di base.
- complex_hnav.css
- Questo foglio di stile cura il layout del menu orizzontale che si vede sopra. Se desiderate cancellare quel menu, rimuovete semplicemente questo foglio di stile ed anche il DIV di blocco con l'id chiamato hnav dal codice di questa pagina e sarete a posto.
- complex_vnav.css
- Come il foglio di stile di prima solo che questo è per il menu verticale che si vede a sinistra. Entrambi i menu sono fatti con liste non numerate e questo vuol dire che senza questi fogli di stile la pagina verrà ancora in modo corretto e la logica del layout ancora funziona.
- theme.css
- Questo foglio di stile è usato per applicare un tema di base al layout. Qui è dove scelte di font e colore devono essere messi. Cambi di layout, come bordi e misure delle colonne, non dovrebbero andare qui. Questo foglio di stile è linkato in maniera tale che Netsacpe 4 lo legge. Quindi solo CSS sicuro può essere messo qui.
- colors.css
- Il setup di default ha questo foglio di stile importato da theme.css. Questo perché Netscape 4 aggiunge un pò di spazio fra il bordo di un box e dove il relativo bordo viene disegnato. Questo significa che boxes con un colore di fondo avranno un'area vicino al bordo dove potete vedere cosa c'è sotto al box. Ick. Questa è anche una grande maniera di dividere i vari aspetti dei layouts di stile e rende il tutto più maneggevole. Così non si deve più cercare in files lunghi di CSS per trovare i colori usati. Sono qui e facili da controllare.
Hacks usati nel CSS
Ci sono hacks usati in questo layout. Il motivo è dovuto al fatto che ci sono alcuni piccoli bugs all'interno di ogni singolo browser che possono distruggere il layout. L'uso di sovrapposizione dei bordi in questo layout richiede la perfezione in pixel che è il solo motivo del far uso di hacks di CSS. I fogli di stile usati contengono alcune spiegazioni di quali hacks di CSS sono stati usati e perché.
IE e il corsivo
Sembra che IE5/Win non prenda in considerazione la larghezza di testo in corsivo quando calcola la larghezza di un box e dove auto-spostare il testo all'interno del box. Quando il testo è finalmente reso all'interno del box le posizioni di spostamento sono disinserite ed alcune linee sono più larghe del box. Il motore di rappresentazione di IE fa spazio aumentando la larghezza del box. Comunque tutti gli altri box, che sono stati già misurati, ora sono troppo larghi per adattarsi nello spazio disponibile. Ciò distrugge il layout mentre IE prova a riposizionare tutti gli elementi all'interno della pagina per soddisfare tutti i vincoli dello spazio (larghezza).
Nel caso di questo layout, abbiamo un box colonna di sinistra fatto galleggiare con una larghezza-fissa e un box contenitore a destra fatto galleggiare con una larghezza variabile. A causa di questo bug, il box contenitore è troppo largo per adattarsi nello spazio disponibile e viene spostato giù sotto la colonna galleggiante di sinistra. E questo non lo vogliamo.
Questo articolo spiega quello di cui sto parlando.
La soluzione suggerita è quella di regolare l'attributo di overflow (trabocco) in visibile. Questo non dovrebbe avere effetto su alcun altro browser perché con loro non ci sarà overflow e perché loro calcoleranno correttamente il layout. Tuttavia per questo layout regolare l'altezza della colonna(e) in questione al 100 per cento è anche richiesta.
Questa soluzione non funziona con IE 5.0. Una soluzione suggerita è quella di diminuire la larghezza del box dalla misura desiderata in modo che quando IE aumenta la larghezza c'è ancora spazio da riempire. Questo non funziona in questo layout visto che il bordo fra la colonna sinistra e il contenitore di destra è fatto dall'appropriato bordo definito in ognuno dei due box. Anche se abbiamo 1 solo pixel fuori il bordo si rompe.
L'altra soluzione suggerita è quella di nascondere l'overflow. IE 5.0 questo lo capisce e nel caso peggiore i bordi di una parola o due vengono tagliati ma questo non dovrebbe succedere molto spesso se non addirittura mai. Comunque questa soluzione non sembra funzionare con questo layout. Molto probabilmente per la natura dei box e di tutto l'altro CSS usato.
Dopo alcune prove-e-errori una soluzione che funziona con questo layout è stato trovato. Nascondendo l'overflow ed anche applicando una larghezza del 100 per cento ed una altezza in auto sembra funzionare. I IE float bug(s) sono risolti mettendo una altezza del 100 per cento. Comunque sembra che ci siamo liberati anche del bug-float di IE 5.0 applicando questa soluzione, meno male. Però, proprio per star sicuri, abbiamo usato un paio di hacks per vedere applicato il CSS in questione dal solo IE 5.0.
La completa soluzione può essere vista in complex.css.