Bouton qui change d'image en survolant

Madmata · 03/12/2010, 20h39

Bien le bonjour, je suis tout nouveau sur ce forum.

J'ai un soucis (vous vous en doutiez je suis sur !)

Pour mes cours je dois faire une refonte d'un site web, j'ai décidé de mettre des boutons qui changent de couleur quand on le survol avec la sourie.

J'avais pensé avoir la solution après reflexion, mais après essai ça ne marchais pas >.<

Code css :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
@charset "UTF-8";
/* CSS Document */
 
body {
	background:url(images/fond.png) black center top no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
}
 
 
#container {
	width:1002px;
	margin:0 auto;
 
}
 
#topbar {
	background:url(images/Header.png) no-repeat;
	width:723px;
	height:143px;
	margin:36px auto 0 auto;
 
}
 
#navbar {
	background:url(images/barre_menu.png) no-repeat;
	width:1002px;
	height:31px;
	margin:31px auto 0 auto;
}
 
#navbar a:link {
	color:#FFF;
	text-decoration:none;
}
#navbar a:visited {
	color:#FFF;
}
/* C'est ici que ça foire .... je ne sais pas encore pourquoi, et il manque le hover de l'accueil */
a .accueil:hover {
	background:url(images/bouton_on.png) no-repeat;
	width:120px;
	height:31px;
}
 
 
 
 
.accueil {
	width:120px;
	height:31px;
	font-weight:bold;
	float:left;
	position:absolute;
	margin:7px 0 0 55px;
}

Code xhtml :

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
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" media="screen" type="text/css" href="Styls.css" />
 
<title>Titre de mon site</title>
 
</head>
 
<body>
 
<div id="container">
<div id="topbar"></div>
<div id="navbar">
<div class="accueil"><a href="index.html">Accueil</a></div>
<div class="mariage"><a href="#">Mariages</a></div>
<div class="soirees"><a href="#"><p>Soirées<br />prestige</p></a></div>
<div class="seniors"><a href="#">Séniors</a></div>
<div class="cours"><a href="#"><p>Cours<br />de chant</p></a></div>
<div class="parcour"><a href="#">Parcours</a></div>
<div class="partenairs"><a href="#">Partenairs</a></div>
<div class="contact"><a href="#">Contact</a></div>
</div>

ornitho13 · 04/12/2010, 00h19

salut,

d'après ce que j'en vois ton css :hover n'est pas bon, le "a . accueil" n'existe pas ce serait plutot ceci d'après ton code CSS:

Code css :

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

1
2
3
4
5
6
 
.accueil a:hover {
background:url(images/bouton_on.png) no-repeat;
width:120px;
height:31px;
}

En effet le "a" se trouve dans la div "accueil" et non l'inverse.

Madmata · 04/12/2010, 01h26

Déjà, merci pour ta réponse

La solution que tu propose est en faite le premier essai que j'avais essayé, et ça ne m'affiche pas l'image en entier, mais seulement l'image tronqué à la taille du texte du bouton

(et autre petit probleme, j'étais passé par le css et le html validator du W3C en espérant qu'il trouverai des erreurs qui corrigeraient mon probleme, mais non ... cependant il m'a dit que dans mon html les ligne

Code :

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

<div class="soirees"><a href="#"><p>Soirées<br />prestige</p></a></div>

et

Code :

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

<div class="cours"><a href="#"><p>Cours<br />de chant</p></a></div>

avaient un probleme avec le "<p>" apparement.
en copié collé ça donne :

Citation:

document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<div class="soirees"><a href="#"><p>Soirées<br />prestige</p></a></div>

Mais j'ai pas bien pigé ce que je pouvais faire pour corriger ça (j'ai du mettre ce bouton en deux ligne car il ne rentrait pas dans la case)

ornitho13 · 06/12/2010, 10h04

En fait dans une balise <a>, il ne faut pas mettre de balise <p>, c'est interdit à cause de ton type de document.
Si tu veux mettre ton bouton sur 2 lignes, il faut limiter la taille de ton <a> via la css

06/12/2010, 10h04	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	En fait dans une balise <a>, il ne faut pas mettre de balise <p>, c'est interdit à cause de ton type de document. Si tu veux mettre ton bouton sur 2 lignes, il faut limiter la taille de ton <a> via la css
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email