Défilement horizontal Wordpress - Possible avec CSS?

Question

Est-il possible de modifier le CSS d'un thème pour permettre le défilement horizontal dans Wordpress?

Je pense que le conteneur de contenu est ce qui doit être réglé à un très large avec? Le conteneur de contenu doit toujours être contenu par la largeur de l'encapsuleur de mon thème.

Voici le CSS codage de mon thème:

#wrapper{width: 90%; max-width: 980px; margin: auto;} 

#header-container{max-width: 95.918367%; padding: 2.127660%; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;} 

#content-container{padding: 0px; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;} 

#left-column{float: left; width: 63.265306%; padding: 20px 2.040816%;} 
#right-column{float: right; width: 28.265306%; padding: 20px 2.040816%; border-left: 3px solid #f0f0f0;} 

.portfolio #left-column{float: left; width: 69.387755%;} 
.portfolio #right-column{float: right; width: 22.142857%; border-left: 3px solid #f0f0f0;} 

#full-width{padding: 20px 2.127660%; margin: auto;} 

#footer-container{margin: 0px auto; padding: 0px; background: #293037; overflow: hidden;} 

.post-image img{width: 100%; height: auto;} 

Si cela est impossible, y at-il d'autres suggestions que vous pourriez avoir tout pour créer cela dans Wordpress? J'essaie de faire un site qui défile de la même manière que ce site: http://www.gouldevans.com/portfolio/ku-debruce-center Je ne veux pas que le défilement occupe la totalité de la page, je veux quand même que les informations de défilement soient contenues dans un cadre quelconque.

Toute information serait grandement appréciée!

Answer 1

Pour répondre à votre question ... Oui, vous pouvez le faire dans Wordpress. Ou toute autre application HTML/CSS où vous avez la possibilité de modifier le CSS.

Le concept est assez simple:

1. Vous avez un récipient d'emballage avec overflow-x propriété définie sur scroll et un width de 100% de la fenêtre.
2. Vous disposez d'un conteneur interne dont le contenu est plus large que la fenêtre.

Avec ce scénario, les barres de défilement horizontales de votre wrapper seront activées. Vous pouvez appliquer le même concept à votre structure Wordpress et CSS assez facilement. J'ai fourni un exemple réduit ci-dessous.

Avertissements:

• overflow-x est une propriété CSS3 donc si vous ciblez les navigateurs qui ne prennent pas en charge CSS3 vous aurez envie de prendre une autre approche.
• Je vous recommande de ne pas modifier directement un thème Wordpress mais de créer un thème enfant et de surcharger le fichier styles.css avec celui-ci. Sinon, vous devrez faire face à des complications à l'avenir lors de la mise à niveau de votre thème. C'est un processus assez simple et facile à trouver avec une recherche rapide sur google.

Bonne chance!

.wrapper { 
 
    width: 100%; 
 
    overflow-x: scroll; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    width: 2000px; 
 
    
 
} 
 

 
img { 
 
    float: left; 
 
}

<div class="wrapper"> 
 
    <div class="container"> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    <img src="http://fillmurray.com/200/200" /> 
 
    </div> 
 
</div>