Organisation du contenu sur 2 colonnes dynamiquement ?

Salut à tous,

voici mon souci:
j'ai une page organisée en DIV avec un menu à droite et à gauche en floatant. Il me reste donc une DIV centrale où je souhaite afficher une succession de fieldset.
Le soucis est de prendre en compte la taille de la fenêtre de navigation.
si l'internaute est sur :
- un écran 17" -> les fieldset s'affichent tous les uns sous les autres
- un beau 22" -> les fieldset s'affichent en 2 colonnes

c'est à dire :
soit :
1
2
3
4
soit:
1 3
2 4

c'est possible ?
merci
Modifié par pock (16 Aug 2007 - 23:58)

Salut,

Normalement oui, mais ça ne dépendra pas de la taille de l'écran, mais de la résolution qui sera utilisée dessus. Un écran 22 pouces en 800x600 ne permettra qu'une colonne, et en plus la taille des lettres fera dans les 2cm de haut.

... oui en effet c'est en fonction de la résolution, en fait c'est ce que j'entendais en parlant de "taille de la fenêtre". Résolution et taille d'écran sont tout de même assez liés, je vois pas beaucoup de 22" en 800x600 par chez moi

Donc ça serait possible, déjà ça me conforte dans l'idée de continuer à chercher car je commençais à épuiser mes cartouches.

Quelqu'un aurait un piste pour me mettre vers le droit chemin ?

Bonjour,
Dans ton contexte
1-3
2-4
Ca va être un peu plus compliqué, mais pas irréalisable. Peut être possible en full JS (mais je suis une bille à ce jeu là) Sinon
Déterminer, la largeur de la fenêtre en JS (Ca c'est mon niveau), passer la valeur à php qui se chargera via des classes css spécifiques de disposer les blocs comme il le faut... Facile non

Bonjour

Une idée en passant. Vu que la taille de la div centrale dépend de plusieurs paramètres (taille d'écran, résolution d'écran, taille de la fenêtre d'affichage) tu n'as guère d'autre solution qu'estimer vaguement cette taille (largeur de fenêtre moins marges moins largeurs des deux colonnes), de doter tes fieldset d'un float et d'appliquer une condition javascript du genre [ if largeurDiv <= 600px { largeurField = 100% } else { largeurField = 50% } ], où d'une part tu définis la taille en-deçà de laquelle ça s'affichera en une ou en deux colonnes, et d'autre part la largeur des fieldset. Selon les margin et padding demandés il faudra ajuster leurs largeurs pour que ça rentre au mieux.
Bon courage

 if largeurDiv <= 600px { largeurField = 100% } else { largeurField = 50% } ]

Je te conseillerais plutot de changer le className de ton <div> qui englobe tes fieldset et ainsi suivant la class tu donnes tel ou tel largeur.

merci pour les pistes !!
bon en effet je vois le bout du tunnel ... enfin une lueur blanche
j'ai mis les fieldset en float, le souci est dans l'organisation de tout ça.
J'obtient :
1 - 2
3 - 4
et non :
1 - 3
2 - 4
des idées ?
Modifié par pock (21 Aug 2007 - 15:46)

un petit up ...

bonjour ,

comme pour des menus entrecouper de h2 , pour les garder dans une colonne a droite et une autre a gauche , il suffit de les grouper :
1et 2 dans un premier conteneur
3 et 4 dans un second eux aussi en float .

Ensuite en dimensionnant les uns et les autres , tu devrais obtenir le resultat escompté :
ex:

<form action ='' method=''>
<div>
<fieldset><legend>1</legend><label>label</label></fieldset>
<fieldset><legend>2</legend><label>label</label></fieldset>
</div>
<div>
<fieldset><legend>3</legend><label>label</label></fieldset>
<fieldset><legend>4</legend><label>label</label></fieldset>
</div>
</form>

et css :

form div {width:800px;/* pour une reso de 1600px */float:left;}
form div fieldset {width:370px;float:left;}

Cela ressemble a ce que tu recherche , une simple application des flottants a mon sens.

GC

je replace un peu le contexte car j'ai du mal m'expliquer.

Je souhaite que plusieurs fieldset (en nombre variable) s'organise sur 2 colonnes dynamiquement, c'est à dire que suivant leur taille et leur nombre ils remplissent les 2 colonnes comme suit :
avec 6 fieldset.
1 5
2 6
3
4
sachant que la premiere colonne n'est pas défini par 4 fieldset mais par une hauteur maximum ... si les premiers fieldset sont plus grand ça donnerait :
1 3
2 4
. . 5
. . 6

du coup j'ai l'impression que la solution proposée ne fonctionne pas ...
je regarde encore pour les propositions précédentes, j'ai pas beaucoup de temps pour ça dernierement

merci de t'interressé à mon soucis en tout cas !
Modifié par pock (28 Aug 2007 - 22:38)