//// Edit : Ca a un rapport avec les divs qui ont height:100%, parceque ce sont leurs fonds qui ne s'affichent pas...


Bonjour,

Je me retrouve avec un problem que j'arrives pas a resoudre.
J'ai trois divs les uns a cote des autres. Ils ont tous des images ou couleurs de fond.
Lorsque un des divs contient du text, et que l'utilisateur diminue la fenetre pour faire apparaitre le scrollbar du navigateur, lorsqu'on scroll vers le bas pour voir le taxt, les arrieres plans (que ce soit une image ou une couleur) n'apparaissent plus dans la frachement decouverte...
Voila mon code html :

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
	    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
 
	<body>	
		<div class="conteneur">
			<div class="colonneG"></div>
			<div class="contenu">
				<table cellpadding="0" cellspacing="0">
					<tr bgcolor="#e5e5e5">
						<td height="49"></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td width="71" bgcolor="e5e5e5" align="right"><img src="img/menuShadow_1.jpg" alt="" /></td>
						<td><img src="img/menu_top.jpg" alt="" /></td>
						<td width="69" bgcolor="e5e5e5"><img src="img/menuShadow_2.jpg" alt="" /></td>
					</tr>
					<tr>
						<td class="menuSpace" align="right"><img src="img/menuShadow_3.jpg" alt="" /></td>
						<td>
							<ul class="menu">
								<li><a href="" class="accueil"></a></li>
								<li><a href="" class="chambres"></a></li>
								<li><a href="" class="appartements"></a></li>
								<li><a href="" class="reservation"></a></li>
								<li><a href="" class="contact"></a></li>
							</ul>
						</td>
						<td class="menuSpace"><img src="img/menuShadow_4.jpg" alt="" /></td>
					</tr>
					<tr>
						<td align="right"><img src="img/menuShadow_5.jpg" alt="" /></td>
						<td><img src="img/menu_bottom.jpg" alt="" /></td>
						<td><img src="img/menuShadow_6.jpg" alt="" /></td>
					</tr>
				</table>
				<div class="textAccueil">
					Bienvenue &agrave; notre bed &amp; breakfast &quot;Le 3 Mai&quot;.<br>
					Notre chaleureux g&icirc;te est situ&eacute; &agrave; deux minutes de la rue Ste-Catherine,<br>
					des bars, restaurants et du m&eacute;tro.<br><br>
 
					Nous vous offrons 5 chambres avec deux salles de bain partag&eacute;es, climatiseur et t&eacute;l&eacute; c&acirc;bl&eacute;e. <br>
					Un copieux d&eacute;jeuner continental vous est servi tous les matins entre 9H00 et 11H00. <br>
					Trois appartements compl&egrave;tement meubl&eacute;s sont &eacute;galement disponibles<br>
					pour vos s&eacute;jours prolong&eacute;s.<br>
					C'est avec grand plaisir que nous vous informerons sur les diff&eacute;rentes activit&eacute;s et festivit&eacute;s<br>
					qui se d&eacute;roulent dans la ville, le jour comme la nuit.<br> <br>
 
					En esp&eacute;rant vous accueillir lors de votre prochain s&eacute;jour &agrave; Montr&eacute;al,<br>
					je serai heureux d’&ecirc;tre votre h&ocirc;te.
				</div>
			</div>
			<div class="colonneD"></div>
		</div>
	</body>
</html>

Et voila mon code CSS :

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/* CSS Document */
 
html,body{
      margin:0;
      padding:0;
      height:100%;
      border:none;
}
 
html{
		overflow-x: hidden; 
		overflow-y: auto;
		overflow : -moz-scrollbars-vertical;
}
 
body{
	text-align: center ;
	font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background-image:url(../img/fond.jpg);
	background-repeat:repeat-x;
 
}
 
div.conteneur{
	width: 981px ;
	height:100%;
	text-align: left ;
	background-color:#e5e5e5;
}
 
div.colonneG{
	width: 135px;
	height: 100%;
	float:left;
	background-image:url(../img/coloneG_main.jpg);
}
 
div.colonneD{
	width: 85px;
	height: 100%;
	float:left;
	background-image:url(../img/coloneD_main.jpg);
}
 
div.contenu{
	width: 761px;
	height:100%;
	float:left;
	background-color:#f5f5f5;
}
 
div.textAccueil{
	background-image:url(../img/page_home/titre.jpg);
	background-repeat:no-repeat;
	background-color:#f5f5f5;
	padding-left:50px;
	padding-top:187px;
	color:#545454;
}
 
td.menuSpace{
	background-image:url(../img/menu_spacer.jpg);
}
 
 
ul.menu{
	margin:0;
	padding:0;
	list-style-type:none;
}
 
ul.menu li{
	float: left ;
	text-align: center ;
}
 
ul.menu li a{
	height: 16px;
	display:block;
	cursor:hand;
}
 
ul.menu li a:hover{
	display: block ;
	height: 16px;
	cursor: hand;
	background-position: 0px -16px;
}
 
.accueil{
	background:url(../img/btn_accueil.jpg) no-repeat 0px 0px;
	width:107px;
	height:16px;	
}
 
.appartements{
	background:url(../img/btn_appartements.jpg) no-repeat 0px 0px;
	width:147px;
	height:16px;	
}
 
.chambres{
	background:url(../img/btn_chambres.jpg) no-repeat 0px 0px;
	width:120px;
	height:16px;
}
 
.contact{
	background:url(../img/btn_contact.jpg) no-repeat 0px 0px;
	width:115px;
	height:16px;
}
 
.reservation{
	background:url(../img/btn_reservation.jpg) no-repeat 0px 0px;
	width:132px;
	height:16px;
}
Merci