Liens images : pas les bonnes actions

Slt
J'ai fait des liens survoles avec des images. Voila la code CSS :

/***** MES PHOTOS *****/
.bouton-mes-photos{
	width:203px;
	height:54px;
	background-image:url(../elements-des-pages/accueil/bouton-mes-photos-01.png);
	background-repeat:no-repeat;
	margin: 0px 50px;
}
.bouton-mes-photos a:hover{
	width:203px;
	height:54px;
	background-image:url(../elements-des-pages/accueil/bouton-mes-photos-02.png);
	cursor: default;
}

/***** PAYS BASQUE *****/
.bouton-pb{
	width:203px;
	height:54px;
	background-image:url(../elements-des-pages/accueil/bouton-pays-basque-01.png);
	margin: 30px 40px;
}
.bouton-pb:hover {
	width:203px;
	height:54px;
	background-image:url(../elements-des-pages/accueil/bouton-pays-basque-02.png);
	cursor: default;
}

.bouton-pb{
	background-repeat:no-repeat;
	background-position: 50px /*distance gauche*/ 20px;
}

Voila le code de ma page html :

        </table></td>
        <td width="57%" valign="top">
		
		<a href="WEEZO.HTM" title="mes photos"><div class="bouton-mes-photos"></div></a>
		  
        <a href="eh-eta-euskara/le-pays-basque.htm"><div class="bouton-pb"></div></a>
		          
		  </td>

Mon souci c'est que pour le lien Mes Photos l'action du survol ne marche pas et le curseur change d'apparence. Pour le liens Le Pays Basque l'action du survol marche mais la forme du curseur ne change pas. Et je ne comprend pas pourquoi l'image n'estpas entiere. en fait je voudrais avoir se genre de positionnement pour les 3 boutons et les 3 images : page d'essai fait uniquement en html.
La page fait avec le CSS.
Je n'arrive pas a voir d'ou ca peux venir.
Merci d'avance pour votre aide.
Modifié par nenex-eh (06 Dec 2008 - 14:37)

personne a la solution ?

Hello,

Ton sélecteur .bouton-mes-photos a:hover ne cible rien du tout, il n'y a pas de <a> à l'intérieur de ton .bouton-mes-photos.

Le div intérieur à tes liens me semble inutile, il te suffit d'appliquer la classe (bouton-truc ou bouton-machin) au lien en lui même (et de lui définir un display:block pour pouvoir lui donner des dimensions) et d'appliquer le hover directement dessus.

Merci pour ta reponse.

Tymlis a écrit :
Ton sélecteur .bouton-mes-photos a:hover ne cible rien du tout, il n'y a pas de <a> à l'intérieur de ton .bouton-mes-photos.

ben mon .bouton-mes-photos a:hover cible bien vers l'image (ou alors j'ai pas tout compris... faut dire que ca fait que quelque mois que je me suis vraiment penche sur le CSS ).

Tymlis a écrit :
Le div intérieur à tes liens me semble inutile, il te suffit d'appliquer la classe (bouton-truc ou bouton-machin) au lien en lui même (et de lui définir un display:block pour pouvoir lui donner des dimensions) et d'appliquer le hover directement dessus.

En fait, je fais <a class="bouton-pb" href="../eh-eta-euskara/le-pays-basque.htm"> </a>. Un display:block me permettra de le deplacer facilement aussi non ? par contre pour le hover je vois pas se que tu veux dire par "appliquer".
Comme je te disais ca fait que quelque mois que je me suis penche sur le CSS et que j'ai regarde des site (comme alsa et 2-3 autres). J'ai assez bien assimile certain truc. Pour les liens images survoles j'ai fait comme pour les liens texte qui eux marche bien.

Tymlis a écrit :
Le div intérieur à tes liens me semble inutile

Il est peut-être inutile, mais ce qui est sûr c'est qu'il est invalide. C'est une erreur den HTML de placer un élément de niveau bloc (par exemple un DIV) à l'intérieur d'un élément de niveau texte (par exemple un lien). Il faut toujours penser à valider ses pages HTML... et si on n'arrive pas à les valider, à réviser ses connaissances en syntaxe et règles d'écriture HTML.

nenex-eh a écrit :
ben mon .bouton-mes-photos a:hover cible bien vers l'image

Non, et même doublement non.

1. Ce sélecteur ne vise pas une image, mais un lien (les déclarations CSS étant appliquées lorsque le lien est survolé par le pointeur de la souris).
2. Ce sélecteur vise tout élément A placé à l'intérieur (comme enfant direct ou descendant) d'un autre élément qui porte la classe "bouton-mes-photos". Ton code HTML utilise la structure inverse: un élément qui porte la classe en question à l'intérieur d'un lien.

Révisons gaiment:
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php

Florent V. a écrit :
1. Ce sélecteur ne vise pas une image, mais un lien (les déclarations CSS étant appliquées lorsque le lien est survolé par le pointeur de la souris).
2. Ce sélecteur vise tout élément A placé à l'intérieur (comme enfant direct ou descendant) d'un autre élément qui porte la classe "bouton-mes-photos". Ton code HTML utilise la structure inverse: un élément qui porte la classe en question à l'intérieur d'un lien.

Révisons gaiment:
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php

haaa j'avais pas compris ca. Moi je pensais qu'il parlait de l'image . Je viens de lire ton lien (que je garde avec les autres sites utiles ). Si j'ai bien compris, dans le CSS ca doit se presenter comme ca :

a écrit :
a.bouton-mes-photos:link {
}

et

a écrit :
a.bouton-mes-photos:hover {
}

Et dans la page html

a écrit :
<a href="../eh-eta-euskara/la-langue-basque.htm" class="bouton-euskara"> </a>

Je me posais une question. Dans la balise <a> est-ce que l'ordre de la classe et du href est important ? dans mon cas est-ce que

a écrit :
<a href="../eh-eta-euskara/la-langue-basque.htm" class="bouton-euskara"> </a>

et

a écrit :
<a class="bouton-euskara" href="../eh-eta-euskara/la-langue-basque.htm"> </a>

c'est pareil ?