background qui ne se répète pas

**pob_klk** · 15/12/2007, 19h53

Bonjour,
j'ai comme vous vous en doutez un petit problème.
Le problème est que si le contenu affiché dans mon div dépasse le cadre de la page et que donc le scroll se met en place, si je descend, le background ne descend pas jusqu'en bas.
(Le problème ne se pose que sous firefox et IE7 étant donné qu'IE6 a une feuille dédiée à cause de la transparence des PNG)

Voici le code de ma page :

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
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
<!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" >
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
		<!-- Ici un petit hack css pour permettre d'afficher convenablement le design
		Le premier hack cache style.css à IE
		Le deuxième hack montre ie.css à IE (feuille de style spécialement dédiée à IE6)
		Le troisième hack montre style.css à IE7-->
 
		<!--[if  !IE]> <-->
		<link href="style/style.css" rel="stylesheet" type="text/css" />
		<!--> <![endif]-->
 
 
		<!--[if lte IE 6]>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style/ie.css" />
		<![endif]-->
 
		<!--[if IE 7]>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style/style.css" />
		<![endif]-->
 
		<link href="style/menu.css" rel="stylesheet" type="text/css" />
 
 
	</head>
 
	<body>
 
		<div class="contenu">
 
			<div class="contenu_centre">
 
 
<div class="menu">
 
<table class="menu_tableau">
<tr>
 
<td class="cellule_menu">
<div class="presentation">
<a href="index.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>
 
<td class="cellule_menu">
<div class="prestations">
<a href="prestations.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>
 
<td class="cellule_menu">
<div class="aubade">
<a href="aubade.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>
 
<td class="cellule_menu">
<div class="lumiere_pulsee">
<a href="lumiere_pulsee.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>
 
<td class="cellule_menu">
<div class="contact">
<a href="contact.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>
 
</tr>
</table>
 
</div>
 
<div class="logo">
		<!--[if  !IE]> <-->
		<img src="images/logo.png" />
		<!--> <![endif]-->
 
		<!--[if lte IE 6]>
		<img src="images/logo_ie.gif" /a>
		<![endif]-->
 
		<!--[if IE 7]>
		<img src="images/logo.png" />
		<![endif]-->
 
</div><div class="centre">
 
<center>
		<!--[if  !IE]> <-->
		<img src="images/categories/lumiere_pulsee.png" /><br />
		<!--> <![endif]-->
 
		<!--[if lte IE 6]>
		<img src="images/categories/lumiere_pulsee_ie.gif" /><br />
		<![endif]-->
 
		<!--[if IE 7]>
		<img src="images/categories/lumiere_pulsee.png" />
		<![endif]-->
</center>
	</div>
 
 
			</div>
 
 
		</div>
 
	</body>
 
</html>

Et le 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
a img
{
border: 0px;
}
 
html
{
height: 100%;
}
 
body
{
height: 100%;
background-image: url(../images/background.png);
background-repeat: repeat-x;
background-color: rgb(10,0,1);
margin: 0px;
padding: 0px;
}
 
a
{
text-decoration: underline;
color: white;
font-size: 10pt;
}
 
a:hover
{
text-decoration: none;
}
 
.contenu
{
min-height: 100%;
width: 760px;
height: 100%;
background-image: url(../images/fond_contenu.png);
background-repeat: repeat-y;
margin:auto;
}
 
.contenu_centre
{
margin-left: 20px;
margin-right: 20px;
}
 
.centre
{
width: 700px;
margin: auto;
color: white;
font-family: verdana, arial, serif;
font-size: 10pt;
text-align: justify;
}

Merci d'avance

**Bisûnûrs** · 15/12/2007, 20h02

Mets un min-height de 100%.

IE6 interprète le height comme un min-height, c'est pour ça qu'il est bon seulement sur ce navigateur.

**pob_klk** · 15/12/2007, 20h13

Si je met des "min-height: 100%" pour les balises body et html j'ai le résultat suivant sur les autres pages :

**pob_klk** · 15/12/2007, 20h29

C'est bon ça marche.
Pour ceux que ça interesserait, j'ai du enlever le height:100% sur le div "contenu" car il faisait apparement réference à la hauteur de la fenêtre.

background qui ne se répète pas

CSS

Vue hybride

Discussions similaires

Partager

Partager