Fixer des div (fonctionnement comme avec un tableur)

Bonjour à tous,

Je développe une application de planning et j'aimerais pouvoir "isoler" la partie contenant les données de la div verticale (avec les noms des personnes) et de la div horizontale (avec les journées de la période sélectionnée)

Mon objectif serait qu'en utilisant la barre défilante horizontale, seule la div verticale soit fixée et qu'en utilisant la barre défilante verticale, seule la div horizontale soit fixée. Un peu à l'image de ce qui se fait avec un tableur.

Je joins une capture de ce que j'ai en ce moment avec des lignes rouges pour bien montrer la séparation entre les 2 div et mes données.



Comment m'y prendre ? Je ne sais pas si le CSS est suffisant ou si je dois m'accomoder du javascript ?

J'imagine que je dois créer 3 div en tout (un pour les noms, un pour les dates et un autre pour les données), mais comment faire interagir ce beau monde ?

Merci pour vos idées !

Marigny
Modifié par Marigny (07 Jun 2006 - 17:48)

Hello,
en mettant un

overflow:scroll;

sur ton div du centre, et en fixant sa taille, tu auras un contenu scrollable.
(comme une iframe mais en accessible )

Bonsoir,

Si je procède ainsi, mes données seront effectivement scrollables, mais tout le reste sera figé, donc les données ne correspondront plus ni aux dates, ni aux personnes dès qu'on commencera à se servir des barres défilantes !

Marigny

arf oui, j'avais mal interpreté le truc...
le problème c'est que du coup, ton contenu est en "double scroll"
(il doit bouger avec la colonne de gauche en scroll vertical et bouger avec la ligne du haut en scroll horizontal)
Donc je ne vois pas de solution ... en tout pas pas css uniquement

Salut,

Pour ma part, ce genre de donnée est typiquement tabulaire. Pourquoi ne pas utiliser un tableau "simplement" ?

Je penses que faire des CSS ce n'est pas, par principe, supprimer tout les tableau.

;)

a écrit :

le problème c'est que du coup, ton contenu est en "double scroll"
(il doit bouger avec la colonne de gauche en scroll vertical et bouger avec la ligne du haut en scroll horizontal)
Donc je ne vois pas de solution ... en tout pas pas css uniquement

C'est bien ce que je pense. C'est pour ça que je redoute d'avoir à utiliser du javascript...

a écrit :

A vue de nez, je dirais 3 blocs : un pour le menu haut (les dates), et pour les entêtes verticaux (les noms griffonés), et un pour les infos elles-mêmes.
Pur aligner tout ça, tu pourrais par exemple mettre le bloc haut en normal, le bloc gauche en float left avec une largeur x, le bloc de données avec une largeur non définie a priori - ce qui devrait donner (total - x) - et la même hauteur que le bloc de gauche, et un overflow:auto.
Il te faudra peut-être jouer un peu sur les dimensions suivant présence ou absence du scroll.

C'est ce que j'entendais faire dès le départ, mais dans certains cas (visualisation du planning sur un mois, voire plusieurs; présence de tous les utilisateurs), le tableau est si grand que c'est préférable en terme de confort de fixer une taille maximale pour l'ensemble et faire un "double scroll" pour tout visualiser, d'où ma demande !

a écrit :

Pour ma part, ce genre de donnée est typiquement tabulaire. Pourquoi ne pas utiliser un tableau "simplement" ?

Je penses que faire des CSS ce n'est pas, par principe, supprimer tout les tableau.

;)

Les données sont sous la forme d'un tableau (le tout dans des CSS).

Mais dans un cas comme dans l'autre, ça ne m'aide pas pour résoudre mon problème de "double scroll".

Marigny a écrit :

Les données sont sous la forme d'un tableau (le tout dans des CSS).
Mais dans un cas comme dans l'autre, ça ne m'aide pas pour résoudre mon problème de "double scroll".

Désolé, j'avais mal lu.

A priori, il faudrait du javascript sur les scrollbars pour pouvoir gérer le comportement des div...

Quelqu'un aurait une idée ?

Merci d'avance !

On m'a conseillé de m'inspirer de ceci : http://gatsu.ftp.free.fr/html/test_tableau.html

C'est du javascript pur, je m'en doutais un peu.