Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 22 di 41
  • livello principiante
Indice lezioni

Layout a due colonne fluidi

Usare il dimensionamento in em
Usare il dimensionamento in em
Link copiato negli appunti

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-;
    }

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{
    " : "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


Ti consigliamo anche