Discussion :

[Joe Le Mort]

bonjour a tous,

j'ai mis une classe CSS pour tous mes liens :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
a {
color:#507AC9;
font-size:11px;
text-decoration: none;
}
 
a:hover {
border-bottom:dashed #507AC9 1px;
color:#507AC9;
background-color:#e5ecf9;
}

J'ai un probleme avec un lien avec image, qui sur le Hover, montre un background coloré.


j'ai créé un css pour les liens ou je ne souhaite pas appliqué le CSS de tous les liens :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
a.none {
text-decoration: none;
}
 
a.none:hover {
text-decoration: none;
}

Cela ne fonctionne pas sur mon image. Que dois je faire pour avoir un lien avec une image sans CSS...?



je ne veux pas faire ceci car mon background est écrasé par celui ci ! et j'ai plusieurs couelru (tableaux, div...):

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
a IMG{
text-decoration: none;
background-color:#FFFFFF;
} 
 
a:HOVER IMG{
text-decoration: none;
background-color:#FFFFFF;
}

[viviboss]

Sous Internet Explorer, les images "liens" sont entourés d'un liseret de la couleurs des liens définis....

Il me semble que c'est l'attribut "border" de l'image qu'il faut modifier (en faisant un "border='0'"....)

Cela dit, c'est bizzare que tes liens définis en CSS ne fonctionnent pas avec les images....

Tu fais bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a id="id_css" href="chemin"><img src="chemin" alt="alt" border="0"/></a>

?

Parce que NORMALEMENT cela devrait marcher.....

[viviboss]

HAAA

Rajoute un ID ou une CLASS dans ton CSS, avec les attributs que tu veux pour tes images "liens" !!!

Ensuite, tu appel ton ID ou ta CLASS dans le lien qui contient l'image !!!

Tout est une question d'"héritage" dans ton CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#img a:link{
attributs
}
 
#img a:hover{
attributs
}
 
etc....

Dans ta page HTML, tu appels ca :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a id="img" href="chemin"><img src="chemin".....></a>

comme ca, tu fais une exception qui n'héritera pas des attributs parents !!!!

[trotters213]

petite précision sur ce que dit viviboss : utilise une class vu si tu as plusieurs occurences d'images "liens" ou mieux tu fais ceci dans ton CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a img {
background:none;
border:none;
}

a img permet de dire que ça ne s'applique qu'aux balises img précédées de la balise a

[Candygirl]

Si j'ai bien compris le problème, je pense que ceci devrait correspondre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a.none:hover {
border-color:tranparent;
border:none;
}

[trotters213]

Si j'ai bien compris le problème, je pense que ceci devrait correspondre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a.none:hover {
border-color:tranparent;
border:none;
}

Quel est l'intérêt de mettre la couleur à transparent si après tu enlèves carrément la bordure ?

[Joe Le Mort]

vous n'avez pas du tout compris a part Candygirl (mais cela ne marche pas )...

Alors, je récapepete...

J'ai des liens avec la classe :

a {...} et a:hover{/*qui contient un hover background de couleur*/}

ce que je veux, c'est faire un lien sur une image sans que les attributs de la classe a soit répercuté sur l'image (le background color que je ne souhaite pas)!

[trotters213]

Et bien tu donnes comme attribut à ton "lien image" class="nobg" par exemple et dans ton CSS tu marques :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.nobg {
border:none;
background:none;
}

c'est ça ou j'ai toujours rien compris ?

[Joe Le Mort]

c'est ça ou j'ai toujours rien compris ?

C'est ca, mais ca ne marche pas... j'ai toujours le background sur l'image :

http://www.tuxboard.com/groupe_info.php?idgroupe=1

l'image c'est l'étoile !!

[MasterOfChakhaL]

Salut,

Ceci répond-il à ta requête?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<a href="#">un lien normal</a>
<a class="imglink" href="#"><img src="truc.gif" /></a>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
a:hover {
  background-color: #F00;
}
a.imglink {
  background-color: transparent !important;
}

