Impossible de placer mon fond d'écran correctement [Résolu]

goku19 · 28/01/2012, 17h22

Bonjour à tous,

Voila, j'essaye de placer mon fond d'écran, et celui-ci est toujours hors cadre, c'est à dire qu'il sort toujours de mon body ...
Voila mon code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title><?php echo NOM_SITE;  ?></title>
 
        <!-- Appel des feuilles de style -->
		<link rel="stylesheet" media="screen" type="text/css" title="style" href="css/menu.css" />	
        <!--<link rel="stylesheet" media="screen" type="text/css" title="style" href="css/style.css" />	-->
		<link rel="stylesheet" media="screen" type="text/css" title="style" href="javascript/Calendrier/calendar.css" />	
		<link rel="stylesheet" media="screen" type="text/css" title="style" href="css/espace_membre.css" />
</head>
<body>
                <div id="main">
 
		<!--Menu du site--> 
                        <div>  
                               <ul id="menu">
                               </ul>
                        </div>
 
        <!-- Corps du site -->
		<div id="corps">
                </div> 
        <!--Bannière de pied de page-->
        <div id="footer">
        </div>
      </div>  
</body>
</html>

et mon 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
 
body 
{ 
	background-image:url(../images/mwenlove_background.jpg) ;
	font-family:Lucida Sans, Arial, Helvetica, Sans-Serif;
	font-size:13px;
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	width:800px;
	margin: auto; /* Pour centrer notre page */
	padding:0;
	margin-bottom: 30px;
	border:solid 1px red;
	/*overflow-x:hidden;
	z-index:-1;*/
 
#menu
{	
	position: center;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background:url(../images/mwenlove_site_bannieremenuaccueil.jpg) no-repeat; 
	list-style: none;
 
 
}
 
#menu li{
	float:left;
 
}
 
#menu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; 
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
 
}
 
#menu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
 
}
 
#menu li.current a, #menu li a:hover{
	color: #FFF;
	background:url(../images/mwenlove_site_boutonongletsaccueil.jpg) no-repeat; /*left tab image path*/
	background-position: left;
 
}
 
#menu li.current a b, #menu li a:hover b{
	color: #FFF;
	background:url(../images/mwenlove_site_boutonongletsaccueil.jpg)) no-repeat right top; /*right tab image path*/
 
}
/*fin menu principal horizontal*/
 
#corps
{
	float:left;
	width:800px;
	min-height:500px;
 	margin:auto ;
 	padding:0px;
	background-color:	#FFFFFF;
 
 
}
 
#footer 
{ 
	float:left;
	background:url(../images/pied_de_page.png) no-repeat;
	width:800px;
 
}
 
 
}

Normalement je devrais avoir ça :

http://www.hostingpics.net/viewer.ph...ackground1.jpg

Et j'obtient ça :

http://www.hostingpics.net/viewer.php?id=889186test.jpg

Merci de m'aider

betadev · 29/01/2012, 02h38

Salut goku19 ,

Premièrement il faut vérifier que votre feuille de style ne possède pas d'erreurs de syntaxe , car par exemple la description des attribus de css pour le body manque un accolade fermant }

Ensuite pour avoir un background sur toute la page il faut mettre un margin 0 pixel pour le body , et pas un margin auto pour que le page sera repartie sur tout l'espace de l'écran et comme ça ton image sera apparait totalement. Et pour centrer ton contenu , il faut mettre un margin auto à main et lui affecter le width du body , donc tu va avoir une feuille de style qui ressemble à ça :

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
body 
{ 
	background-image:url(../images/mwenlove_background.jpg) ;
	font-family:Lucida Sans, Arial, Helvetica, Sans-Serif;
	font-size:13px;
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	margin: 0px; 
	padding:0;
	border:solid 1px red;
	/*overflow-x:hidden;
	z-index:-1;*/
}
#main 
{
	margin:auto;	
	width:800px;
}
#menu
{	
	position: center;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background:url(../images/mwenlove_site_bannieremenuaccueil.jpg) no-repeat; 
	list-style: none;
 
 
}
 
#menu li{
	float:left;
 
}
 
#menu li a{
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; 
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;
 
}
 
#menu li a b{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
 
}
 
#menu li.current a, #menu li a:hover{
	color: #FFF;
	background:url(../images/mwenlove_site_boutonongletsaccueil.jpg) no-repeat; /*left tab image path*/
	background-position: left;
 
}
 
#menu li.current a b, #menu li a:hover b{
	color: #FFF;
	background:url(../images/mwenlove_site_boutonongletsaccueil.jpg)) no-repeat right top; /*right tab image path*/
 
}
/*fin menu principal horizontal*/
 
#corps
{
	float:left;
	width:800px;
	min-height:500px;
 	margin:auto ;
 	padding:0px;
	background-color:	#FFFFFF;
 
 
}
 
#footer 
{ 
	float:left;
	background:url(../images/pied_de_page.png) no-repeat;
	width:800px;
 
}

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email