Percorso di navigazione nel sito per arrivare a questa pagina:

home » tutorials » fogli di stile » Dichiarare color e background-color: un esempio con le colonne

Dichiarare color e background-color: un esempio con le colonne

Se l'articolo e l'altro tutorial non ci hanno ancora tolto tutti i dubbi, ecco un ulteriore esempio per analizzare le conseguenze della mancata dichiarazione di color e background-color.

Questa volta siamo di fronte ad una pagina il cui layout è costruito con la tecnica delle false colonne e dei float opposti.

Questa è la struttura di base del codice (x)html:

<body>

<div id="sinistra">
  ... [contenuti della colonna sinistra] ...
</div>

<div id="destra">
  ... [contenuti della colonna destra] ...
</div>

</body>

E questo è il css: l'immagine colonne.gif, che rapprsenta lo sfondo del body, crea l'effetto delle due colonne bordeaux e bianca, sulle quali si posizionano i due contenitori flottati.

body {
  margin: 0;
  padding: 0;
  background-image: url('colonne.gif');
  background-repeat: repeat-y;
  background-position: 50%;
  }

#sinistra {
  margin: 0;
  padding: 0;
  width: 49%;
  float: left;
  color: #ffffff;
  text-align: justify;
  }

#destra {
  margin: 0;
  padding: 0;
  width: 49%;
  float: right;
  color: #660000;
  text-align: justify;
  }

.centrato {
  text-align: center;
  }

img {
  width: 250px;
  height: 250px;
  }

p {
  padding: 2%;
  }

Ad una verifica manuale della pagina, il testo risulta ben leggibile e apparentemente ben contrastato. Se il web fosse un ambiente "rigido" come la carta stampata, dove le pagine vengono visualizzate da tutti alla stessa maniera, non avremmo problemi.

Invece, stringendo la finestra del browser e/o usando uno schermo a bassa risoluzione, il testo della colonna di destra si sposta progressivamente, fino a cadere sullo sfondo bordeaux, e diventa scarsamente leggibile (Figura 1). Non solo: navigando con le immagini disattivate (un'opzione facilmente configurabile in browser quali Opera o Firefox e sfruttata da alcuni utenti che hanno una connessione a bassa velocità) noteremo che senza l'immagine di sfondo la colonna sinistra è completamente illeggibile (Figura 2).

uno screenshot della pagina di esempio con Internet Explorer: stringendo la finestra del browser il testo della colonna di destra diventa scarsamente leggibile

Figura 1
[ visualizza l'immagine ingrandita ]

uno screenshot della pagina di esempio con Opera: disattivando le immagini il testo della colonna di sinistra è illeggibile

Figura 2
[ visualizza l'immagine ingrandita ]

La soluzione è ovvia: dichiarare il background-color. Nella seconda pagina di esempio abbiamo aggiunto il colore di sfondo ai due div #sinistra e #destra, in questo modo:

body {
  margin: 0;
  padding: 0;
  background-image: url('colonne.gif');
  background-repeat: repeat-y;
  background-position: 50%;
  }

#sinistra {
  margin: 0;
  padding: 0;
  width: 49%;
  float: left;
  background-color: #990000;
  color: #ffffff;
  text-align: justify;
  }

#destra {
  margin: 0;
  padding: 0;
  width: 49%;
  float: right;
  background-color: #ffffff;
  color: #660000;
  text-align: justify;
  }

.centrato {
  text-align: center;
  }

img {
  width: 250px;
  height: 250px;
  }

p {
  padding: 2%;
  }

Abbiamo così ottenuto una pagina i cui contenuti sono sicuramente leggibili, indipendentemente dalle dimensioni della finestra del browser (Figura 3) e dalla presenza/assenza delle immagini (Figura 4).

uno screenshot della pagina modificata con Internet Explorer: stringendo la finestra del browser il testo della colonna di destra è ancora leggibile

Figura 3
[ visualizza l'immagine ingrandita ]

uno screenshot della pagina modificata con Opera: disattivando le immagini il testo della colonna di sinistra è perfettamente leggibile

Figura 4
[ visualizza l'immagine ingrandita ]

Come sempre, un piccolo accorgimento che fa la differenza. Semplice, no?

20 gennaio 2006