Comment masquer une barre de défilement horizontal (après avoir mis diaporama sur toute largeur) ?

[spip93]

Bonjour à tous et à toutes,

 

Comme je voulais un slider/diaporama sur toute la largeur de l'écran, j'ai suivi les indications données dans le sujet :

https://www.prestashop.com/forums/topic/317253-r%C3%A9solu-slider-sur-toute-la-largeur-de-la-home/

 

Cependant, je voulais un diaporama plus large que les 1170 pixels et toutes les méthodes indiquées dans ce sujet ne fonctionnaient pas (css, php, js...)

J'ai compris pourquoi il y a quelques minutes.

Je ne vais pas vous expliquer comment j'ai trouvé (ça serait trop long), mais je vais vous donner directement la solution (ou tout du moins une piste) à ceux que ça intéresse et qui n'y arrivent pas (comme moi il y a quelques minutes encore).

En fait, j'ai modifié le fichier header.tpl dans situé dans le dossier de votre thème.

J'ai recherché la DIV qui contient le diaporama et qui s'appelle "slider_row".

Pour ma part (dans le thème par défaut, "default-bootstrap"), elle (la DIV) se trouve entre la ligne 118 et 123 :

<div id="slider_row" class="row">
{capture name='displayTopColumn'}{hook h='displayTopColumn'}{/capture}
{if $smarty.capture.displayTopColumn}
<div id="top_column" class="center_column col-xs-12 col-sm-12">{$smarty.capture.displayTopColumn}</div>
{/if}
</div>

Il faut déplacer ces lignes juste avant la balise de fermeture du header </header>, entre les lignes 110 et 111.

 

Pour faire court, pour les novices en HTML/CSS, (bien que je sois très loin d'être un expert en la matière) une page Internet, c'est un carré (une DIV) dans un carré, lui même dans un carré.

Ici la DIV "slider_row" est dans une DIV "columns-container". Or, la DIV "columns-container" fait (au max) 1170 px. Donc si vous voulez que l'une des DIV à l'intérieur (en l'occurrence "slider_row" soit plus large que son conteneur (la DIV "columns-container" qui fait 1170 px de large), vous avez 2 solutions :

• Agrandir le conteneur (la DIV "columns-container") et passer de 1170 px à la largeur que vous voulez
• "Sortir" le contenu (la DIV "slider_row") pour la mettre dans un conteneur plus grand

C'est cette dernière solution que j'ai faite en déplaçant la DIV "slider_row" dans la le header (l'entête).

C'est logique près coup, mais il fallait y penser.

 

Ceci dit, je fais le malin en étalant ma "pseudo" science (en fait je suis content d'avoir trouvé   ), mais j'ai quand même un souci et c'est pourquoi j'en appelle aux plus forts que moi en la matière

 

Le problème que j'ai, c'est que j'ai bien mon diaporama qui prend toute la largeur de mon écran (comme je voulais), mais surtout, j'ai maintenant une barre de défilement horizontale pour quelques pixels de trop en largeur et je n'arrive pas à savoir quoi et où modifier pour qu'elle disparaisse (cette barre de défilement horizontale).

 

Pourriez-vous m'aider SVP ?

D'avance merci pour votre réponse

[poisson]

Un lien vers ton site ?

Tu as enlevé la class row de :

<div id="slider_row" class="row">

?

La class row ajoute des marges négatives ce qui expliquerais ton problème.

Edited July 26, 2016 by poisson (see edit history)

[spip93]

Super, Poisson !! C'était effectivement ça !

N'empêche, fallait le savoir !

J'aurais cherché un moment. J'étais parti pour le mettre dans une DIV et créer une classe spécifique, mais j'étais même pas certain que ça fonctionne.

En tout cas, un grand merci à toi

 

Bonne journée

[poisson]

Est ce que tu utilise developper tools (pour chrome) ? Si non je te conseil fortement d'y jeter un œil
Car c'est juste indispensable et avec ça tu l'aurais vu assez rapidement je pense. 

[spip93]

Oui et non.

J'ai Chrome, mais je travaille surtout sous Firefox, avec l'Outil de développement qui est intégré (comme sous Chrome d'ailleurs). C'est la même chose que Developer Tools, non ?

 

Quand je veux modifier quelque chose, je fais F12 (pour ouvrir l'Outil de développement), j'utilise l'inspecteur pour cibler l(es) élément(s) que je veux modifier.

Quand j'ai trouvé, soit ça m'indique dans quel fichier modifier, soit je cherche un mot/une expression (généralement un nom de classe ou un code couleur) avec mon éditeur de texte (phpDesigner).

Il y a surement d'autres et de meilleures méthodes, mais c'est la seule que je connaisse (étant autodidacte, j'en ai pas appris d'autres).

[poisson]

oui c'est bien ça.
Il te met toujours le fichier mais si tu a activé le cache forcement c'est un CSS compressé qui est générer donc tu le retrouve pas facilement.

Ce que je fait perso c'est en local je désactive le cache pour retrouvé ce que je cherche.