[CSS 3] Menu avec rollover

Menu avec rollover

Bonjour à tous,

Je suis actuellement entrain de vouloir animé un peu le menu de mon site.

Mon menu: C'est un table avec 8 TD. Dans chaque TD, j'ai une image du nom de la catégorie en png.

Je voudrais que lors d'un hover, une image (un cube bleu en png) apparaisse derrière mon image du TD.

J'arriver à faire marcher le hover mais mon image apparait en décaler à l'arrière, du coup c'est pas top.

Voila mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
</head>
 
<style>
 
#tablemenu{
	margin-left: 165px;
	padding-top: 202px;
	margin-bottom: 50px;
}
 
.cat{
	width: 100px;
	height: 100px;
}
 
.cat:hover{
	background-image: url(images/design/fond2.png);
 
}
 
.cat a:hover{
	background-image: url(images/design/fond2.png);
}
</style>
 
<body>
	<table id="tablemenu" cellpadding="9px">
		<tr>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=Accueil"><img src="images/design/nAccueil.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=Jouer"><img src="images/design/njouer.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=Serveur"><img src="images/design/nserveur.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=Maps"><img src="images/design/nmaps.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=Boutique"><img src="images/design/boutique.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=La Team"><img src="images/design/nteam.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=FAQ"><img src="images/design/nfaq.png" alt="" ></td>
					<td valign="middle" class="cat_1 cat"><a href="index.php?nav=Contact"><img src="images/design/ncontact.png" alt="" ></td>
		</tr>
	</table>
</body>
 
</html>

Voici le rendu: http://aumtuto.verygames.net/test2.php

Savez-vous ou est ce que ça bloque?

Merci d'avance

Bonjour,

Il semblerait que tu sois parvenu à tes fins ? (cf le 2ème menu de ta page test). De plus tu sembles avoir abandonné ta structure en tableaux au profit d'une liste :ccool:. Tu devrais encore renseigner l'attribut alt de l'image de tes menus.

Oui je suis entrain d'y arriver mais ils restent quelques erreurs. Je voudrais que le cube soit aligné centré sur l'image de mon texte.

J'ai utilisé pleins de méthodes différentes, je n'y arrive pas...

bonjour,

Code:

background-image: url(images/design/fond2.png) center center no-repeat;

En plus du réglage du background-position indiqué par jreaux62, tu dois corriger la hauteur de tes liens. Ton image de fond fait 70px mais tu as donné une hauteur de 70px + 20px de padding=90px. Change le height de 70 en height de 50px.

Bonjour,

il faut veiller à bien renseigner l'attribut alt de chaque pour donner du sens aux items du menu et améliorer le référencement de la page.