[Solved] Supprimer la barre horizontale de défilement de l'exploreur

[navlaca]

Bonjour,

Mon site a une barre de défilement horizontale sur l'exploreur (IE, Firefox).

Et pourtant la largeur du body ne dépasse pas la taille de l'écran.

J'ai déjà testé la CSS overflow: hidden mais cela ne règle pas le problème. Il s'agit bien de la barre de l'exploreur et non d'une fenêtre "interne".

Ceci crée un problème lors de l'affichage du détails des commandes: la colonne de gauche est glissée à gauche de l'écran et donc cachée.

Comment supprimer cette barre de défilement?

D'avance merci pour votre aide.

[Carl Favre]

Bonjour navlaca,

 

Peux-tu mettre un lien vers ton site ? Cela sera plus simple pour t'aider.

 

Carl

[navlaca]

Ouaaah, Merci Carl pour ton aide. Afin que ce post ne soit pas référencé par le nom de mon site je te le donne à l'envers:

ailakcos.be. En effet, il s'agit d'une boutique en activité. Comme je l'ai dit, je crois que la solution ne se trouve pas avec overflow. En réalité, l'écran est plus grand que la balise html (que j'ai mise à 99% et encadrée pour vérifier sa largeur).

html {width: 99%; border: solid 5px green}. Lorsque la taille sera bonne, je suppose que la barre de défilement disparaîtra de par elle-même.

Cela peut paraître être un problème trivial, mais comme je l'ai dit plus haut, cela perturbe le déplacement de l'écran du détail d'une commande, d'un retour client... Etant donné qu'il s'agit d'un site LIVE, ne passe aucune commande de test mais tu peux simuler la consultation d'une commande en t'identifiant avec anneduchastel1<at>gmail.com, azerty1

Dis-moi quand tu as fini les tests, histoire que je rechange le mot de passe.

Encore merci.

[Carl Favre]

Je t'en prie navlaca .

 

En regardant ton css on remarque que :

 

 

#page {


margin: 0 auto 2px;
text-align: left;
width: 96%;

 

 

Pourquoi ne mets tu pas

 

width:960px;

par exemple

 

ou une autre valeur qui corresponde afin de limiter la taille et supprimer cette barre horizontale ?

[navlaca]

Même si je travaille en pixels plutôt qu'en pourcentage, cela ne fonctionne malheureusement pas.Ceci dit, je pensais que travailler les largeurs en pourcentage permettait d'adapter les écrans aux différentes résolutions des visteurs: ai-je tort?

[Carl Favre]

Si tu mets en pixel dans une taille compatible avec la majorité des résolutions tu n'auras pas cette barre sur les 3/4 des écrans.

 

Le fait d'utiliser des % permet en effet d'adapter plus facilement selon les résolutions mais il faut bien vérifier tous les éléments, qu’il n’y ait pas une valeur en pixels dans un module ou des marges/paddings qui vont casser la mise en page.

[navlaca]

Voici comment sont imbriquées les balise: html -> body -> page

Je n'ai mis aucune width à body et page et j'ai essayé plusieurs width pour html:

Le seuil à partir duquel la barre de défilement réapparaît est html {width: 904px}

Ce qui est manifestement trop étroit pour mon site.

De plus cela laisse tout un espace perdu à droite de l'écran.

La question est de savoir: comment supprimer cet espace perdu?

Je joins en pièce attachée une capture d'écran (fichier avec extension bmp mais en réalité c'est un .zipx).

Si tu pouvais me trouver une solution ce serait GENIAL!!

Merci.

ecran.bmp

[Carl Favre]

Sarah, notre experte intégratrice, a trouvé le problème .

 

Voici le coupable :

 

<ul id="block_various_links_footer" class="block_various_links">

 

Le CSS correspond :

 

#footer .block_various_links {
left: 355px;
list-style: none outside none;
position: relative;
}

 

C'est le "left 355px" qui pose problème. Tu peux également enlever le "position relative".

 

A la place tu peux mettre une width 455px et margin auto par exemple.

 

Tu as également pas mal de doublons dans tes ID, des ID + CLASS comme tu peux le voir dans la ligne fautive. Vérifie bien ton code.

 

Carl

[navlaca]

Bonsoir Carl,

Un super MEGA géant merci à Sarah. Ca marche. Dis-lui qu'elle est grandiose!!!

Ceci dit, le code à corriger est le code natif du module blockcms, mais il doit y avoir un conflit avec d'autres spécifications CSS que j'aurais fait dans global.css.

Encore mille mercis à vous.

Nathalie