Come Progettare un Layout Liquido
Posted by Santarelli Luca | Filed under Programmazione Web
Progettare un layout liquido significa creare un interfaccia utente accessibile e professionale, permettendoci di avere a disposizione una schema grafico compatibile con tutte le risoluzioni dei nostri user, in quanto la pagina web si adatterà alle dimensioni dello schermo del web browser degli utilizzatori dandogli un rapido colpo d’occhio della pagina senza scrollbar fastidiose alla navigabilità , mi riferisco alle barre di scorrimento orizzontali che sono fastidiose da usare, conoscendo la maggior parte dei mouse con scroller solo orizzontali.
Nel progettare un layout liquido dobbiamo prendere in considerazione il fatto che siamo vincolati nelle dimensioni di qualsiasi oggetto contenuto al suo interno, infatti, usando questo approccio non potremo usare box o menu con larghezza fissa, ma solo proporzionale alla pagina. Questo non è un enorme svantaggio, che si può risolvere con quote percentuali(es. width:100%).
Il vero problema sta nelle immagini, che molto spesso o quasi sempre sono dichiarate con quote fisse. Il buon amministratore sa di queste debolezze e organizza immagini vincolate solo in un asse ad esempio la larghezza, o altezza. Ma vediamo in dettaglio come costruire questo tipo di layout. Andremo ad analizzare il caso di layout liquido a 3 colonne come si presenta il blog soulbit.org dal quale state leggendo il post.
<style>
#wrap {
width:auto !important;
width:96% ;
min-width:770px;
max-width:1200px !important;
margin: 0 auto;}
#content {margin: 0 26% 0 215px;background:#FFF;}
#utility {
background:green;
position:absolute;
top:0;
left:8px !important;
width:200px;
padding-bottom: 40px;}
#sidebar {
background:red;
position:absolute;
top:0;
right:8px;
width:25%;
padding-top: 1px;
padding-bottom: 40px;
padding-left:0px;}
</style>
<div id=”wrap”>
<div id=”utility”><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”sidebar”><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”content”><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></div>
Il Wrap sarà il nostro box-container, che conterrà in posizione centrale le tre colonne, la colonna di
- sinistra -> utility,
- destra->sidebar,
- centrale->content
Il marcatore !important dietro certe proprietà viene usato per dare una priorità al web browser nel fare il parser del documento css, questo sopratutto per aumentare la compatibilità con i browser del vecchio Bill.
Il vero problema dei layout liquidi, oltre a quelli accennati precedentemente è di fondamentale interesse è il fatto dell’altezza delle colonne.
Se noi non abbiamo un contenuto centrale superiore rispetto alle colonne laterali avremo un conseguente ripiegamento del testo e uno spiacevole effetto ottico per l’utente, per questo dobbiamo attrezzarci al meglio per risolvere questo problema. La strada da seguire è quella del manipolare con il javascript l’altezza del contenuto centrale in base a quella delle colonne laterali, considerando come criterio di confronto, se l’altezza del content è < di quella delle due colonne laterali imposta una nuova altezza al contenuto centrale pari o superiore a quello della colonna più alta. Questa manipolazione è possibile con l’attributo offsetHeight del DOM, il resto lo lascio a voi, buon test, per problemi postate i vostri commenti.
Tags: Programmare, Web
Scritto da Santarelli Luca mercoledì, 4th marzo , 2009 01:03 Letture:« Il Buon Notaio Diceva… | Come Gestire Multiparametri in Rewrite Rule »
blogflux
