Menu avec rollover

**idate** · 10/08/2013, 13h47

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 :

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

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

**Candygirl** · 10/08/2013, 14h44

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

. Tu devrais encore renseigner l'attribut alt de l'image de tes menus.

**idate** · 10/08/2013, 15h01

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...

Invité · 10/08/2013, 15h18

bonjour,

Code css :

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

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

**Candygirl** · 10/08/2013, 15h22

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.

**rodolphebrd** · 10/08/2013, 16h49

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.

Menu avec rollover [CSS 3]

CSS

Vue hybride

Discussions similaires

Partager

Partager