H3 con diversi stili

[Webm.Franco]

Salve, trovo difficoltà ad attribuire all'elemento h3 diversi stili all'interno dello stesso div (ad esempio il content). Ho provato con le classi, ma mi riconosce sempre il primo h3 definito, in quanto all'elemento devo associare diverse immagini, no so per spiegarmi meglio: all'interno dello stesso div devo creare un elenco con descrizioni e ciascuna di queste ha un titolo con associata un'immagine sempre diversa. Come posso fare??
grazie saluti

[Sickbrain]

Penso di aver capito il tuo problema, l'ho già risolto su un lavoro che ho effettuato per CSS Zen Sentiero.

Allora per prima cosa devi sapere le esatte dimensioni delle img che andranno a sostituire gli h3.

Successivamente crei delle classi abinate ai h3 dentro il div che utilizzerai (#content); ogni class sarà praticamente uguale, l'unica cosa che cambia è l'immagine richiamata dal background.

CODICE CSS

#content {
  border: 1px solid #ddd;
}
#content h3.a1 {
  background: url("1.gif") no-repeat;
  text-indent: -1000em;
  width: 156px;
  height: 30px;
}
#content h3.a2 {

  background: url("2.gif") no-repeat;
  text-indent: -1000em;
  width: 156px;
  height: 30px;
}
#content h3.a3 {
  background: url("3.gif") no-repeat;
  text-indent: -1000em;
  width: 156px;
  height: 30px;
}

Come vedi nel CSS ho creato le class h3.a1, h3.a2, h3.a3 abinate all'elemento h3 e contenute dentro #content.
Poi ho cambiato il background affinchè ogni h3 presenti l'immagine corrispondente, con le rispettive grandezze. Ultimo tocco di classe: ho impostato un

text-indent: -1000em;

Questo permette di nascondere il carattere dell'h3, non lo cancella, ma lo rende estremamente piccolo e praticamente invisibile.

Poi non ci resta che lavorare sul documento web:

CODICE HTML

<div id="content">
 <h3 class="a1">Titolo H3 class a1</h3>
 <h3 class="a2">Titolo H3 class a2</h3>
 <h3 class="a3">Titolo H3 class a3</h3>
</div>

Il gioco è fatto. Spero di esserti stato d'aiuto.

[Webm.Franco]

Si grazie anche se devo ancora provarlo, ma hai capito il problema. Bravo e completissimo nella rispsta!! Ciao

[Sickbrain]

Anche se ho già risposto ho pensato che sarebbe stato utile per altri utenti capire quello di cui stiamo parlando, perciò ho scritto un tutorial sul mio sito su come si possa ottenere quel particolare effetto:

http://www.sickbrain.org/?document_i...ic_id=8&page=0