Discussion :

[Inoue-san]

Bonjour à tous,

Je créé le site d'un photographe en HTML5/CSS3 et PHP. Je dois réaliser un site full screen background image (en hd of course) avec un scroll uniquement horizontal.
Comme ceci : http://www.claytonbozard.com

Je souhaitais customiser la scrollbar et je me suis tournée vers des Plugins jQuery, notamment Jscrollpane http://jscrollpane.kelvinluck.com/

J'ai installé les différents fichiers et paramétré les dimensions de mon conteneur dans mon CSS.
Voici mes soucis :
- Firefox et IE affichent les deux scrollbars et ne respectent pas le height 100% pour mes images (les paysages sont très petites et les portraits trop grands)
- Chrome n'affiche que la scrollbar verticale

Mon conteneur section possède une requête PHP qui va chercher les images dans un répertoire, voici son CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
section {
   width: 100%;
   height: 100%;
   white-space: nowrap;
   position: absolute;
   overflow: auto;
   overflow-y: hidden;
}
 
section img  {
   display:inline-block;
   height: 100%;
}

Si quelqu'un a une idée, merci !

[MaitreKaio]

Veux-tu préciser quelles versions des navigateurs tu utilises, car je ne constate pas chez moi ce que tu dis.

[Inoue-san]

Yes, merci de m'avoir répondu !

Chrome 18.0
Firefox 11.0
IE 9

Voici la page en question en test
http://herve-w-photography.com/port/index.php

[MaitreKaio]

La démo de jScrollPane pour un scroll pleine page se trouve ici:
http://jscrollpane.kelvinluck.com/fullpage_scroll.html
Hors je ne vois pas dans le code de ton site quelque chose qui ressemble à cette démo. A moins que j'ai raté quelque chose, je pense que tu devrais t'en inspirer.

[Inoue-san]

Il s'agit d'une erreur de ma part, je suis passée à côté de cet exemple en effet.

Du coup hier, j'ai testé un plugin basé sur celui Kevin Luck : http://archive.plugins.jquery.com/pr...horizontalpane

Je dois régler le chevauchement avec les include PHP Header et Footer.

Je vais essayer le fullpage en parallèle, merci beaucoup !