Problème de positionnement d'image de fond

**eric41** · 20/10/2008, 23h14

Bonjour,
J'ai un problème avec mes styles.

Code :

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
.menu {
	width: 200px;
	margin: 0px 20px 20px 20px;
	padding-right: 12px;
	padding-bottom: 15px;
	background-image: url(images/fond_bas_menu.png);
	background-reapeat: no-repeat;
}
.menu_item {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
	height: 20px;
	width: 200px;
	border-left: 1px solid #A4A4A4;
	border-right: 1px solid #A4A4A4;
	padding: 5px 5px 5px 5px;
	background-color: #F4F4F4;
	display: block;
	text-align: left;
}
.menu_form {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
	height: auto;
	width: 200px;
	border-left: 1px solid #A4A4A4;
	border-right: 1px solid #A4A4A4;
	padding: 5px 5px 0px 5px;
	background-color: #F4F4F4;
	display: block;
	text-align: center;
}

Ma classe menu_item fonctionne correctement. Mais quand je change la hauteur (voir classe menu_form), j'ai un problème de décalage de l'image de fond de la partie basse, et je ne trouve pas ce qui cloche. J'ai essayé de virer le height, mais ça fait pareil.

Pour que ce soit plus pratique, je vous ai mis tous ce qu'il faut dans un ZIP.
http://dl.free.fr/qCODKNJUW

**blueice** · 21/10/2008, 11h20

Code html :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
 
<!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" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
 
<style type="text/css">
.titre_menu {
        font-family: Verdana, Helvetica;
        font-size: 10pt;
        font-weight: Bold;
        text-align: center;
        width: 202px;
        height: 20px;
        margin: 0px 20px 0px 20px;
        padding: 2px 5px 2px 5px;
        background: url(images/fond_titre_menu.png) 0 0 no-repeat;
}
.menu {
        width: 200px;
        margin: 0px 20px 20px 20px;
        padding-right: 12px;
        padding-bottom: 15px;
        background: url(images/fond_bas_menu.png) 0 0 no-repeat;
}
.menu_item {
        font-family: Verdana, Helvetica;
        font-size: 10pt;
        height: 20px;
        width: 200px;
        border-left: 1px solid #A4A4A4;
        border-right: 1px solid #A4A4A4;
        padding: 5px 5px 5px 5px;
        background-color: #F4F4F4;
        display: block;
        text-align: left;
}
.menu_form {
        font-family: Verdana, Helvetica;
        font-size: 10pt;
        height: auto;
        width: 200px;
        border-left: 1px solid #A4A4A4;
        border-right: 1px solid #A4A4A4;
        padding: 5px 5px 0px 5px;
        background-color: #F4F4F4;
        display: block;
        text-align: center;
}
 
.menu_item:hover,.menu_item:active {
        background-color: #DDDDDD;
}
</style>
</head>
 
<body>
 
 
<div class="titre_menu">titre</div>
<div class="menu">
	<div class="menu_item">Ligne 1</div>
	<div class="menu_item">Ligne 2</div>
	<div class="menu_item">Ligne 3</div>
</div>
 
 
<div class="titre_menu">titre</div>
<div class="menu">
	<div class="menu_form">Ligne 1<br />
	Ligne 2<br />
	Ligne 3</div>
</div>
 
 
</body>
</html>