Layout Centré Fixe dont une partie Fluide ?

Salut à toutes et tous,

alors voila : d'hab je me débrouille comme je peux en CSS, mais là je cale. J'ai pour habitude de ne faire que des sites fixes et centrés et, m'échappant un pitit peu de ce postulat, je me rends qu'en fait chuis une buse

Bon bref, comme vous pouvez le voir ci-dessous, pour ce projet, je souhaiterais faire comme d'hab, fixe et centré, à l'exception du "header" dont j'aimerais qu'il remplisse à 100% l'écran. Tout en désirant centrer à l'intérieur les éléments, de la même façon que le reste du site.

Un tit coup de main serait very mouccch appreciétéde, en espérant un jour, qui sait, pouvoir vous rendre la pareille (mais l'appareil à raclette, j'le garde, pas touche !!!)

Merci d'avance

Pour ton header, tu n'as pas grand'chose à faire, puisque les éléments de bloc (comme div) occupent par défaut toute la largeur disponible. Encore faut-il que tu places l'élément servant de header comme élément enfant de body et que tu supprimes les marges de body.

Si j'ai bien compris, tu veux un header (ton menu) fixe, un pied de page fixe (ton contenu et footer) et au milieu des informations (ton header) qui pourrait défiler ? A la vertical ?
Si c'est bien ça, alors je pense avoir ta solution. Par contre il faut savoir que "position: fixed;" ne fonctionne pas sur IE6 et antérieur. Si cela ne te pose pas de problème et que j'ai bien compris ce que tu recherches, alors je te donnerai la solution.

Merci à vous deux pour votre aide.

En fait, pour être plus clair, voici une pitite image.





Sur le 1er schéma, ce que je fais d'habitude, au moyen du code ci-dessous. Et le 2e schéma, c'est ce que j'aimerais obtenir, tout en gardant à l'esprit que j'aimerais en plus "centrer le contenu" dans le header.

[code=css]
* { padding: 0; margin: 0; }

body 		{ font-family: MS Trebuchet, Arial, Helvetica, sans-serif; font-size: 10px;}

#wrapper 	{ margin: 0 auto; width: 948px; }

#navigation { float: left; padding: 0px; margin: 0px 0px 0px 0px; width: 948px; height: 180px; }
#header 	{ float: left; padding: 0px; margin: 0px 0px 0px 0px; width: 948px; height: 180px; }
#bidule 	{ float: left; padding: 0px; margin: 0px 0px 0px 0px; width: 948px; height: 180px; }
#footer 	{ float: left; padding: 0px; margin: 0px 0px 0px 0px; width: 948px; height: 180px; }

Alors, au lieu de faire un wrapper à 948px, dois-je le faire à 100% en width, et si oui après c'est une histoire de marge négative par ex. ? Ou la soluce est-elle plutôt de faire comme d'hab mon wrapper à 948px puis de faire "sortir" le header de ce contexte ?

Je sèche et carrément le code css de base pour le layout désiré serait le bienvenu
Modifié par swit (21 Jan 2010 - 12:15)