Gli esempi di layout a due colonne che abbiamo visto finora sono a larghezza
fissa. Ecco invece le versioni fluide, entrambe con l'immagine di background:
Le versioni fluide presentano un indubbio vantaggio: sono già pronte per la
stampa. Provate a fare anche solo un anteprima di stampa di uno dei due layout
fluidi o di uno dei qualsiasi layout fissi visti in precedenza. Hanno uno svantaggio
rispetto alle versioni fisse: stringendo al limite la finestra del browser il
testo delle due colonne si sovrappone, fino a far scivolare la navigazione parzialmente
sotto i contenuti nel caso della versione con la proprietà float.
Purtroppo la proprietà min-width
non è supportata da Internet Explorer, nè nella versione 5.x nè nella 6. Ha effetto
invece sui browser Gecko e Opera. La dichiarazione è semplice:
div#container{
min-width: 600px;
}
Per Internet Explorer una soluzione ci sarebbe... ma anticipo subito che è
una soluzione propretaria e non standard. Quindi una soluzione simile non
passa al vaglio del validatore.
Ci tengo a precisare che non posso garantire di quanto letto in rete su un forum
e che personalmente non adotterei mai una soluzione simile, ma dato che Internet
Explorer detiene una percentuale maggioritaria dei browsers attualmente usati...
questo è la regola css proprietaria per Internet Explorer:
div#container{
width:expression(document.body.clientwidth < 600 ? "600px" : "auto" );
}
La regola sopra è un espressione condizionale ternaria che dice ad Internet Explorer: se la larghezza
della finestra del browser è maggiore di 600 pixels, dai al container tutta la larghezza possibile, altrimenti
assegna al container una larghezza di 600 pixels.
Scarica il file zip di questa lezione
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
