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.

[Yann39]

Je suis désolé mais je ne comprend pas. Je crois au'on parle pas du même soucis

Regarde mon exemple jsfiddle : http://jsfiddle.net/PFALN/1/ et essai de modifier (run pour voir les modifs), tu verra.

[Pauloscorps]

Rajoute ce code à #arbre_operations et dis moi si on se rapproche

Code :

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

1
2
3
4
 
    width:auto;
    max-width:50%;
    overflow:auto;

[Bisûnûrs]

Et si tu enlevais ces fieldset ? Ca marcherait sûrement mieux. Surtout que dans ton exemple il n'y ont pas leur place.

[Yann39]

Non car là #arbre_operations prend 50% des 50% de #operations_list :/

[Yann39]

Et si tu enlevais ces fieldset ? Ca marcherait sûrement mieux. Surtout que dans ton exemple il n'y ont pas leur place.

Disons que le fieldset me sert à avoir ce design, avec le titre "au milieu" de la border.

[Bisûnûrs]

Sémantiquement parlant, le fieldset sert à englober des éléments de formulaire d'une même catégorie. L'utiliser uniquement pour ses propriétés esthétiques est une erreur de structure HTML. Je te conseille donc de supprimer le fieldset et de positionner ton titre sur la bordure en CSS.
Et tout deviendra plus facile.

[Yann39]

OK je vais regarder de ce côté mais je ne vois pas trop comment faire...

Je vous tiens au courant.

Merci.

[Bisûnûrs]

Tu peux t'inspirer de ça :
http://www.developpez.net/forums/d79...e-bordure-div/

[Yann39]

Merci.

J'ai simplement procédé comme ceci (avec un background-color sur les span):
http://jsfiddle.net/PFALN/5/

Plus de problème d'overflow.

Le soucis maintenant c'est que ça me semble difficile de mettre 2 <div> 50% côte à côte avec les margin padding ...

[Bisûnûrs]

Ben il te suffisait dans le premier lien de remplacer tes fieldset par des div, tes legend par des titres positionnés correctement et les blocs restaient bien l'un à côté de l'autre.

[Yann39]

OK j'arrive enfin à ce que je voulais : http://jsfiddle.net/PFALN/6/

Grand merci à toi Bisûnûrs, et merci aussi Pauloscorps.

Reste plus qu'à tester ça sous quelques navigateurs.

à+.

[Yann39]

Bon ben sous IE (8) ça ne passe pas

Aucun soucis sous Chrome & FF.