Rollover css

Bonjour à toutes et à tous,
je suis nouveau sur ce forum et j'ai besoin d 'un petit coup de pouce de vôtre part,
j'ai suivi un tutoriel de rollover en css sur le site suivant:

http://css.mammouthland.net/liste-de-discussion-pompeurs-css.php.

Le problème est que l'effet rollover ne s'applique pas, pourriez vous m'aider à comprendre svp? voici mes lignes de code:

html:

<div class="services">
<p>
<a href="#"><font color="black">Services</font></a>
</p>
</div>
[/code}

css:

[code]
.services a{
	display:block;
	width: 210px;
	line-height: 35px;
	text-align:center;
	vertical-align: middle;
	background: url("../images_Accueil/services1.gif") no-repeat;
	color:white;
	text-decoration: none;
	margin-top: 125px;
}

.services a: hover
{
	background:url("../images_Accueil/services2.gif");
}

Merci d'avance.
Modifié par kyubidog (09 Jan 2010 - 14:25)

Bonjour,

Trois problèmes:

1. Tu n'as pas rédigé ton message selon les règles du forum, en utilisant notamment le bouton «code» pour encadrer tes extraits de code par les balises [ code ] et [ /code ] (sans espaces). Pourrais-tu modifier ton message ci-dessus (en utilisant le bouton «éditer») pour en améliorer la lisibilité?

2. Tu utilises une balise <font>.

3. Ton deuxième CSS est faux. Il y a un espace en trop.

kyubidog a écrit :
Bonjour à toutes et à tous,
je suis nouveau sur ce forum et j'ai besoin d 'un petit coup de pouce de vôtre part,
j'ai suivi un tutoriel de rollover en css sur le site suivant:

http://css.mammouthland.net/liste-de-discussion-pompeurs-css.php.

Le problème est que l'effet rollover ne s'applique pas, pourriez vous m'aider à comprendre svp? voici mes lignes de code:

html:

<div class="services">
<p>
<a href="#"  color="black">Services</a>
</p>
</div>

css:

.services a{
	display:block;
	width: 210px;
	line-height: 35px;
	text-align:center;
	vertical-align: middle;
	background: url("../images_Accueil/services1.gif") no-repeat;
	color:white;
	text-decoration: none;
	margin-top: 125px;
}

.services a: hover
{
	background:url("../images_Accueil/services2.gif");
}

Merci d'avance.

Merci bien, donc j ai supprimé le <font> mais je ne vois pas où est l'espace en trop...

Modifié par kyubidog (09 Jan 2010 - 14:30)

AAAAH si c'est bon, 1000 merci

Mazette... va vraiment falloir que j'explique mieux ce que sont des éléments dépréciés

A part cela, je ne sais pas comment est le reste de ta feuille de style, mais vu que tu déclares une couleur de texte blanche, il vaut mieux préciser aussi une couleur de fond dans le background, pour éviter de se retrouver avec du texte blanc sur fond blanc si les images ne sont pas chargées.
Genre ça :

background: [b]#000000[/b] url("../images_Accueil/services1.gif") no-repeat;

(#000000 correspond à la couleur noire)