[débutant] Problème de background

Version imprimable

08/02/2006, 23h14
benahpets

[débutant] Problème de background

Sur mon site, en fonction du navigateur utilisé, je choisis (IE) ou non (les autres) d'afficher un bandeau prévenant que le site ne fonctionne pas bien sous Internet Explorer.

Mon problème est que lorsque le bandeau s'affiche (tout en haut de la page), le contenu de la page descend, mais pas le background.

Comment faire pour résoudre ce problème ?

Merci d'avance.

l'url du site est la suivante :

http://blog.benahpets.info/

Bonjour,
Code:

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 ...code du site... <body>   <div id="global"> <div id="page"> ...code du site... </div>  </div>  
Au lieu de mettre l'image de fond dans body, il faudrait ajouter un conteneur qui aurait l'image de fond. Le conteneur global dans mon exemple.

*En passant, pour l'avertissement dans IE, le texte noir sur fond rouge est
difficilement lisible.

**Toujours pour l'avertissement, tu as une phrase incomplète.
«Nous vous recommandons d'utiliser un navigateur moderne tel que»
tel que quoi? ;)

08/02/2006, 23h54
benahpets
Merci de ton aide

c'est vrai que noir sur fond rouge c'est pas terrible, il va falloir que je change ca!!

Pour la phrase incomplète, c'est parce que je vais y mettre une image...

Sinon, j'ai créé un conteneur (#fond) dans lequel j'ai mis l'image en arriere plan.
Code:

1 2 3 4 #fond{ background: url(fondpage.gif) repeat-x; }
le truc c'est que maintenant l'image n'apparait plus. Est ce que j'ai oublié de mettre un autre paramètre ?
09/02/2006, 00h04
balu
Regardes en précisant une largeur au conteneur fond à 100%. Peut-être ajouter position: relative; au conteneur fond vu qu'il y a des éléments en position absolu à l'intérieur.
Code:

1 2 3 4 5 #fond{ position: relative; background: url(fondpage.gif) repeat-x; width: 100%; }
09/02/2006, 00h15
benahpets

Ca ne marche pas non plus :cry:
09/02/2006, 00h17
benahpets

N'y a t'il pas moyen de mettre deux images superposées dans le meme conteneur ?

Ainsi je pourrai mettre la bande grise qui fait la largeur de la page et le header (l'image avec les yeux) en superposition.
09/02/2006, 00h31
benahpets
Ok, c'est bon, ton idée était la bonne... Il fallait tout simplement spécifier la hauteur de l'image :
Code:

1 2 3 4 5 #fond{ height: 230px; width: 100%; background: url(fondpage.gif) repeat-x; }
Merci beaucoup pour ton aide :D

Je viens de faire un test.

page.html

Code:

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
<!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>PAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="page.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<!--[if IE]>
	<div class='message'>
	<p>
		Ce site est construit en se basant sur les standards du web, standards qu'Internet Explorer ne supporte pas totalement.
		De ce fait, votre navigateur risque de ne pas afficher ce site correctement.
		Nous vous recommandons d'utiliser un navigateur moderne tel que
	</p>
	</div>
<![endif]-->
 
<div id="global">
	<div id="page">
	<img src="rotator.php.gif" alt="" />
		<div id="contenu">
			<p>contenu de la page</p>
			<p>contenu de la page</p>
			<p>contenu de la page</p>
			<p>contenu de la page</p>
			<p>contenu de la page</p>
			<p>contenu de la page</p>
			<p>contenu de la page</p>
			<p>contenu de la page</p>		
		</div>
	</div>
</div>
 
</body>
</html>

page.css

Code:

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
body {
	background-color: #a1a1a1;
	margin: 0;
	padding: 0;
}
 
.message {
	background-color: #FFA500;
	height: 1.5em;
}
 
#global {
	background: url(fondpage.gif) repeat-x;
	text-align: center;
}
 
#page {
	width: 780px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: url(fondcorps.gif) repeat-y;
}
 
#contenu {
	margin: 1.5em;
}