Eliminare sottolineatura immagine

[Mackey]

Ciao a tutti.

è già da diverso tempo che cerco di risolvere inutilmente questo problema... ho fatto delle ricerche ma non ho trovato nulla.

Utilizzo un DTD XHTML... Transitional o Strict il risultato non cambia.

e ho questa situazione:
<a href="http://www.prova.it/">[img]immagine.gif[/img]
Prova</a>

Il risultato di questo codice è un link sottolineato... ma anche l'immagine risulta sottolineata! Naturalmente io non la voglio sottolineata e ho provato a inserire nel CSS questo:

a img {
border:none;
text-decoration:none;
}

Purtroppo non ottengo risultati... infatti i bordi li toglie, ma la sottolineatura rimane.

Come posso fare?
vi ringrazio

[mahamatt]

la sottolineatura riguarda a, non direttamente img... prova con

a { text-decoration:none; }

PS
per fare un link tipo "img + testo a capo", consiglierei di rendere a e a img con display:block, così che il testo vada a capo automaticamente, evitando l'uso del
. Se i link sono più d'uno, allora è meglio usare una lista non ordinata, oppure una lista di definizione. (senza contestualizzare non so essere più preciso!!)

ciao

[Mackey]

No, la sottolineatura del testo la voglio...

http://www.nuracale.it/
puoi vedere gli esempi delle immagini rappresentative le categorie delle news... ad esempio "tempo libero", "cultura"... ecc.

per il block, va bene se faccio uno style in linea con <img> ?

ti ringrazio

[mahamatt]

mmmh... dubito che sia possibile eliminare la sottolineatura solo da una parte del link... a meno che...

CSS

a {
  display:block;
  float:left;
  width: 200px;  /* valore ipotetico */
  text-align:center;
  text-decoration:none;
  }

a img { display:block; margin: 0 auto; }

a span.testo { text-decoration:underline; } 

HTML

[img]immagine.gif[/img]<span class="testo">Prova</span>

ma è una cosa abbastanza macchinosa... prova se funziona, e valuta se ne vale la pena!

[mahamatt]

altrimenti, una soluzione più semplice (e semanticamente più corretta) sarebbe mettere l'immagine come sfondo di <a>:

CSS

a {
  display:block; 
  float:left; 
  width: 200px;  /* valore ipotetico */ 
  text-align:center; 
  text-decoration:underline;
  background: transparent url(immagine.gif) no-repeat top center;
  padding-top:150px     /* altezza di immagine.gif + distanza del testo dall'immagine */
  } 

HTML

Prova

Così il testo viene sottolineato, mentre l'immagine no, dal momento che viene interpretata come sfondo

[Mackey]

Ti ringrazio... ho risolto con display:block sull'immagine...

In pratica con BR è come se considerasse l'immagine una parte di testo... e quindi la sottolineava... con block invece la vede come un blocco a parte e non la sottolinea... questo non me lo so spiegare ma funziona.

l'unica pecca di questa soluzione... è che non la posso mettere in "a img {}" perchè a quel punto non avrei più immagini inline all'interno di link

un'ultima cosa... è corretto usare style="" ? perchè i link di questo tipo magari li creo volta per volta.

e un'ultima cosa che non c'entra niente:
perchè alcuni mettono uno spazio prima e uno spazio dopo i "due punti"?

display : block;


ciao

[mahamatt]

Originariamente inviato da Mackey
un'ultima cosa... è corretto usare style="" ? perchè i link di questo tipo magari li creo volta per volta.

Usare stili in linea è corretto, in termini di validazione, ma non è pratico; se domani dovessi cambiare una particolare proprietà comune a tutti i link di quel tipo, dovresti passarteli tutti a mano, uno per uno... un po' come accadeva (e accade ancora ) con la formattazione fatta in html.
Il fatto di poter raggruppare tutti gli stili in un unico foglio, separando struttura e formattazione, è la vera potenza dei css.

Originariamente inviato da Mackey
e un'ultima cosa che non c'entra niente:
perchè alcuni mettono uno spazio prima e uno spazio dopo i "due punti"?

display : block;

lo spazio prima o dopo i due punti è opzionale (correggetemi se sbaglio), solitamente gli spazi vengo usati per indentare il codice così che a vista appaia più ordinato e comprensibile.

ciao

[Mackey]

Ok... mi rendo conto di andare un po' OFF-TOPIC, ma parliamo sempre di CSS...

per la questione degli spazi prima e dopo i "due punti", un mio amico mi ha detto che scrive così per questioni di compatibilità con i vecchi browser... è VERO?

[mahamatt]

Originariamente inviato da Mackey
per la questione degli spazi prima e dopo i "due punti", un mio amico mi ha detto che scrive così per questioni di compatibilità con i vecchi browser... è VERO?

Non so risponderti, non ricordo di aver mai letto una cosa del genere... cmq, meglio se ti risponde qualcuno con più esperienza di me