28172 sujets

CSS et mise en forme, CSS3

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:

<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
Modifié par idategto11 (10 Aug 2013 - 13:54)
Salut, Smiley smile

Déjà première remarque, les tableaux de mise en page, c'est HASBEEN et grave nul. Depuis (un bail) au moins plus personne de sérieux ne les utilisent. Il serait déjà plus pratique de remplacer ton menu par une liste, et de modifier son apparence avec du CSS :


<ul>
	<li><a href="">link</a></li>
	<li><a href="">link</a></li>
	<li><a href="">link</a></li>
	<li><a href="">link</a></li>
	<li><a href="">link</a></li>
</ul>




ul {
	margin:0; padding:0;
}

ul li {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	padding:5px 20px;
	margin-right:5px;
	background:url('img/li-normal.png') no-repeat;
}

ul li a {
	text-decoration:none;
	color:#000;
}

ul li:hover {
	background:url('img/li-hover.png') no-repeat;
}
Sujet clos
Aller à