Adaptation d'une div a son contenu

Bonjour,

Voila la situation.

J'ai des div floaté pour s'afficher sur une ligne. Et je dois pouvoir scroller l'ensemble horizontalement. Or si je les met dans une div avec un largeur fixe avec un overflow les div floaté qui dépassent la largeur se mettent à la ligne.
Comment je peux faire pour que les élément reste sur un ligne et que le scroll soit horizontal?
Modifié par Register (27 Mar 2009 - 10:38)

Bonjour,

Si la div qui es englobe à une largeur de 1000px (par exemple), il est normal qu'après 1000px les éléments flottants reviennent à la ligne.

Le plus simple pour que les éléments reste sur une ligne est de donner au div conteneur la somme de tous les éléments flottants comme largeur (ou une largeur exagérement grande).

Cependant, je doit te prévenir que le scroll horizontal est généralement une mauvaise idée (que beaucoup veulent mettre en place sous couvert d'originalité). C'est une mauvaise idée car, les utilisateurs ne sont pas habituer à ce comportement, et que si la majorité des souris permet le scroll vertival, très peu permettent le scroll horizontal, ce qui du coup, fait revenir les utilisateurs une dizaine d'année en arrière en les forcant à scroller manuellement en sélectionnant l'assenceur et le déplaçant.

Hello,

Une idée : imbriquer deux <div> et fixer une largeur plus importante à la deuxième.

<div id="conteneur_global">

     <div id="conteneur_large">

          <!-- Vignettes -->

     </div>

</div>

div#conteneur_global {
width:500px;
overflow:auto;
[...] }

div#conteneur_large {
width:1000px;
[...] }

Je ne vois pas de solution permettant d'adapter automatiquement la largeur du conteneur des vignettes en fonction des éléments qu'il contient. Ou alors avec un javascript, qui calcul la largeur nécessaire et l'attribue au conteneur...

Laurie-Anne a écrit :
Cependant, je doit te prévenir que le scroll horizontal est généralement une mauvaise idée (que beaucoup veulent mettre en place sous couvert d'originalité). C'est une mauvaise idée car, les utilisateurs ne sont pas habituer à ce comportement, et que si la majorité des souris permet le scroll vertival, très peu permettent le scroll horizontal, ce qui du coup, fait revenir les utilisateurs une dizaine d'année en arrière en les forcant à scroller manuellement en sélectionnant l'assenceur et le déplaçant.

Lorsqu'il n'y a pas de scroll vertical, juste horizontal, la molette déplace cette scrollbar horizontale.

Cela dit, ce n'est pas un comportement intuitif, je te l'accorde.

Merci pour les réponses rapide.

L'imbrication j'ai testé, mon but est de ne pas fixé la largeur de la div mais qu'elle s'adapte à son contenu, certaines div ne sont pas visibles, ce qui fait que si je fixe une taille il faut que je la recalcule à chaque apparition ou disparition de div...

Pour le scroll horizontal c'est pour une application, pas un site web donc les comportement hors normes ne pause pas de pb ils sont même souhaitable dans ce cas (lisibilité de l'écran) .

Register a écrit :
L'imbrication j'ai testé, mon but est de ne pas fixé la largeur de la div mais qu'elle s'adapte à son contenu

Je t'ai parlé de javascript mais c'est également possible en PHP (si tu l'utilises) :

<div id="conteneur_large" style="width:<?php echo $largeur_totale; ?>px;">

Register a écrit :
certaines div ne sont pas visibles, ce qui fait que si je fixe une taille il faut que je la recalcule à chaque apparition ou disparition de div...

Pas compris. Pourrais-tu être un peu plus précis ?

Les div contenu dans la zone scrollabe peuvent être en 'display: none'. Par exemple j'ai 5 div et la 5eme dépasse, mais l'utilisateur en cache une et les 4 restantes ne dépassent plus, le scroll doit disparaitre.

Si je fixe la taille de la div, il faut que je la recalcule à chaque apparition ou disparition de div ce qui ne m'arrange pas. Je préfèrerais un comportement standard géré par les CSS (mais ce dernier n'existe peut être pas)

Register a écrit :
Si je fixe la taille de la div, il faut que je la recalcule à chaque apparition ou disparition de div ce qui ne m'arrange pas. Je préfèrerais un comportement standard géré par les CSS (mais ce dernier n'existe peut être pas)

J'ai peur qu'effectivement dans ce cas, seul JavaScript te permette de faire ce que tu souhaite simplement.

Agylus a écrit :
Lorsqu'il n'y a pas de scroll vertical, juste horizontal, la molette déplace cette scrollbar horizontale.

Certes, mais comme il est quasi impossible de s'assurer qu'il n'y aura pas de scroll vertical...