Défilement horizontal liste des images

Je suis en train de créer un défilement horizontal de la liste. Je vais la remplacer par une fantaisie de version lorsque Javascript est activé, mais je veux le balisage et css pour l'apparence et le fonctionnement de l'amende sans Javascript raisonnablement les navigateurs modernes (toutes les suggestions qui utilise du Javascript est désactivé).

Mon balisage/css à l'œuvre, mais voici ce que je n'aime pas:

  • Le marquage en cours de spécifier une très large ul (c-10000px) et un conteneur qui permet de faire défiler sur cette. Est-il un moyen pour éviter cela et au contraire, la largeur se développe en fonction de son contenu (c'est à dire le bleu de l'arrière-plan ne devrait pas être là)?
  • Il y a deux étrangers divs (ceux avec l'id #extra1, #extra2) c'est juste pour le style de but. Est-il un moyen d'éliminer ce surplus de div?
  • Si il n'y a pas assez d'image pour remplir la largeur de la page, la barre de défilement doit s'effondrer, mais actuellement ce n'est pas parce que j'ai une très large ul qui ne peut pas s'effondrer.
  • La <a> tag sont séparés par la liste horizontale, de préférence, je veux les garder ensemble. Est-il un moyen de les avoir rapprochés et proprement les séparer en CSS?

De côté, connaissez-vous des tutoriels qui traitent de ce genre de chose? J'ai vu plusieurs tutoriels qui ont démontré avoir l'ensemble de la page pour faire défiler, et j'ai pris quelques idées de ceux-ci, mais je ne trouve pas que démontré défilement ul/ol élément.

Infos supplémentaires qui pourraient vous aider:

  • La largeur de la page est statique (c'est-à - pas fluide et élastique de mise en page).
  • Les images de la page est généré dynamiquement à partir de PHP, et le nombre d'images peut changer.
  • La largeur des vignettes sont bien définis.

Dépouillé live exemple: http://dl.dropbox.com/u/17261360/horiz.html

InformationsquelleAutor Lie Ryan | 2011-03-05