[débutant] Problème de background

**benahpets** · 09/02/2006, 00h14

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/

**balu** · 09/02/2006, 00h32

Bonjour,

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
...code du site...
 
<body>
 
<!--[if IE]>
	<div class='message'>
	<img class="warning" src="./themes/Tifa/media/warning.png" alt="attention !"/>
	<h2>Vous utilisez Internet Explorer</h2>
	<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]-->
 
<!-- DÉBUT CONTENEUR DU SITE -->
<div id="global">
 
<div id="page">
...code du site...
</div> <!-- end #page -->
 
</div> <!-- end #global -->
<!-- FIN CONTENEUR DU SITE -->

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?

**benahpets** · 09/02/2006, 00h54

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 :

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

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 ?

**balu** · 09/02/2006, 01h04

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 :

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

1
2
3
4
5
#fond{
  position: relative;
  background: url(fondpage.gif) repeat-x;
  width: 100%;
}

**benahpets** · 09/02/2006, 01h15

Ca ne marche pas non plus

**benahpets** · 09/02/2006, 01h17

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.

**benahpets** · 09/02/2006, 01h31

Ok, c'est bon, ton idée était la bonne... Il fallait tout simplement spécifier la hauteur de l'image :

Code :

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

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

Merci beaucoup pour ton aide

**balu** · 09/02/2006, 01h32

Je viens de faire un test.

page.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
<!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 :

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
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;
}

[débutant] Problème de background

HTML

Discussions similaires

Partager

Partager