[Résolu] Petites questions pour site en XHTML+CSS (header fixe)

Bonjour à tous,

voilà je suis en train de réaliser une page (type portail) pour un site et je me suis mis depuis peu au full css, plus de tableaux, que du div avec un code html et css propre et valide xhtml 1.0.

Donc pour mes autres sites je suis arrivé à faire ce que je souhaitais (site centré, menu à gauche avec technique des listes à puces, footer...

Mais là je bloque, je veux en effet avoir un header qui reste fixe et donc que le reste du site défile en dessus, tout est OK sauf que c'est l'inverse, le site passe dessus

Voici le code HTML (body) de la page :

<div id="header">Header</div>

<div id="global">

<div id="center">
  <div id="content">Content</div>

<div id="footer">Footer</div>
</div>
</div>

et la css associée :

/* HTML & BODY */

html, body {
	height: 100%;
	margin: 0;
	background-image: url(../images/html.png);
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;	
}

/* DIVS */

#header {
	height: 20px;
	background-image: url(../images/header.png);
	text-align:center;
    background:#333333;
    font-size: 12px;
    color: #CCCCCC;	
	width:100%;
	position:fixed
}

#global {
	min-height: 100%;
	width: 920px;;
	padding: 0 10px;
	margin: 0 auto;
	background: url(../images/global.png) center repeat-y;
	position: relative;
}

#center {
	overflow:hidden;
	padding-bottom:30px;
}

#content {
	padding-top:10px;
	padding-left:35px;
	width: 100%;
}

#footer {
	background-image:url(../images/footer.png);
	position: absolute;
	text-align:center;
	font-weight:bold;
	width: 920px;
	bottom: 0;
	color: #fff;
}

Pouvez-vous me dire ce qui ne va pas déjà, je débute donc... ce qu'il faut corriger et enfin comment avoir mon header fixe par dessus le site ?

PS : Mon footer n'est pas fixe, il doit être en bas de page quelque soit la taille du contenu dans content. J'arrive à faire l'inverse, avoir un bon header mais mon footer n'est plus en bas mais trop bas (donc scrollbar).

Merci de votre aide !
Modifié par rpgmax (27 Jan 2007 - 14:17)

Bonjour et merci pour votre réponse, en fait le modèle 1 est en effet très simple et j'arrive parfaitement à le reproduire, ce que je souhaite c'est avoir un header fixe qui reste en top de la page et le contenu passe dessous comme par exemple sur : http://www.generationmp3.com

Par contre je ne connaissais pas la page dont vous m'avez donné le lien, très intéressante

À priori, il faudrait corriger les z-index de l'en-tête fixe et de div#global, qui sont tous les deux positionnés.

Mais il est probable que placer l'en-tête à l'intérieur de div#global suffise à éliminer cet effet de superposition.