[resolu]Hover besoin d'aide

Bonjour à tout le monde et meilleurs voeux pour cette nouvelle année!!!
Je viens vers vous car je rencontre quelques difficultés à mettre en place un hover.

Je fais une boucle php d'actualités (4 au total) que je voudrais présenter de manière identique les une au dessous des autres.

Pour chaque actualité je fais apparaitre une photo, sur sa droite (de la photo) la date de l'actualité et en dessous de cette date le titre.

Pour chaque actualité, je met une image de fond (un degradé blanc vers gris) -->cf exemple1.jpg

L'idée que je voulais mettre en pratique, était qu'au survol de l'actualité, je fasse apparaitre un nouveau fond avec la classe hover en css comme sur exemple2.jpg

Le souci est le suivant, quand je survole la date ou encore le titre, l'image devant apparaitre en hover apparait derrière mais apparait aussi au niveau de chaque élément.

Comment faire pour éviter ce désagrement.

je vous donne le code de ma page php:

<div id="lien-actu">
    <a href="actu-fcc.php?actu='.$liste_actu[$i]['id_actu'].'">
							<table class="table-actu">
								<tr>
								   <td rowspan="2"><img class="img" src="'.$liste_actu[$i]['vignette'].'" title="'.$liste_actu[$i]['titre_photo'].'"/></td>
								   <td class="date1">'.$liste_actu[$i]['date_actu'].'</td>
								</tr>
								<tr>
								   <td class="titre1">'.$liste_actu[$i]['nom_actu'].'</td>
								</tr>
							</table>
    </a>
							</div>

ma page css:

div#lien-actu {
	margin-top: 4px;
	margin-left: 4px;
	height: 55px;
	width:310px;
	background:url(../img/fond/bouton-index.jpg) no-repeat;
}
div#lien-actu a{
	text-decoration:none;
	height: 55px;
	width:310px;
	display: block;
	cursor:pointer;
}
div#lien-actu :hover {
	background:url(../img/fond/bouton-index-hover.jpg) no-repeat;
}

Merci par avance pour toute aide apportée.
Modifié par dread (30 Jan 2009 - 17:15)

salut,
tu as fait un lien sur le tableau entier, c'est sûrement pour cela que tous les éléments sont mis avec le même background.

Je serais assez d'accord avec toi.
Mais dans ce cas là, comment faire pour que mon background change et que les éléments intérieurs ne viennent pas perturber mon hover?

Il faut éviter la table?

Bonjour,

Tu as un double problème:

1. Le TABLE dans un A. C'est invalide en HTML, et tu cours le risque qu'un navigateur tente de corriger ce code invalide (plutôt que d'afficher une page d'erreur comme il le ferait par exemple pour du XML ) en considérant que ton lien est fermé dès que le TABLE commence, par exemple. Donc oui, il faut éviter.

2. Ton sélecteur CSS dit: appliquer ce style (l'image de fond) à tout élément à l'intérieur de div#lien-actu, lorsqu'il est survolé. Ce style s'appliquera donc pour A, TABLE, TR, TD, et tout autre élément utilisé. Pour rappel, les espaces entre les différentes parties d'un sélecteur CSS sont significatifs: il s'agit du sélecteur de descendants. Tu voulais peut-être écrire div#lien-actu:hover ou div#lien-actu a:hover?

Merci pour tous ces conseils que je vais suivre. En tentant autre chose, je suis parvenu à ce que je souhaitais faire.

Le code de ma page:

<table class="table-actu">
								<tr>
								   <td rowspan="2" class="photo"><a href="" title=""><img class="img" src="'.$liste_actu[$i]['vignette'].'" title="'.$liste_actu[$i]['titre_photo'].'"/></a></td>
								   <td class="date1"><a href="" title="">'.$liste_actu[$i]['date_actu'].'</a></td>
								   <td rowspan="2" class="vide"><a href="" title="">&nbsp;</a></td>
								</tr>
								<tr>
								   <td class="titre1" valign="top"><a href="" title="">'.$liste_actu[$i]['nom_actu'].'</a></td>
								</tr>
							</table>

et mon css:

.table-actu {
	position: relative;
	margin: 0 0 4px 4px;
	height: 55px;
	width:310px;
	background:url(../img/fond/bouton-index.jpg) no-repeat;
}
.table-actu a{
	display:block;
	text-decoration:none;
}
.table-actu:hover{	
	background:url(../img/fond/bouton-index-hover.jpg) no-repeat;
	color:#FFFFFF;
}

Donc enlevant le a qui englobait ma table et en mettant des a sur chaque élément de ma table, le problème est résolu.

Juste une question comme ca en passant. Pourquoi firefox a souvent du mal à comprendre les margin et notamment les margin-top. Souvent je suis obliger de passer par des padding sur les div englobant l'élément que je voulais marger pour obtenir un résultat satisfaisant?
C'est un problème récurrent chez moi puisque j'aspire toujours à obtenir une mise en page identique entre les navigateurs ou du moins entre ff et IE.

dread a écrit :
Juste une question comme ca en passant. Pourquoi firefox a souvent du mal à comprendre les margin et notamment les margin-top.

Tu veux dire Firefox, ou bien Firefox, Safari, Opera, Chrome, Konqueror, Internet Explorer 8, voire même IE7 et IE6 quand ces derniers ne déconnent pas pour telle ou telle raison?

Dans le deuxième cas (le premier m'est absolument inconnu), je dirais que ça vient de là:
http://covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Ok ok j'ai bien reçu le message. Il est clair qu'il n'existe pas encore de navigateur qui soit à 100% parfait. L'idéal serait sans doute de n'avoir qu'un seul et unique navigateur mais ne faisont pas dans le monopole.
En tout cas, ton lien correspond totalement à mon problème. Je te remercie pour cette source d'information qui me sera bien utile et qui m'a permis d'en apprendre plus sur les comportement css!!!
Je m'en vais de ce pas mettre résolu pour ce topic.
Merci encore!!

dread a écrit :
L'idéal serait sans doute de n'avoir qu'un seul et unique navigateur

On a eu ça et ça s'appelait IE6. Résultat: un navigateur intéressant (malgré d'innombrables défauts) à sa sortie, et de plus en plus obsolète alors que les années passaient et que Microsoft l'avait laissé à l'abandon.

Sans Firefox et, dans une certaine mesure, Safari, on n'aurait jamais eu d'IE7, et certainement pas un IE8 refondu et implémentant enfin correctement CSS 2.1.

Non, vraiment, on a besoin de concurrence. Et de standards.

dread a écrit :
En tout cas, ton lien correspond totalement à mon problème. Je te remercie pour cette source d'information qui me sera bien utile et qui m'a permis d'en apprendre plus sur les comportement css!!!

Et comme la V3 d'Alsacréations est enfin publique (depuis une heure!), tu peux lire ceci:
http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

(Je vais d'ailleurs supprimer cet article sur covertprestige.info...)