Affichage de background-img a cause du scroll

**Toutouffe** · 22/05/2007, 22h08

//// 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

**strat0** · 23/05/2007, 12h40

J'ai exactement le même problème et j'étais venu poster ma question.

Voilà ma 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
body
{
	font-family: Arial, Helvetica, Sans-Serif;
	background-image: url(images/fond.jpg);
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	color: Black;
	padding: 0;
	margin: 0;
	text-align: center;
}
 
#gauche, #centre, #droite
{
	position: absolute;
	top: 0px;
}
 
#gauche
{
	height: auto;
	left: 0px;	
	background-image: url(images/fond_cote_gauche.jpg);
	background-repeat: repeat-y;
	background-position: right;
}
 
#droite
{
	height: auto;
	right: 0px;
	background-image: url(images/fond_cote_droit.jpg);
	background-repeat: repeat-y;
	background-position: left;
}
 
#centre
{
	width: 800px;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

En fait je pense qu'il nous faudrait mettre "height: auto;", mais à ce moment là la DIV vide disparaît. Donc comment forcer une DIV à apparaître et à s'adapter aux dimensions de son conteneur?

En JavaScript j'ai essayé de faire ça :

Code :

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

1
2
var HauteurEcran = document.getElementById('body').offsetHeight;
document.getElementById('gauche').style.height = HauteurEcran + "px";

Le problème est que offsetHeight a une valeur de 0 pendant le OnLoad de la page. Il faudrait que j'arrive à obtenir la hauteur de la page avant la fin du chargement de celle-ci pour définir la hauteur des DIV à chacune de ses extrémités.

Merci pour votre aide.

**Toutouffe** · 23/05/2007, 15h47

J'ai vu un autre post sur le site microsoft, et la encore pas de solution.

En fait je penses que c'est du au fait que les divs et le height=100% n'est pas encore au point. Apparement il y a un problem de calcul du rafraichissement de la taille du div par rapport a celle de l'ecran ou un truc dans le style.
Moi je penses que je vais simplement repasser au table pour ce cas precis (en esperant ne pas retrouver le meme problem)...

Affichage de background-img a cause du scroll

Défilement en CSS

Vue hybride

Discussions similaires

Partager

Partager