Marge blanche dans le background

[Full Carbone 94]

Bonjour,

 

j'ai un petit soucie sure mon site avec le background depuis un moment et je voudrais enfin le corriger.

 

j'ai crée une grosse image JPG pour le background avec une deco a gauche et a droite et au centre du blanc pour l'affichage du site.

 

mais il y a un soucie, pour chaque background que je crée, prestashop rajoute automatiquement une grosse marge blanche tout a droite et tout a gauche.

 

pour mieux m'expliquer si je change mon Background par une image en 1700px de large sur le site en ligne la résolution et de par exemple +2000px de large du coup le site devient tout petit est illisible .

 

ce que je comprend pas aussi :

-j'ai cette erreur sur mon pc sous seven et écrans 23 pouces

- il y a cette erreur sur plusieurs pc et mac grand écrans et petit écrans que je teste dans le magasin Fnac

-sur le PC de mon voisin qui tourne sous XP mais avec un écran de 21 pouces le site est en super zoom et on ne voie même pas le background

 

Lien : www.fullcarbone94.fr

prestashop : 1.4.10

Background : JPG 1700x1600

 

Si vous avez une petite idée, merci de votre aide !!!

[Nicks]

Bonjour,

 

Je ne suis pas certain d'avoir tout à fait saisi quel est le problème, en tout cas en jetant un oeil au site je pense pouvoir déjà affirmer que ce n'est pas Prestashop qui "créer les bandes blanches", il s'agit du fond de ta page qui est blanc de manière automatique si tu ne modifies pas la valeur.

Tu appliques une image de fond qui fait 1700px de large et qui est centrée horizontalement, ce qui implique que pour les écrans qui ont une résolution supérieur à 1700px, il y a forcément du blanc autour (qui correspond à la couleur de fond de body).

Pour éviter cela, tu dois modifier ton image (l'agrandir, par exemple 2000px de large, voir plus à toi de définir la résolution max), et étirer ton fond noir sur toute la largeur

[Full Carbone 94]

tu ma compris,merci de ton explication, mais comment évité ceci car sur les grand écrans le site et vraiment petit en milieux de page et presque illisible :/

 

il y a peut etre un code dans le CSS pour "élargir" la zone qui regroupe left,center et right colone et que le site soie lisible par tous sans avoir a zoomer pour affiché correctement le site.

 

si je supprime le background en JPG et que je le remplace par une couleur en #000000 le site est toujours afficher en petit :/

Edited July 11, 2013 by Full Carbone 94 (see edit history)

[Nicks]

J'ai un écran en 23" avec une résolution en 1920x1080 et la taille de ton site est tout à fait correct. J'ai effectivement les marges blanches sur les côtés, mais simplement car je suis en 1920, donc 1920-1700= 220, soit 110px blanc de chaque côté.

La largeur de ta div#page est de 980px, ce qui correspond tout à fait aux standards actuels.

Si ton site s'affiche donc "en petit" sur certains ecrans, je pencherai plus vers un problème de zoom : enfaisant ctrl + et ctrl - sur ton clavier (windows) tu peux agrandir ou réduire le zoom, peut-être que ton navigateur garde le niveau de zoom en cache?

Ca me parait assez peu probable, mais autrement je vois ce que ca peut etre d'autre...

[Stéphane Chonez]

Hello,

 

ton site est optimisé pour une résolution de 1024 px (la largeur de donc bloc id="page" est de 980px).

 

Donc plus tu visualisera ton site sur des écrans qui ont une résolution de plus en plus grande, plus ton site apparaîtra petit.....

(par ex, ton voisin doit surement avoir une résolution de 1024px, ce qui explique ton sentiment de 'grosseur')

 

De nos jours, même si le parc informatique progresse, la résolution conseillée, surtout pour du e-commerce, est le 1024px...

Après, il suffit de bien connaître l'équipement de ses internautes/acheteurs.... il y a un outils statistique dans le BackOffice de presta qui peut de donner des infos sur l'equipement de tes internautes.

 

 

Pour ton fond d'écran, tu en as crée un en 1700px de large donc tant que les internautes visionnent ton site sur un écran avec une résolution inférieure, ils ne voient pas les bandes blanches sur le côté mais avec une résolution supérieure ils les voient.

Franchement, je suis en 1920px est ça me choque pas....

la solution serait d’agrandir encore la largeur de ton image de fond (attention au poids) ou accentuer le dégradé du fond noir de la têtière afin d'éviter un arrête brutale.

 

 

a+

 

 

pour infos, les stats des résolutions.... http://fr.screenresolution.org/

[Nicks]

@Stéphane Chonez, c'est exactement le constat que je lui fait, mais j'ai quand même un doute sur le problème, par rapport à son histoire de "zoom". Il m'est déjà arrivé que le navigateur garde en cache le niveau de zoom que j'avais mis (ce qui expliquerait le soucis de lisibilité évoqué).

 

A moins qu'il utilise le zoom pour faire en sorte que son fond prenne exactement la largeur du viewport?

Si c'est le cas, il doit vouloir une image qui s'adapte à la fenêtre. Ce qui est possible avec du js ou du css3 (cover), mais vu sa compo, ca n'ira pas, les voitures sur les côtés n'épouseront plus le contour exact de la div #page...

 

Pour moi la solution la plus "simple", pour "éliminer les blancs peu importe la réso", serait de rajouter une div (avec une width:auto et un background noir en repeat-y)) qui contiendrait son header (qu'il faudra d'abord sortir de #page) puis il faudra ajuster la largeur (980px) et le centrage horizontal (margin: auto).

 

En gros l'arbo donnerait :

<div id="HeaderBg">

<div id="header">...</div>

</div>

<div id="page">

...

[Stéphane Chonez]

@Nicks tout aà fait d'accord avec toi !!!

mieux vaut optimiser son site en utilisant les css et n’utiliser les images que lorsqu’on peut pas faire autrement ;-)

 

