Placer header en haut de page

**Dutrizac** · 06/10/2009, 22h40

Salut, j'ai un problème de header qui me rend complètement dingo!!!!

Je suis incapable de coller le header au haut de la page, j'ai pourtant bien tout vérifier et impossible de corriger l'erreur. Il y a toujours un dix pixels avant le début du header.

Dutrizac

CSS:
________________

Code css :

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
 
/* RESETS & BASIC SETUP */
* { margin: 0; padding: 0; }
html { overflow-y: scroll }
 
body { font: 62.5% Helvetica, sans-serif;
	padding:0px;
	margin:0px;
	width:100%;
	height:100%;
	font-weight:bold;
	background:url(../images/bgGradient.jpg) repeat-x;
	color:#FFF;
 }
 
 
p { font-size: 1.2em; line=height: 1.2em; margin-bottom 1.2em; }
a { outline: none;text-decoration:none;color: white; }
a img { border: none; }
/* END RESETS */
 
/* TOOLBOX */
.floatleft  { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */
 
/* STRUCTURE AND STUFF */
#page-wrap {
	position:absolute;
	border:2px solid green;
	width:1000px;	
	margin-left:-500px;
	left:50%;
	height:600px;
	text-align:center;
	padding-bottom:0px;
}
 
#header{
	width:100%;
	height: 30px;
	background:url(../images/headerBG.jpg) repeat-x;
}
 
#headerLeft{
	width:auto;
	height:auto;
	float:left;
	margin-left:6px;
}
 
#headerRight{
	width:auto;
	height: auto;
	float:right;
	margin-right:35px;
	padding-top:8px;
	font-size:12px;
}
 
#footer{
	position: absolute;
	bottom: 0;
	padding: 10px;
	background-color: #991d1d;
	width: 100%;
	height:45px;
	font-size: 12px;
}
 
#footerL{
	width:auto;
	height:auto;
	float:left;
	padding-top:15px;
	margin-left:6px;
}
 
#footerR{
	width:auto;
	height: auto;
	float:right;
	margin-right:35px;
	padding-top:15px;
	font-size:12px;
}
 
#spacer{
	height: 50px;
	width: 49px;
	border:0px solid red;
}

HTML
_____________________

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
 
 
<!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" xml:lang="en" lang="en">
<head>
	<title>Green City</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script type="text/javascript" src="js/swfobject.js"></script>
 
	<<script type="text/javascript">
                var flashvars = {};
                var params = {};
                params.quality = "high";
                params.wmode = "transparent";
                var attributes = {};
                attributes.id = "OM_CV";
                swfobject.embedSWF("swf/greenCity.swf", "myAlternativeContent", "1000", "600", "10.0.0", false, flashvars, params, attributes);
        </script>
 
 
</head>
 
<body>
 
	<div id="header">	
		<div id="headerLeft">
 
		</div>
		<div id="headerRight">
			<a href="#">login</a> | <a href="#">sign in</a>	 
		</div>
	</div> <!-- fin div header -->
 
	<div id="spacer"></div>
 
	<div id="page-wrap">
		<div id="myAlternativeContent">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
	</div>  <!-- fin page-wrap -->
 
	<div id="footer">
		<div id="footerL">
			Green City
		</div>
 
		<div id="footerR">
			&copy 2009
		</div>
	</div>
 
 
</body>
</html>

**sebhm** · 07/10/2009, 09h33

Bonjour,

c'est lui qui t'embete :

Code :

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

<<script

Placer header en haut de page

Positionnement en CSS

Discussions similaires

Partager

Partager