css per contrastare le sottolineature dei Link... e per le immagini?

**renzo61** · 03-12-2005, 21:56

Non so se sia la soluzione più semplice, ma io per evitare le sottolineature dei link "testuali" nelle mie pagine, talvolta utilizzo il seguente codice CSS:

<style type="text/css">a:link, a:visited, a:hover { text-decoration: none }
</style>

Non ricordo neppure più dove l'ho imparato.

Qualcuno mi sa dare un analogo codice CSS (o un altro sistema efficace) per evitare anche le fastidiose cornicette attorno alle immagini che fungono da link?

GRAZIE

**Zulkifar2** · 04-12-2005, 02:31

Impara ad usare un po' di css.
Nella tua pagina html definisci delle classi per certi tag di interesse, nel tuo caso i link. Dunque scriverai per tutti i link a cui vuoi attribuire caratteristiche comuni come segue:
<a href="ciao.html" class="nomedellaclasse">ciao<a/>
<a href="pagina2.html" class="nomedellaclasse">pagina2<a/>
<a href="index.html" class="nomedellaclasse">homepage di ciro<a/>
etc...

tra i tag <head> </head> scrivi il rimando al foglio di stile che usi (CSS) in questo modo:

<head>
<title>Titolo della pagina</title>
<link rel="stylesheet" type="text/css" href="fogliodistile.css" />
</head>

A questo punto costriusci un file chiamato "fogliodistile.css" e lo salverai nella stessa cartella della pagina html in cui scriverai semplicemente questo:

.nomedellaclasse{
color: black;
text-decoration:none;}

.nomedellaclasse:hover{
text-decoration:none;
color:green;}

In questo modo tutti i link della classe "nomedellaclasse" avranno quelle caratteristiche.
Se vuoi invece che tutti i link abbiamo le stesse caratteristiche puoi fare a meno di attribuire una classe e definisci invece le caratteristiche per tutti in questo modo:

.a{
text-decoration:none;}

.a:hover{
color:white;}

Ovviamente gli attributi colore sfodo testo etc... li definisci a piacimento.

Puoi fare cos' non solo per i link ma per tutto un po'. Rendi la pagina più leggere e facile da leggere, senza milioni di righe di codice. Puoi usare lo stesso foglio di stile per altre pagine e dal foglio di stile puoi modificare un attributo su tutte le pagine contemporaneamente. E' più facile la gestione insomma..

Per saperne di più qui c'è una guida:
http://www.html.it/css/

Ne vale la pena. Buon divertimento.

**renzo61** · 05-12-2005, 01:01

Innanzititto grazie della risposta Zulkifar2

Però tutto il discorso che fai sul separato foglio di stile (che conoscevo già) è quasi superfluo in questo momento, perchè l'esigenza che ho si trova su una sola pagina quindi mi pare che posso scrivere tutto su quella.

Riguardo al suggerimento di colorare le cornici del colore dello sfondo (ad esempio white) è interessante (che stupido a non averci pensato prima!) ma come faccio a colorare queste cornici dei links attorno alle "immagini-tasto"? OVVIAMENTE colorare le cornici e solo quelle! Perchè se coloro di bianco contemporaneamente tutti gli altri links... E' UN DISASTRO!
:master:

QUALCHE ALTRA ANIMA BUONA SA DARMI UN ALTRO BUON CONSIGLIO?

GRAZIE

**Sol** · 05-12-2005, 02:13

img {border: 0}

Così le tue immagini non avranno più bordo, nemmeno se sono dei link.

**renzo61** · 06-12-2005, 12:00

grazie sol...
adesso ci provo!
anche se non mi è chiaro a che punto posso inserire quel codice...
Nell'head?
ad ogni immagine?
altro?

**pierofix** · 06-12-2005, 12:03

codice:

<style type="text/css">
<!--
a:link, 
a:visited, 
a:hover { text-decoration:none }
a img { border:none }
-->
</style>

**renzo61** · 06-12-2005, 12:21

OK GRAZIE pierofix SEI UN CAPO!
era proprio quello che cercavo!!!

Mentre invece per Sol non sono riuscito a far funzionare il suo metodo.

**pierofix** · 06-12-2005, 12:26

Originariamente inviato da renzo61
Mentre invece per Sol non sono riuscito a far funzionare il suo metodo.

Innanzitutto il metodo di Sol utilizzava un selettore CSS - si chiama così - più generico del mio, ovvero lui ha usato

codice:

img { border:0 }

Scritto così, viene detto al browser di prendere tutte le immagini (tag <img />) e di impostare a "0" il valore del bordo. Io ho affinato un po' di più il selettore, dicendo al browser di eliminare il bordo a tutte le immagini contenute in un tag <a>, ovvero:

codice:

a img { ... }

Il codice di Sol non può comunque funzionare in quanto la proprietà 'border' non accetta un valore "0" per eliminare il bordo: occorre utilizzare none.

**Sol** · 06-12-2005, 15:24

E perché a me funziona?!

**pierofix** · 06-12-2005, 15:26

Originariamente inviato da Sol
E perché a me funziona?!

Anche con Firefox e Opera?

Discussione: css per contrastare le sottolineature dei Link... e per le immagini?

Strumenti discussione

Ricerca discussione

Visualizza

css per contrastare le sottolineature dei Link... e per le immagini?

Permessi di invio