Immagine per link

[user_francesco]

Un saluto a tutti,

desideravo sapere se tramite una classe è possibile assegnare un'immagine (icona) che si posizioni prima dei link, ad esempio ai link che portano ad articoli gratuiti su un sito

a .nomeClasseGratis {...}

mentre invece per i link per articoli a pagamento

a .nomeClasseCompra {...}

mi piacerebbe che prima di ogni link apparisse un'icona differente a seconda della classe, è possibile far tutto tramite css?

Vi ringrazi molto
Francesco

PS: vorrei non usare delle liste (ul, li etc.)

[carlomarangoni]

Si si puo fare anche senza classi, Ci sono vari modi a secondo di come vuoi disporre il tutto

[user_francesco]

Ti ringrazio della risposta.
Sto lavorando su un componente di Joomla che mette una lista di link che portano ad articoli vari, gli uni sono gratuti (per ospiti), gli altri sono consultabili solo se sei registrato al sito. Li differenzia solo per colore tramite due classi, vorrei associare all'interno della classe anche l'aggiunta prima del link di un'icona che renda il tutto più chiaro. Ad esempio un lucchetto aperto e uno chiuso. Quando comunque clicchi su quelli non gratis ti apre un popup (questo lo fa il componente di Joomla) e ti invita a regisrtrarti al sito per consultare l'articolo.

Onde evitare di mettere mano al codice php e mysql, inserendo nel punto giusto le icone, stavo cercando di capire di risolvere tutto con una semplice implementazione delle due classi css già esistenti.

Spero di essere stati pià chiaro, buona giornata.
Francesco

[Mich_]

L'immagine (il lucchetto o altro), deve essere uno sfondo.
Quindi lo metti come sfondo del link.

Chiaramente non puoi posizionarlo fuori dal link stesso, ma puoi farlo sembrare fuori: devi usare un padding-left opportuno in modo da lasciare il posto per l'immgine.

Esempio (supponendo l'icona di 20x20px):

HTML:
... <a href="..." class="c...gratis" title="...>
... <a href="..." class="c...compra" title="...>

CSS:
a .c...gratis {
  padding-left: 20px;
  background-image: url(lucch_aperto.gif);
  background-repeat: no-repeat;
  background-position: -20px 0;   /* su questo ho qualche dubbio, prova ed evt togli */
  min-height: 20px;
}
...

il tutto per i link all'interno del testo.

Se pero` i link sono dentro una lista, le cose vanno modificate.

[user_francesco]

Fantastico, grazie!

Così funziona perfettamente

padding-left: 20px;
background-image: url("gratis.jpg");
background-repeat: no-repeat;
background-position:0;
line-height:30px;

Grazie ancora!
Francesco