Problème d'hover sur la plupart des liens

Bonjour à tous,

Je rencontre un problème avec de nombreux liens sur ma page, lorsque je passe la souris dessus ces derniers se décalent de 5px sur la droite, le XHTML est valide mais également le CSS. N'étant pas un pro web designer et plutôt même une quiche, j'aimerai que quelqu'un puisse m'aiguiller car je ne trouve pas ce problème.

Code CSS

/* Général */
body { font-family : Arial, Verdana, sans-serif; font-size : 12px; color : #000000; background : #3d7ea9 url(./images/fond.gif) repeat-x top; margin : 0 auto 0 auto; } 

a:active { text-decoration : none; color : #1b6cbb; } 
a:link { text-decoration : none; color : #1b6cbb; } 
a:visited { text-decoration : none; color : #1b6cbb; } 
a:hover { text-decoration : underline; color : #97c653; } 

IMG { border : none; } 

h3 { color : #81b709; font-size : 14px;  } 
h4 { color : #666666; font-size : 14px;  } 

#site { width : 1000px; min-height : 100%; background : #e1f5fe url(./images/bg-site.gif) repeat-x top; border-left : 1px solid #346d93; border-right : 1px solid #346d93; text-align : left; 
margin : 0 auto 0 auto; } 

.coin-gauche { float : left; background : url(./images/coin-gauche.gif) no-repeat left top; width : 5px; height : 5px; } 
.coin-droite { float : right; background : url(./images/coin-droite.gif) no-repeat right top; width : 5px; height : 5px; } 

#haut { width : 1000px; height : auto; } 

#haut-espace { height : 10px; }
 
#haut-plan { float : left; color : #36999f; font-size : 11px; margin-left : 10px; } 
#haut-plan a { color : #36999f; font-size : 11px; } 
#haut-plan a:hover { text-decoration : underline; } 
#haut-vis { float : right; color : #999999; font-size : 11px; margin-right : 10px; } 

#haut-logo { float : left; width : 260px; height : 100px; border : none; } 

#haut-728 { float : right; margin-right : 5px; margin-top : 5px; margin-bottom : 5px; vertical-align : middle; }
 
#haut-menu { float : left; width : 700px; font-size : 12px; line-height : normal; text-decoration : none; } 
#haut-menu ul { margin : 0; padding : 10px 10px 0 10px; list-style : none; } 
#haut-menu li { position : relative; display : inline; margin : 0; padding : 0; } 
#haut-menu a { float : left; font-weight : bold; font-size : 12px; background : url(./images/menu-gauche.gif) no-repeat left top; margin : 0; padding : 0 0 0 4px; } 
#haut-menu a span { float : left; font-size : 12px; display : block; background : url(./images/menu-droit.gif) no-repeat right top; padding : 5px 15px 4px 6px; color : #fff; } 
#haut-menu a span { float : none; } 
#haut-menu a:hover span { color : #ffffff; } 
#haut-menu a:hover { background-position : 0% -42px; } 
#haut-menu a:hover span { background-position : 100% -42px; } 
#haut-edito { float : left; width : 290px; text-align : left; margin-top : 12px; } 
#haut-edito a, a:hover { font-weight : bold; } 

#contenu { clear : both; width : 990px; margin : 0 auto 0 auto; } 
#contenu-haut { width : 990px; height : 10px; background : url(./images/contenu-haut.gif) no-repeat; } 
#contenu-milieu { width : 988px; height : auto; background : #ffffff; border-left : 1px solid #a4c6d6; border-right : 1px solid #a4c6d6; } 
#contenu-bas { width : 990px; height : 10px; background : url(./images/contenu-bas.gif) no-repeat; }
 
#bas { clear : both; width : 1000px; height : 50px; margin : 0 auto 0 auto; } 

#colonne2 { float : right; width : 260px; height : auto; margin : auto 4px auto 0; } 
#colonne1 { width : 710px; height : auto; margin : auto 10px auto 4px; } 
#colonne1b { float : right; width : 300px; height : auto; } 
#colonne1a { width : 400px; height : auto; overflow : hidden; margin : auto 10px auto 0; } 

#a_la_une { width : 400px; height : auto; margin : 0 0 10px 0; } 
#a_la_une_big_image { width : 400px; height : 200px; } 
#a_la_une_titre_texte { width : 400px; height : 60px; background : #2997dd bottom; bottom : 0; } 
.a_la_une_titre a { font-family : Arial, Verdana, sans-serif; color : #ffffff; font-size : 16px; background : transparent none repeat scroll 0% 0%; text-decoration : none; } 
.a_la_une_titre a:hover { text-decoration : underline; } 
#a_la_une_texte a { font-family : Arial, Verdana, sans-serif; color : #ffffff; font-size : 11px; background : transparent none repeat scroll 0% 0%; text-decoration : none; } 
#a_la_une_texte a:hover { text-decoration : underline; } 
#a_la_une_big_image_bas { background : url(./images/alaune_bas.gif) no-repeat; width : 400px; height : 10px; } 
#a_la_une_big_image_haut { background : url(./images/alaune_haut.gif) no-repeat; width : 400px; height : 10px; top : 0; } 
#a_la_une_big_image_milieu { background : none; border-left : 1px solid #ff0000; border-right : 1px solid #ff0000; width : 398px; height : 180px; bottom : 0; left : 0; right : 0; } 

.a_la_une_suite_titre { float : left; width : 400px; height : auto; background : #ffffff; border-bottom : 1px dashed #cccccc; padding : 5px 0 5px 0; }
.a_la_une_suite_titre:hover { background : #efefef; } 
.a_la_une_suite_titre a, a:hover  { font-size : 12px; color : #05467c; font-weight : bold; text-decoration : none; }  

.a_la_une_suite_img { float : left; border : 1px solid #999999; width : 100px; height : 50px; top : 0; bottom : 0; }
 .a_la_une_suite_resume { float : right; width : 290px; height : auto; top : 0; bottom : 0; } 

 
#fil_info_haut { width : 300px; height : 22px; background : #6697c0; padding : 0 0 0 0; color : #ffffff; font-size : 12px; font-weight : bold; text-decoration : none; } 
.fil_info_date span { float : left; width : 298px; height : 15px; background : #E8E8E8; border-bottom : 1px solid #cccccc; color : #05467c; font-size : 11px; font-weight : bold; 
padding : 4px 0 2px 10px; } 
#fil_info_contenu { float : left; width : 298px; height : 200px; border : 1px solid #6697c0; color : #000000; text-decoration : none; font-size : 11px; overflow:auto; } 
.fil_info_titre { width : 296px; height : auto; background : #ffffff; border-bottom : 1px solid #cccccc; padding : 2px 0 2px 0; font-size : 11px; text-decoration : none; } 
.fil_info_titre:hover { width : 300px; height : auto; background : #efefef; border-bottom : 1px solid #cccccc; padding : 2px 0 2px 0; } 
.fil_info_titre span { color : #ff0000; text-decoration : none; font-weight : bold; padding : 2px 0 2px 5px; } 
.fil_info_titre a, a:hover { color : #000000; text-decoration : none; font-size : 11px; padding : 2px 0 2px 5px; } 
#fil_info_bas { float : left; width : 300px; height : 15px; background : #6697c0; text-align : right; margin-bottom : 10px; } 
a.fil_info_bas, a.fil_info_bas:hover { color : #ffffff; font-size : 10px; text-decoration : none; margin-right : 10px; } 

.dossiers_haut { border-bottom : 1px solid #6697c0; } 
#dossiers { width : 260px; height : auto; background : #EFEFEF url(./images/fond-dossiers.gif) repeat-x top; margin : 0 auto 0 auto; } 
.dossiers_main { float : left; width : 260px; height : auto; border-bottom : 1px dashed #cccccc; padding : 5px 0 5px 0; } 
.dossiers_img { float : left; border : 1px solid #6697c0; width : 73px; height : 55px; top : 0; bottom : 0; } 
.dossiers_titre { float : right; width : 180px; height : auto; top : 0; bottom : 0; margin : 0 0 0 0; } 
.dossiers_titre a { font-size : 14px; color : #05467c; text-decoration : none; } 
.dossiers_titre a:hover { text-decoration : underline; } 
.dossiers_titre span { color : #999999; font-size : 12px; text-align : left; } 

URL vers la page : http://www.virtual-soccer.net/v2/welcome/index.php

Merci d'avance et bonne journée

Emilien
Modifié par Emilien59 (27 May 2008 - 18:34)

Bonjour Emilien,

Sans reprendre l'ensemble de ton code voici les propriétés qui influent sur tes liens "à la une suite résumé" :

a:link (line 5)
{
text-decoration: none;
color: #1b6cbb;
}
[#blue][b]a:hover [/b][/#](line 7)
{
text-decoration: underline;
color: #97c653;
}
#haut-edito a, [#blue][b]a:hover [/b][/#](line 43)
{
font-weight: bold;
}
.a_la_une_suite_titre a, [#blue][b]a:hover [/b][/#](line 70)
{
font-size: 12px;
color: #05467c;
font-weight: bold;
text-decoration: none;
}
.a_la_une_suite_titre a, [#blue][b]a:hover [/b][/#](line 70)
{
font-size: 12px;
color: #05467c;
font-weight: bold;
text-decoration: none;
}
.fil_info_titre a, [#blue][b]a:hover [/b][/#](line 83)
{
color: #000000;
text-decoration: none;
font-size: 11px;
padding-top: 2px;
padding-right: 0pt;
padding-bottom: 2px;
[#red]padding-left: 5px;[/#]
}

Je suis restaurateur et je te propose 15 plats...qui portent tous le même nom...quel sera ton choix ?
Les navigateurs face à ce choix Cornélien ont décidé d'appliquer le dernier choix proposé (à niveau de priorité égal) et d'écraser les autres...

Donc [ padding-left: 5px; ]

Pour t'en persuadé rajoute (pour la dernière propriété qui influe sur les liens "suite résumé") .fil_info_titre devant a:hover (et d'une façon générale dans ta css)

Je ne sais pas si tu pensais à ces liens précisemment, ni si le problème se répête dans ta page, mais c'est une erreur à éviter si tu ne souhaites pas rencontrer ce type de désagrément

Cdt,
Sylvain

Merci de ta réponse, ça m'éclaire

donc si je comprends bien, il s'agît d'un problème d'héritage ?

En gros moi ce que je voulais faire pour simplifier le tout ( je te donne un exemple et ci-possible peux-tu me le corriger pour voir où je fais des erreurs).

#principal { background:#000000;} [i](Div ID qui engloble le tout)[/i]
#haut {background:FFCC00; color:#FFFFFF; } [i](Div ID qui affiche le haut)[/i]
.titre-article {width:250px; height:30px; } (Div CLASS qui affiche le titre des articles)
a.titre-article {color:#CCCCCC; text-decoration:none; }
a.titre-article:hover {color:#999999; text-decoration:underline; }
#bas {background:FFCC00; } [i](Div ID qui affiche le bas)[/i]

En gros c'est ça, mais comme je n'ai jamais rien lu sur le CSS et que ce n'est pas du tout ma filière professionnelle, il y a des trucs (niveau héritage surtout) que je n'arrive pas encore à comprendre.

Merci d'avance en tout cas

Hello,

Je t'encourage à lire "quelques" tutoriels que tu trouveras à foisons ici même (n'hésites pas à parcourir les "annonces" dans chaque forum, elles sont truffés de ressources intéressantes ici par exemple
Voici une bonne mise en bouche pour débuter

C'est un travail de longue haleine, mais ça en vaut la peine

L'héritage ?
Pour faire simple, si tu as une élément X contenu dans un élément Y ce dernier héritera des propriétés de cet élément Y.
ex:

#elementY {
text-align:center;
color:#3E6F4E;
font-weight:bold;
}
#elementX {
text-decoration:underline;
}

<div id="elementY">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<div id="elementX> Mon beau sapin</div>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Mon beau sapin sera évidemment souligné, mais également vert, gras, et centré, ce qui n'est pas si mal pour un sapin

Concernant la cascade, les priorités ou le poids d'une déclaration, je te laisse parcourir l'article d'Openweb

Mais par exemple en ce qui concerne ton site

a:hover

à moins de poids que

.fil_info_titre a:hover 

Mais si tu n'as que des déclarations "a:hover" sans spécificités seul ta dernière déclaration aura un effet

Bon apprentissage,
Cdt,
Sylvain