sinon pour le zoom, j'ai retenu ça :"-sur le PC de mon voisin qui tourne sous XP mais avec un écran de 21 pouces le site est en super zoom et on ne voie même pas le background"

 

c'est sur qu'il est simplement en 1024, ce qui explique qu'il ne voit pas le background....

 

a+

[Full Carbone 94]

Bonjour,

 

Merci a vous 2 pour vos éclaircissement

 

@nicks :

"J'ai un écran en 23" avec une résolution en 1920x1080 et la taille de ton site est tout à fait correct."

on a donc exactement le même écrans et la même reso-, si, sur la page d’accueil je fait les touche "ctrl" + "0" on a normalement aucun zoom et on voie la page comme elle s'affiche pour le 1er utilisateur qui visite le site.

 

si je fait sa, j'ai bien les bandes blanche a gauche et a droite, mais tout les texte du site sont je trouve un peu petit :/

 

--------------------

 

je pense que un code en CSS ne doit pas être compliquer a metre en place, si comme dans vos réponse, et je pense que c une très bonne idée, faire en sorte que (par exemple) les 150er px de hauteur soi noir.

 

si vous avez le code sous la mains ou un lien qui explique la manipe a faire, je veux bien que vous le partager

 

--------------------

@Stéphane Chonez :

la solution serait d’agrandir encore la largeur de ton image de fond (attention au poids)

 

"entre guillemets" il y a un poids maxi a ne pas dépasser ? mon BG fait 195ko c déjà beaucoup a votre avis ? (avant optimisation il fessait 500ko).

 

merci pour le lien aussi

 

========

J'ai un peu beaucoup de question mais cette histoire de BG me tracasse depuis le début est je n'ai jamais pris le temps de le "corriger".

 

Merci a vous deux pour m'avoir déjà répondu

[Full Carbone 94]

Bonjour,

 

Nicks propose une solution "simple" qui ai de faire un header en noir sur une certaine hauteur en répétition.

ji avais penser, la je rentre de vacance, j'ai pas mal chercher mais je ne trouve d'explication clair, je suis pas un pros en CSS ou autre mais je me débrouille un petit peu.

 

quelqu'un peut m'expliquer rapidement comment faire cette bande noir sur le haut du site, ou si vous avez un lien qui explique bien ...

 

merci de votre aide !!!!