[résolu] Centrer un header contenant une image large.

Bonjour,

Je bataille avec un problème de header. J'ai un header qui doit être centré quelque soit la résolution d'affichage, et qui contient un décor (qui ne peut pas être répété) sous forme d'une image large (+de 1900px).

Je connais la solution des marges négatives, en mettant le header en position absolue par rapport au body (j'ai testé, ça marche très bien dans mon cas), mais un des mes collègues me demande d'éviter d'avoir recours à cette solution. C'est vrai que ça nous oblige à remettre le flux en ordre en créant un div vide de même taille que le header.

Existe t-il une solution miracle qui éviterai d'avoir recours au positionnement en absolue du header ?

Merci d'avance.
Modifié par Brunus (28 Sep 2010 - 09:11)

Salut,

Si ton image ne véhicule pas d'information essentielle, mais fait juste partie du design du site, elle peut être mis en background.
De ce fait, ton header serait un élément prenant toute la largeur de la fenêtre de visualisation, et tu n'as plus qu'à mettre ton image en fond et la centrer avec la propriété background-position.

Agylus a écrit :
Salut,

Si ton image ne véhicule pas d'information essentielle, mais fait juste partie du design du site, elle peut être mis en background.
De ce fait, ton header serait un élément prenant toute la largeur de la fenêtre de visualisation, et tu n'as plus qu'à mettre ton image en fond et la centrer avec la propriété background-position.

Merci de ta réponse Agylus, mais effectivement, et j'aurai du le préciser, je passe bien l'image du header en background.

J'ai trouvé une solution à mon problème mais pas exactement ce que je cherchais à faire. Je ne poste pas cette solution car elle implique le découpage de mon image de header en plusieurs éléments, et ce n'est donc pas exactement ce que je cherchais à faire.

Je ne passe pas le fil de discussion en "résolu" pour le moment, dans l'espoir d'avoir d'autres réponses.

@+

Brunus a écrit :


Merci de ta réponse Agylus, mais effectivement, et j'aurai du le préciser, je passe bien l'image du header en background.

J'ai trouvé une solution à mon problème mais pas exactement ce que je cherchais à faire. Je ne poste pas cette solution car elle implique le découpage de mon image de header en plusieurs éléments, et ce n'est donc pas exactement ce que je cherchais à faire.

Je ne passe pas le fil de discussion en "résolu" pour le moment, dans l'espoir d'avoir d'autres réponses.

@+

Si ton problème n'est toujours pas résolu, essaye de mieux l'expliquer, parce que j'ai beau relire, je ne comprend pas pourquoi la solution d'Agylus ne te convient pas ? ou ce que tu cherches à faire exactement ?

Bonjour et bienvenue,

Un div faisant toute la largeur de la fenêtre avec comme image de fond ton image bien large centrée horizontalement.
Un div.inside de largeur fixe (genre 960, 980 ou 1004px) centré avec margin: 0 auto; pour accueillir le contenu de ta page (enfin si c'est le cas de ta page, le plus courant).

Si tu as besoin de plusieurs images de fond, il te faut autant de div "pleine largeur" que d'images de fond et chacun a son ou ses div de contenu centré de largeur fixe.
Voir avec Firebug :
-www.tenwhil.com (header et footer, avec image et couleur de fond pour le header, le menu étant ainsi extensible sur 1 ou 12 lignes sans problème),
airliquide.com (le fond est découpé en deux, la limite se situant pile en bas du slideshow)
l'ancienne version d'alsacreations.com était plus démonstrative avec son bandeau-header noir mais la structure n'a pas changé, il y a juste que ça ne se voit plus sans Firebug)

Faire attention que tu n'aies pas de #¤@£ de décalage d'1px entre les différents navigateurs et si c'est le cas *changer* de méthode avant d'y passer 3 jours ... (le top c'est quand même 1px à gauche dans IE6, rien dans IE7 et 1px à droite dans Firefox. Là que tu sais que ta journée va être mauvaise si tu insistes ...)

Si cette solution ne convient pas, +1 avec bogs
Modifié par Felipe (27 Sep 2010 - 20:42)

J'ai utilisé cette technique-là pour mon site (mon image fait 1700 de large, mais ça change rien^^)

Alors 2 choses:
1) précise margin 0 dans le body et l'html, ça peut aider. (perso le body a suffit)
2)

body
{
  background-image : url(images/skin/bg-fond.png);
  background-position: 50% 0%;
  background-color: transparent;
  background-repeat: repeat-y;
  min-width: 930px;
  margin:0px;
}

.hautpage
{
  background: url(images/skin/haut-page.png) no-repeat scroll 50% 0;
	height:396px;
	margin:0px;
	width: auto;
}

voilà mon css pour ce bout-là.

Tu remplaces le height par la hauteur de ton image, pour la largeur, il va adapter directement à la largeur de l'écran ^^

Il faut compter que les 2 images font la même largeur^^
Modifié par Lothindil (28 Sep 2010 - 08:06)

Merci pour vos réponses.

En fait ce que je cherchais à faire c'est de centrer la vue sur le header, ce dernier contenant une ipmage large non répétitive.
Mais j'ai déplacé le background dans le body, et découpé le header en plusieurs div qui ce centrent bien maintenant.

J'ai assayé la solution de Lothindil et c'est ce qui convenait le mieux à la précédente version de ma page. Je passe donc le fil en résolu.

Merci encore, et à bientôt