[Joe Le Mort]

Parfait Master...

Le !important est en effet indispensable

[MasterOfChakhaL]

Presque parfait Joe...
Tu as oublié de cliquer résolu...

[Candygirl]

Quel est l'intérêt de mettre la couleur à transparent si après tu enlèves carrément la bordure ?

A rien, je me suis plantée en écrivant; je voulais mettre background-color pour le transparent, bien sûr

[Candygirl]

Parfait Master...

Le !important est en effet indispensable

Dans l'exemple de MasterofChakal oui, mais normalement pas si tu attribues le background-color:tranparent à a.imglink:hover au lieu de a.imglink:a.

[Joe Le Mort]

Presque parfait Joe...
Tu as oublié de cliquer résolu...

j'attendais vos remarques

[viviboss]

Et bien, autre remarque :

Je suis sur que dans Firefox les solutions proposés autre qu'avec le "!important" auraient marché....

Donc voilà une bonne conclusion : IE C'EST DE LA GROSSE DAUBE !!!!



Ce qui me soaul, c'est que tout le monde veut respecter les normes W3C, ce que je trouve très bien (moi aussi je le fais....), mais Microsoft, en tant que "leader" (j'espère pas pour longtemp !!! ) met ses propres normes, ce qui est relativement saoulant.

Parce que inutile de dire que Microsoft se fou éperduement du W3C et de la normalisation en générale !!!!

Ce qui est dommage.....

[MasterOfChakhaL]

Parce que inutile de dire que Microsoft se fou éperduement du W3C et de la normalisation en générale !!!!

Pourtant, microsoft fait partie du w3c
liste des membres du w3c

[Candygirl]

Je suis sur que dans Firefox les solutions proposés autre qu'avec le "!important" auraient marché....

Ben cette solution fonctionne aussi sur IE, il me semble:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
a:hover {
  background-color: #F00;
}
a.imglink:hover {
  background-color: transparent;
}
 
 
<a href="#">un lien normal</a>
<a class="imglink" href="#"><img src="truc.gif" /></a>

c'est juste que c'est moi qui avait fait une erreur en mettant border au lieu de background

Donc voilà une bonne conclusion : IE C'EST DE LA GROSSE DAUBE !!!!

Bon, ça, on est d'accord, il ne se passe pas un jour à monter un site sans que je le crie haut et fort

[viviboss]

Pourtant, microsoft fait partie du w3c
liste des membres du w3c

Oui, mais c'est comme les Etat Unis qui sont à l'ONU, on ne sait pas pourquoi : quand ils veulent faire quelque chose, ils se foutent de l'avis des autres !!!



Et puis de toute les façons : IE c'est de la daube, je ne reviendrai jamais assez là dessus !!!
....Et dire que IE7 reprend la majorité des fonctionnalités de Firefox.... Ca me tue !!! A croire qu'ils ne sont pas foutu de faire autre chose que "pomper" sur les autres.... (dixit : Windows est un pâle Fork de MAC OS, et Microsoft dépose des brevets sur des concepts issus du Libre !!!! Les en***** !!! )

Vive la liberté, vive la Revolussione !!!!

[Joe Le Mort]

je reviens vers vous parce que j'ai un soucis avec Firefox concernant le lien !

J'ai appliqué ce css, celui de MasterOfChakhaL:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a href="#">un lien normal</a>
<a class="imglink" href="#"><img src="truc.gif" /></a>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
a.imglink {
  background-color: transparent !important;
}
a.imglink:hover {
  background-color: transparent;
}
a:hover {
border-bottom:dashed #507AC9 1px;
color:#507AC9;
background-color:#e5ecf9;
}

je met le a:hover pour que vous ayez une vision de ce que j'obtiens :
www.tuxboard.com
voila mon site, FF me met des bottom-color dashed sur toutes mes images... IE ne pose pas de probleme (actuellement)