Discussion :

[Yann39]

Bonjour,

j'ai un petit soucis de mise en page.

J'aimerais avoir 2 colonnes, chacune en width:50% (avec un petit espace entre elles). Mais dans celle de gauche j'affiche un arbre, lorsque celui-ci devient trop large, je voudrais qu'une scrollbar apparaisse plutôt que d'élargir la colonne.

Le mieux serait que la scrollbar apparaisse sur le conteneur de l'arbre (id="arbre_operations") et non sur la colonne (id="operations_list"). Le tout sans <table> si possible.

Je sais que normalement overflow:auto nécessite des dimensions fixes, mais ya-t-il une autre solution ?

J'ai implémenté un petit exemple :
http://jsfiddle.net/PFALN/1/

Merci !

[Pauloscorps]

Bonjour Yann39,

Une solution à ton problème pourrait être de rajouter un max-width à ta div ainsi qu'un overflow:scroll.
Je ne peux malheureusement pas tester ce que j'avance, mais jette y un coup d'oeil.

EDIT : max-width & co ne passant pas sous IE7 & 8 (pour la 8 c'est moins sûr), tu devras par contre chercher un moyen d'"activer". Mais çà, c'est uniquement dans le cas où mon idée fonctionne .

[Yann39]

Merci pour ta réponse.

J'ai déjà un overflow:auto; car je ne veux pas de la scrollbar si pas besoin.
Pour le min-width c'est toujours le même soucis je ne veux pas de largeur fixe, car en fait mes 2 colonnes qui sont en width:50%; n'auront pas toujours la même taille en fonction de la largeur de la page.

[Pauloscorps]

Je t'ai proposé un max-width

Je vais essayer de mieux t'expliquer.
En gros, tu laisse ton width:auto, mais tu spécifie que si la zone devient trop large, alors à ce moment là il faudra mettre une scroll bar.
Ce que tu va faire en mettant en place un max-width. Par contre, tu va devoir trouver la valeur qui convienne le mieux manuellement.

[Yann39]

Oui pardon je voulais écrire max-width

Je ne peux pas spécifier une valeur pour max-width, vu que la largeur du conteneur de l'arbre (id="arbre_operations") doit être fluide.

En imaginant un écran de 10000 * 1080, ce conteneur serait super large, et il faudrait un contenu encore plus large pour déclencher l'overflow.

[Pauloscorps]

Je viens de te faire un exemple visible à cette adresse :
http://www.paulineghiazza.fr/blog/ex...menu-overflow/

Je l'ai codé à la va vite mais ca te permettra de voir ce dont je te parle en image.

Je ne peux pas spécifier une valeur pour max-width, vu que la largeur du conteneur de l'arbre (id="arbre_operations") doit être fluide.

En imaginant un écran de 10000 * 1080, ce conteneur serait super large, et il faudrait un contenu encore plus large pour déclencher l'overflow.

Tu as codé ton site en %, donc aucun problème. Il te suffit de mettre à ta div de menu :

Code :

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

1
2
3
4
5
6
7
 
#maDivdeMenu {
     width:auto;
     height:auto;
     max-width:50%;
     overflow:auto;
 }

J'espère que ce coup-ci je vais arriver à t'aider, sinon mauvaise nouvelle, c'est moi qui n'aurait rien compris à ta demande .

Pauline.