28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Image de fond header plus grande que le wrapper -> glissem

Bonjour,

Je me présente, je suis étudiant et je suis en train de refaire mon p'tit site perso qui a besoin d'être rafraîchi.
J'ai beaucoup parcouru les tuto, astuces, forum.. Mais là j'ai un soucis de conception et je ne vois pas de meilleur endroit pour demander.

Mon but:
Design fixe centré sur la page avec le header qui dépasse en largeur par rapport au wrapper..
Voici un petite maquette que je m'étais faite pour m'aider (parce qu'une image est souvent mieux que des mots -veuillez excuser les notes à l'arrache, la plupart c'est fait à la va-vite pour avoir une idée et surtout j'ai fait certaines adaptations de proportions etc.. c'est juste pour donner une idée enfait) Image test maquette ici

Mon objectif est que lorsque la résolution d'écran de l'utilisateur le permet, il voit toute la largeur du header, sinon, il le corps est collé au navigateur, et les morceaux à droite (les bandes vertes plus larges) et à gauche du header qui dépassent soient simplement cachés..

Mon problème
J'ai un dégradé gris sur le haut de 1px de largeur et une trentaine en longueur qui est en repeat-x dans html, là ok,
J'ai mon image de header qui fait dans les 1300px de largeur que j'ai placé dans body en centré
J'ai un wrapper au milieu avec tout le corps du site.
Problème : Quand je réduis la taille de la fenêtre du navigateur, évidemment la bannière glisse par rapport au wrapper.

Donc ma première idée à la base était de mettre mon image de fond dans la div #header, mais
j'ai comme elle était beaucoup plus large que mon #pagewrapper, ça allait pas..

J'ai essayé de résoudre cela en plaçant mon image de fond centré dans body..., mais j'ai aucune idée comment faire pour éviter qu'il y ait un décalage en redimensionnant la fenêtre


Voici mes codes (Basés sur des templates CMSMS)


<body>
    <div id="pagewrapper">

   <!-- J'ai tout viré ce qu'il y avait à l'interieur (header pour zone mappée et blabla, sidebar, contenu..footer etc.. 
Je crois qu'on en a pas besoin ici -->

    </div>
{* end pagewrapper *}
  </body>




html{
background: url([[root_url]]/images/template/deg-top.png) repeat-x left top;
font-size: 100%
}
body {
	margin: 0;
	padding: 0;
/* default text color for entire site*/
	color: #333;
/* you can set your own image and background color here */
background: url([[root_url]]/images/template/header.png) no-repeat center top;

}
div#pagewrapper {
/* min max width, IE wont understand these, so we will use java script magic in the <head> */
	width:944px;
	margin: 0 auto;
	color: black;
}

div#header {
	height: 195px;
	margin: 0;
	padding: 0;
}


Je vous remercie évidemment d'avance, à bientôt
Modifié par sLib (04 Jul 2011 - 23:12)
Hello? Personne?
Le mieux serait que j'arrive à mettre l'image de fond dans ma div header.. mais bon elle est coupée en largeur avec la taille du wrapper. Smiley ohwell
sLib a écrit :
Le mieux serait que j'arrive à mettre l'image de fond dans ma div header.

Ouais non, ça va pas être possible ça. Smiley smile
(Ou alors tu utilises un élément décoratif positionné en absolu, à la rigueur.)

Ce n'est pas tout à fait le même besoin mais tu trouveras quelques pistes techniques ici:
http://covertprestige.info/css/fond-triptyque/

En l'occurrence je crois que je placerais une image de fond de 3000px de large sur le BODY, avec le motif du haut de page + le dégradé + les barres vertes (mais sans le texte de l'en-tête, qui sera à priori une image en contenu du header, avec texte alternatif qui va bien).
c'est assez simple,

à l'intérieur de ton wrapper tu met une div de la taille du header voulus, tu passe cette div en position relative top 0 et left -"un chiffre"px jusqu'à ce que ça soit bien calé (tu applique à cette div le background voulus) Cette div doit être en premier bien sur.

Tu verras ensuite qu'en réduisant ta fenêtre ça restera nickel en place.
Modifié par ptitvincent (28 Jun 2011 - 11:25)
ptitvincent a écrit :
tu passe cette div en position relative top 0 et left -"un chiffre"px jusqu'à ce que ça soit bien calé (tu applique à cette div le background voulus)

Mieux vaut utiliser du positionnement absolu dans ce genre de cas de figure.
pas nécessairement mieux, mais par contre cela lui demande plus de passe avant d'arriver au résultat voulus. devoir passer le wrapper en relative j'en ai eu l'idée, puis je me suis révisé car son wrapping doit surement se faire avec des margin auto.

vu que le header est le premier enfant du wrapper, il lui suffit de la passer en relative pour le positionner facilement par rapport à son parent.

du moins c'est un conseil.
Modifié par ptitvincent (28 Jun 2011 - 12:26)
Merci à vous deux.
Je vais essayer. Je vous tiendrais au courant ici.

ptitvincent a écrit :
c'est assez simple,

à l'intérieur de ton wrapper tu met une div de la taille du header voulus, tu passe cette div en position relative top 0 et left -&quot;un chiffre&quot;px jusqu'à ce que ça soit bien calé (tu applique à cette div le background voulus) Cette div doit être en premier bien sur.

Tu verras ensuite qu'en réduisant ta fenêtre ça restera nickel en place.


Je n'ai pas très bien compris le truc ptitvincent :S 


<div id="wrapper">
     <div id="ladivdonttuparle"></div>
     <div id="header"></div>
     <div id="content></div>
</div>


Mon image je la place où ? A quoi sert cette div que tu me propose d'ajouter?
Merci à toi !
ladivdonttuparle tu vire Smiley smile en fait je ne savais pas que tu avais déja une div "header".

ton fond tu le met dans ta div header, ta div header tu lui donne la largeur et la hauteur de ton image et enfin tu la passe en position relative et en jouant avec les clé LEFT et TOP en css tu la cale comme il faut avec des valeurs négatives (du style left:-50px;)
ptitvincent a écrit :
devoir passer le wrapper en relative j'en ai eu l'idée, puis je me suis révisé car son wrapping doit surement se faire avec des margin auto

L'un n'empêche pas l'autre.

ptitvincent a écrit :
vu que le header est le premier enfant du wrapper, il lui suffit de la passer en relative pour le positionner facilement par rapport à son parent.

Si tu utilises le positionnement relatif pour l'élément à placer (plutôt que son parent ou un ancêtre servant de référent), cet élément va être déplacé visuellement, mais l'espace qu'il occupait reste dans le flux, ce qui est souvent problématique pour positionner un contenu (par exemple l'image qui porte le texte/logo de l'en-tête)... sauf à positionner ce contenu lui-même en absolu ou relatif, et là ça devient un grand merdier.

Pour ma part dès que je vois un code qui ressemble à un position:relative;left:-327px; ou position:relative;top:-128px; je me dis qu'il y a 99% de chances pour qu'on soit sur un code pas robuste et mal maitrisé (du code au ptit bonheur la chance). Mais bon c'est juste moi, hein. Smiley smile
oui, et je suis d'accord avec toi.

dans ce cas en effet il vaut mieux mettre le wrapper en relative et le header en absolute avec un overflow:visible sur le wrapper et un left negatif au header.
Hello,

Est-ce que c'est possible d'avoir un exemple de code pour
que le wrapper soit centré et que je puisse adapter le placement de mon header..
Je vois le principe mais je galère a appliquer
Sujet clos
Aller à