Layout Simple || header || left || content || footer||liquid

Menù

Altro Menù

Layout Simple || header || left || content || footer||liquid

Prendendo spunto dal layout costruito da Andrea, nella guida xhtml, mi sono lanciato nell' esperimento di costruire un layout semplice, senza posizionamenti ne relativi ne assoluti, ma semplicemente statico, facile da costruire, da adattare alle proprie esigenze, anche in presenza di limitate conoscenze, dell' html e dei css.
La colonna di sinistra è larga 170 pixel, il div#centrale riempie il resto della pagina.

A prima vista può sembrare una copia perfetta, in quanto ho imitato anche i colori, non ho nemmeno cambiato i nomi degli id, ma vi sono delle piccole manipolazioni che consentono di avere un effetto ottico, che ho ottenuto usando un trucco : ho forzato le misure dei div fino a sovrapporsi, anche solo di 1 px e poi ho assegnato il bordo destro di 1 px al div#sinistro e il bordo sinistro di 1 px al div#centrale e in questo modo i bordi vanno a sovrwapporsi perfettamente; questo serve a far si che, nel caso uno dei 2 div, si allunghi più dell'altro, si porta dietro il bordo, che visualmente è sempre di 1 px, ma non si sa se sia proprietario di uno o dell'altro div ;-)

A parte questo, non vi è nulla di diverso dal layout di Andrea, se si escludono certe variazioni nel css, nel quale ho raccolto in modo ottimale ed ho raggruppato un insieme di dichiarazioni, che consentono di avere fogli di stile più leggeri, anche se ad un occhio non allenato, posso sembrare cose abbastanza banali o astruse.

Lo sviluppo di questo layout, è nato grazie alle domande poste da diversi utenti del forum, i quali chiedevano:
1)come fare ad avere un unico colore di sfondo in un div menù, anche quando il div content si allunga ?
2)come posso avere in una pagina 2 div distinti, indipendenti l' uno dall'altro, ed ognuno dei quali abbia un suo colore di sfondo e sia sempre separato da un bordo?

Con questo sistema, semplice ed intuitivo, spero di aver contribuito a dare una risposta alle domande che venivano poste a tal riguardo.
La facilità con la quale si possono effettuare le modifiche dell'html e del css, non richiede particolari accorgimenti, in quanto la struttura è solida e si può implementare in mille modi, avendo sempre la garanzia di avere un layout liquido, che si adatta a qualsiasi risoluzione, avendo incorporate delle parti fisse, come i menù, nelle quali possiamo alloggiare ciò che ci serve, senza avere timore di spostamenti, mentre il resto rimane liquido e si adatta alla risoluzione usata dall' utente.

L'unico trucco che si deve usare, per avere il menù di un colore completo, è quello di usare come colore di sfondo, lo stesso che si è dato al div#telaio, altrimenti, senza iniziare ad aggiungere un sacco di altre righe di codice css e cambiare totalmente i posizionamenti statici, con gli assoluti e fissi, non ci sarà altro modo possibile per farlo, o almeno io non lo conosco ancora.
Per chi volesse farne uso, può scaricarsi il :

Da un' idea di Xhtml con Style di Web-Link.it il Layout.

Valid XHTML 1.0 Strict CSS Valido!

By Angelo Blua