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 :

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

Bouton qui change d'image en survolant

CSS

Discussions similaires

Partager

Partager