Fixer le header malgré le scroll

Bonjour,

Je voudrais fixer le header de mon site toujours en haut de la page même si un utlisateur utilise le scroll pour aller en bas de page (ex: header de twitter).

Voilà le code de mon header :

<div id="haut">
	<div id="haut_body">
 	MON SITE              
	</div>
</div>

#haut
{
	background-color: #1166ff;
	position:fixed;
}
	#haut_body 
	{
		color : white;
		margin : 0 auto 0 auto ;
		width: 900px; 
	}

Pour fixer le header on m'a conseillé d'utiliser "position:fixed;" MAIS je rencontre alors le problème suivant :<div id="haut_body"> vient se coller à gauche du navigateur (plus de centrage) et <div id="haut"> disparait (son background-color disparait).

En image avant/après l'utilisation de "position:fixed;":
http://img600.imageshack.us/img600/9549/divd.jpg

Comment ça s’explique ?
Modifié par Tchernobyl (01 Jan 2012 - 01:32)

Salut,

Aurais-tu une URL permettant de mieux voir le problème ?

Salut, je n'en ai pas car je travaille en local
Modifié par Tchernobyl (01 Jan 2012 - 03:29)

Salut,

Déjà, haut_body est-il réellement nécessaire ? Tu peux peut-être tout mettre dans haut. Ou alors les éléments principaux : si "fixed" est sur "haut", alors utilises les margin sur cet élément et non les éléments enfants.

La position "fixed" comme "absolute" sort du flux. Les "margin: 0 auto" ne fonctionnent pas. La solution est simple :

#haut {
	width: 900px;
	color : white;
	background-color: #1166ff;
	margin: 0 0 0 -450px;
	left: 50%;
	position:fixed
}

En résumé, on place le côté gauche à 50% de la page. Pour que la div soit bien centré, on soustrait au côté gauche la moitité de la div. Ici, -450px.

La raison de ce comportement est qu'une fois hors-flux (position absolute, fixed ou en float) les éléments block n'ont plus a largeur de leur parent, mais seulement de leur contenu.

Dans ton cas, #haut vient se fixer en haut à gauche car c'est le comportement par défaut de la position fixed quand on ne lui spécifie pas de propriétés de position (top, left, right ou bottom). Et il prend la largeur de 900px puisque c'est la largeur définie de son contenu (à savoir #haut_body)

Pour régler ton problème (selon ton code; car la solution de Gaylord.P est bonne aussi), il faudrait que tu définisse une largeur à #haut. Pour ce faire, une solution simple serait de lui donner un width de 100%, ainsi:

#haut {
	background-color: #1166ff;
	position:fixed;
        width: 100%;
        top: 0; /* vaut mieux fixer les valeurs par défaut pour ne pas avoir de mauvaises surprises */
}

Cela dit, un width de 100% peut amener certains problèmes puisque width définit la largeur du contenu et non du bloc (donc problème de dépassement si on y met du padding ou une bordure). Ce faisant, il vaut souvent mieux éviter d'utiliser width 100% qui peut habituellement être avantageusement remplacé par d'autres valeurs.

Et donc, dans ton cas, le mieux serait ceci:

#haut {
	background-color: #1166ff;
	position:fixed;
        top: 0; /* vaut mieux fixer les valeurs par défaut pour ne pas avoir de mauvaises surprises */
        left: 0;
        right: 0;
}

(Évidemment la solution du Gaylord fonctionne, mais je souhaitais t'expliquer la cause de ce comportement pour que tu puisse comprendre si à l'avenir tu te retrouvais à nouveau vis à vis un problème semblable !)

Vaxilart a écrit :
La raison de ce comportement est qu'une fois hors-flux (position absolute, fixed ou en float)

Pourquoi position fixed = hors flux?
Modifié par jmlapam (01 Jan 2012 - 17:44)

Car ils sont projetés sur l'axe Z et se positionneront indépendamment de leurs frères (ce qui est à moitié vrai pour la propriété float, et au final on ne peut pas dire qu'elle est totalement hors flux - disons que c'est un modèle de boîte / type de positionnement à part).

Tout ce qui est en flux est ce qu'on pourrait appeler des éléments ayant un z-index nul (0 n'étant pas nul). Ils se positionneront en haut à gauche de leur parent et selon leurs frères (les éléments blocks se placeront un par dessus l'autre, et les éléments en ligne un à coté de l'autre, les éléments de table selon leurs règles particulière; mais toujours selon ses frères)
Modifié par Vaxilart (01 Jan 2012 - 19:19)

Ah d'accord merci, je ne pensais pas que fixed mettait hors flux.
Modifié par jmlapam (01 Jan 2012 - 18:09)

Wahou, merci Vaxilart j'ai fait le tour du net et personne ne proposait cette explication. Merci aussi à Gaylord car ça fonctionnait.

Dernière question sur le header de twitter : comment reproduire le dégradé en noir du header (je pensais que c'était une image mais non, preuve par le click droit) ?
Modifié par Tchernobyl (03 Jan 2012 - 01:43)

Pour Twitter, il s’agit d'un dégradé CSS 3. Un outil permet des les générer en ligne:

http://www.colorzilla.com/gradient-editor/

(Et il y a aussi un fallback utilisant un filtre propriétaire de microsoft pour IE - cela dit, ce filtre ne se combinera pas aux coins arrondis si tu en utilise sur le même élément.)