overflow:auto sans width ?

Version imprimable

31/08/2011, 12h00
Yann39

overflow:auto sans width ?

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 !
31/08/2011, 12h19
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 :mouarf:.
31/08/2011, 13h56
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.
31/08/2011, 14h00
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.
31/08/2011, 14h09
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.
31/08/2011, 14h27
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.

Citation:

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:

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.
31/08/2011, 14h37
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.
31/08/2011, 14h43
Pauloscorps
Rajoute ce code à #arbre_operations et dis moi si on se rapproche ;)
Code:

1 2 3 4 width:auto; max-width:50%; overflow:auto;
31/08/2011, 14h47
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.
31/08/2011, 14h47
Yann39

Non car là #arbre_operations prend 50% des 50% de #operations_list :/
31/08/2011, 14h51
Yann39

Citation:

Envoyé par 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.

Disons que le fieldset me sert à avoir ce design, avec le titre "au milieu" de la border.
31/08/2011, 14h53
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.
31/08/2011, 14h55
Yann39

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

Je vous tiens au courant.

Merci.
31/08/2011, 15h04
Bisûnûrs

Tu peux t'inspirer de ça :
http://www.developpez.net/forums/d79...e-bordure-div/
31/08/2011, 15h22
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 ...
31/08/2011, 15h27
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.
31/08/2011, 15h43
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.

à+.
31/08/2011, 15h53
Yann39

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

Aucun soucis sous Chrome & FF.