DIV sous la banniere qui prend toute la largeur

[alain56]

Bonjour,

Comme tout le monde (j'imagine) selon les écrans la boutique prend toute la largeur de l'ecran ou se retrouve centré au milieu de celui-ci.

En fait, lorsque ma boutique est centrée au milieu de l'écran (avec des espaces blancs sur les 2 côtés) j'aimerai faire en sorte qu'un DIV de la hauteur de ma bannière prenne toute la largeur de l'écran. Histoire "d'occuper l'espace"

L'idée m'est venu de ce site (qui n'est pas Presta je pense) :

http://www.zoombits.fr/

 

J'ai essayé plusieurs choses comme supprimer la "width" au <DIV id="page">

(ligne suivante dans global.css :

#page{width:980px;)...

) mais sans succès. Cela décalle juste la boutique sur la gauche de l'écran.

 

J'ai essayé également en donnant une largeur importante au <DIV id="header">, afin qu'il occupe toute la largeur. La problème c'est qu'il "commence" au début de la bannière. Il ne va donc pas du bord gauche de l'écran jusqu'au bord droite...

 

Si quelqu'un a une idée, je suis preneur

Merci

[BigCom]

je serais d'avis de le faire dynamiquement avec javascript :

 

1) tu recuperes la largeur de l'ecran

 

 

 

function Viewport(){

this.windowX = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth;

this.windowY = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;

this.scrollX = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;

this.scrollY = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;

this.pageX = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth;

this.pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;

}

 

 

2) je te laisse decouvrire la variable a utilisee

 

3) si la dite variable est superieur au minimum voulue (c'et a dire que le site est centre, avec du blanc a gauche et a droite, tu va preprendre (mettre au tout debut) un nouveau div :

 

va body = document.getElementsByTagName("body")

body.innerHTML ='<div id=alain56Div" class="touteLaLargeur">asdjadf;j;rpo;sdj</div>'

 

je te laisse le soin de transformer ces exemples en code fonctionel (desole, mais ici j'ai un prob de copyright donc je ne peut donner que des exemples, pas les vrais snipets, mais cela etre suffisant.

[alain56]

Bonjour BigCom,

Merci de ta réponse.

Par contre, si je rajoute un DIV, cela ne fonctionnera pas car cela décalera ma banniere vers la bas (de la hauteur du nouveau DIV)...

Ce qu'il faut c'est géré avec les DIV existants, et le problème c'est l'imbrication des DIV "header", "header_right"...dans le DIV "page"...

Seulement en "sortant" les DIV "header", "header_right"... du DIV "page", cela ne fonctionne pas encore correctement : l'image de ma bannière est contre le bord gauche de l'écran, au lieu d'être centrée...

[BigCom]

as tu une URL que je puisse voire, commenter et te donner une solution / idee ?

 

Dans l'absolu, je mettrai le nouveau div position:absolute; z-index:2 avec une hauteur correspondant a celle de ta banniere + 2 px (reparti en haut et en bas) pour recouvrir l'existant (c'etait mon idee de depart, car en 15 mn cela est fait). Cette solution est standart (la plateforme, CMS utilisee est irrelevante).

 

Maintenant le meme chose peut etre faite en jouant avec ta hierairchie de div; mais cela signifie jouer avec le .tpl ...

 

Donc tu dois ajouter un "outer" div (qui va englober tout les header div existant), avec une classe similaire a :

 

• position: relative;
  
• background: #EAF5FF url("/img_turbo/shadow2.gif") repeat-y center top;
  
• margin-left: auto;
  
• margin-right: auto;
  
• width: 1010px;
  

le width que voit ici doit etre celui de l'element interieure (qui ne changera pas), et donc si ton ecran est comme le

mien (1680*1050) le div ineterieur sera centre,.

la magie est obtenue par margin:auto

[Atch]

Bonjour,

 

c'est juste que du CSS pour faire cela, pas besoin de JS...

Il suffit d’attribuer à la balise <body> un background (motif= ht de ta banière) répété en x et le tour est joué....

 

V++

 

Atch

[Stéphane Chonez]

comme le dit Atch, il s'agit juste d'une image de fond répétée en x dans {Body} de globall.css

[BigCom]

Bon, je crois que votre solution est parfaite, pour le body (c'est a dire le corp complet de la page).

 

Alain56 lui desire cela pour le top div (header elements); donc les changement de .css sont a faire sur cet elements.

 

Les changements sont ceux que j;ai donne

• position: relative;
  
• background: #EAF5FF url("/img_turbo/shadow2.gif") repeat-y center top;
  
• margin-left: auto;
  
• margin-right: auto;
  
• width: 1010px;
  

pour un header div au dessus d'un site centre ayant une largeur de 1010px; la couleur du background (#EAF5FF) courant sur toute la largeur de l'ecran, l'image de cond (shadow2.gif) etant centree similairement au reste du site.

 

 

En suis je sure? Oui, cela est en fonctionnement sur un site generant 31 000+ unique IP hit par jour.(depuis 3 ans 1/2).

 

Ici est la copie de la .css:

body {font:normal 12px Verdana, Arial, Helvetica, sans-serif; color:#10346b; background:#EAF5FF;text-align: center;margin:0px;}

.header{position:relative;background:#FFFFFF url("/img_turbo/shadow2.gif") repeat-y center top;margin-left: auto;margin-right: auto;width: 1010px;}

 

Avec l'espoir que cela soit utile tant a Alain56 qu'a mes deux amis

 

P.S. le js ne fut donne que parceque (comme vous) j'avais mal lu l'ennonce du probleme ... C'est pourquoi j;ai corrige avec un snippet de .css</p>

 

A bientot

 

Eric