Problème menu avec :hover

Bonjour,

Voila j'ai un petit site internet a faire en statique pour ma formation afin d'être evaluer sur l'utilisation HTML/CSS.
J'ai un petit problême pour la création d'un menu.
En effet, on nous impose que la page d'accueil contienne un menu avec des icones (pas forcement identiques).
Chaque élément est encadré et lors du passe de la souris, les bordures droite et basse changent de couleurs ainsi que le texte.

J'ai donc créée un tableau de 6 cases

<table>
    <tr>
        <td><a href="page1.html">Page 1</a></td>
        <td><a href="page2.html">Page 2</a></td>
        <td><a href="page3.html">Page 3</a></td>
    </tr>
        <td><a href="page4.html">Page 4</a></td>
        <td><a href="page5.html">Page 5</a></td>
        <td><a href="page6.html">Page 6</a></td>
    <tr>
    </tr>
</table>

#info table 
{
	margin:auto;
	border:2px #ff00ff solid;
}
#info td
{
	height:52px;
	font-size:x-large;
	line-height:52px;
	background-color:#ff00ff;
	border:1px solid black;
	text-align:center;
	min-width:150px;	
}
#info td:hover
{
	border-bottom:2px solid #545454;
	border-right:2px solid #545454;
}
#info a
{
	text-decoration:none;
	color: white;
}
#info a:hover
{
             color:black;
}

Le problême c'est qu'avec le :hover, il faut aller sur la case pour que les bordures changent et ensuite se positionner sur le texte situer au centre pour que la couleur de celui-ci changent.
Les transformations s'effectuent donc en 2 temps.
Comment faire pour que des que la souris est sur la case (le coin par exemple), le texte changent aussi de couleurs ? Que tout soit syncro koi ?


merci de votre aide

Bonjour maxencer,

D'abord, l'utilisation d'un tableau n'est pas justifiée ici. Il vaudrait mieux utiliser une liste.

Tu peux jeter un oeil à Listamatic qui propose beaucoup de menus en HTML/CSS. En regardant le code et en le modifiant, tu pourras sans doute obtenir le résultat désiré.

Bonjour,

maxencer a écrit :
Le problême c'est qu'avec le :hover, il faut aller sur la case pour que les bordures changent et ensuite se positionner sur le texte situer au centre pour que la couleur de celui-ci changent.

En même temps c'est exactement ce que tu demande à ton code...

La solution, utiliser des listes.

Accessoirement, il est peut-être important de noter que les pseudo classes, dont :hover, ne sont fonctionnelles avec IE6 que lorsqu'elles sont attribuées à un élément <a>. Donc l'effet sur le TD ne fonctionnera pas.

Si tu fait une petite recherche dans la partie "Apprendre" du site, tu devrait trouver de quoi contruire des menu sans tableaux (et tout le reste du site également).

ps. : ta touche "!" est coincée ?
Modifié par Laurie-Anne (26 Nov 2009 - 08:41)

Laurie-Anne a écrit :
En même temps c'est exactement ce que tu demande à ton code...

En effet. On peut aussi lui demander d'appliquer un style aux liens lorsque le TD parent est survolé:

#info td:hover > a {...}

Ceci dit, je rejoins les autres intervenants sur le fait qu'un tableau n'est à priori pas indiqué ici. Dans le cadre d'une évaluation sur HTML et CSS, l'usage non justifié d'un tableau de mise en page pourrait être sanctionné. Du moins il devrait être sanctionné si le prof est bon.

Par ailleurs, pour un menu de navigation il serait plus logique qu'à la fois le texte et l'icone soient cliquables. Conclusion: l'icone doit faire partie du lien (en background CSS, pourquoi pas).

Laurie-Anne a écrit :
Accessoirement, il est peut-être important de noter que les pseudo classes, dont :hover, ne sont fonctionnelles avec IE6 que lorsqu'elles sont attribuées à un élément <a>. Donc l'effet sur le TD ne fonctionnera pas.

À moins que l'évaluation ne soit faite sous IE6 (à vérifier), ça n'a pas une grande importance pour des effets cosmétiques.

Ceci dit, en plaçant les icones comme background des liens, on peut résoudre le problème et obtenir:
- une meilleure ergonomie (l'utilisateur n'a pas à se demander si la zone est cliquable ou juste le texte: c'est toute la zone, et puis voilà);
- la compatibilité IE6 pour cet effet.

Laurie-Anne a écrit :
ps. : ta touche "!" est coincée ?

Juste pour info pour maxencer: j'ai corrigé ce bug dans le titre du sujet.

Bonjour,

Merci beaucoup pour vos réponses.

Je n'avais pas du tout pensé a utiliser des listes et il est vrai que j'ai réussi a faire ce que je voulais sans trop de difficulté. j'y penserai pour mes prochains developements !

Merci Tony Monast pour le site, il m'a donné quelques idées.

Sinon, Laurie-Anne, non ma touche n'était pas coincée mais je n'ai pas fait expres d'en mettre autant .


Pour te répondre Florent V., l'évaluation n'est pas faite seulement sur ie6, il faut juste que le site soit compatible avec plusieurs navigateurs sans qu'il n'y est trop de dégats ^^ !
Pour l'histoire de tableau, je ne pense pas qu'il y aura sanction si on en utilise ou ce n'est pas justifié. L'evaluation a juste pour but de savoir si l'on a assimilé le les bases HTML/CSS.


cordialement