Spesso lavorando su dei layout particolari capita che ci sia bisogno di maggiore personalizzazione di alcuni elementi del sito. Prendiamo per esempio una pagina con varie descrizioni, ma tutte contenute all’interno di un unico elemento DIV, ogni descrizione avrà un titolo che la rappresenta, per esempio un H3, e fin qui nessun problema; ma se ad ogni elemento H3 volessimo abbinare un’immagine diversa, come procedere?

Si può decidere di affrontare questo problema semplicemente abbinando quella particolare immagine a quell’elemento che vogliamo noi; oppure si può lavorare con l’utilizzo dei CSS. Grazie alla possibilità dei fogli di stile di controllare gli elementi con i DIV class si possono ottenere dei magnifici risultati.

Il foglio di stile

Nell’esempio del CSS ho creato un DIV #content che presenta il compito di contenere il testo, e quindi tutte le descrizioni e i rispettivi titoli presentati in H3. Per iniziare bene questo lavoro abbiamo bisogno di sapere le dimensioni delle immagini che andranno a sostituire, in questo caso, per una questione di semplicità le ho tenute tutte della stessa dimensione, ma naturalmente possono essere modificate e personalizzate come meglio credete.

#content {
  border: 1px solid #ddd;
  padding: 5px;
}
#content h3.a1 {
  background: url("1.gif") no-repeat;
  width: 213px;
  height: 32px;
}
#content h3.a2 {
  background: url("2.gif") no-repeat;
  width: 213px;
  height: 32px;
}
#content h3.a3 {
  background: url("3.gif") no-repeat;
  width: 213px;
  height: 32px;
}

Come si può notare gli elementi H3 contenuti all’interno del DIV #content presentano ognuno una class distinta, e ciascuno anche un corrispettivo background, che poi risulta essere l’immagine che c’interessa sostituire. Le caratteristiche della dichiarazione di stile sono estremamente semplici, vi sono infatti riportate le grandezze e l’impostazione sul background il no-repeat, di modo che lo sfondo non venga moltiplicato.

Tutto questo però non basta per ottenere quello che desideriamo, infatti se guardiamo l’esempio non perfetto noteremo che il testo abbinato all’elemento H3 risulta, giustamente, esposto sopra il nostro sfondo.
La soluzione giunge sempre tramite l’utilizzo dei CSS; infatti basterà aggiungere una definizione sul controllo del testo per riuscire a “nasconderlo”.

#content h3.a1 {
  background: url("1.gif") no-repeat;
  text-indent: -1000em;
  width: 213px;
  height: 32px;
}
#content h3.a2 {
  background: url("2.gif") no-repeat;
  text-indent: -1000em;
  width: 213px;
  height: 32px;
}
#content h3.a3 {
  background: url("3.gif") no-repeat;
  text-indent: -1000em;
  width: 213px;
  height: 32px;
}

La novità consiste nell’utilizzo della proprietà text-indent: -1000em; questa specifica la rientranza della prima linea di testo all’interno di un blocco. Più precisamente, specifica la rientranza del primo box che scorre sulla prima linea del blocco. Nel nostro caso gli viene impostata una caratteristica di grandezza del carattere che rimpicciolisce il testo, ma non lo elimina; questo permette di tenere l’elemento H3 e contemporaneamente anche l’immagine abbinata. Visualizza l’esempio finale per osservare le modifiche.

L’ultimo passaggio è quello di richiamare il codice nel documento HTML, come riportato qui di seguito:

<div id="content">
 <h3 class="a1">Titolo H3 class a1</h3>
 <p>Lorem ipsum etc…</p>
 <h3 class="a2">Titolo H3 class a2</h3>
 <p>Ut eu ipsum sit etc…</p>
 <h3 class="a3">Titolo H3 class a3</h3>
 <p>Nunc vehicula. Pellentesque etc…< p>
</div>

La semplicità di questa tecnica permette di poter ottenere degli ottimi risultati, senza dover alterare il controllo di ereditarietà degli elementi H3.