Redimensionner un div dynamiquement en fonction de...

(reprise du message précédent)

CNeo a écrit :
Je suis de retour et je pense avoir compris ce que tu veux faire ( vaut mieux tard que jamais ).

La position absolue est une bonne idée, elle doit être appliqué à un grand nombre des cadres, au moins au menu, au contenu et au pied.

Le pied doit être placé en bas ( logique jusque là ) et avoir une hauteur. Le menu et le contenu doivent être décalés du bas de la page de la hauteur du pied et avoir un "overflow: auto" ( il faut peut-être réfléchir un peu à la façon de le mettre en place pour le menu afin que cela reste esthétique ). Enfin, dans le script qui gère l'ouverture et la fermeture du div du haut il faut insérer du code pour agrandir en même temps le contenu et le menu vers le haut.

Bonne chance. Si tu n'y arrives pas ou que je me suis mal exprimé bien sûr je reste dans les parages.

Excuse moi, mais je n'ais rien compris, j'ai essayé deux trois truc, par rapport à ce que tu dit, mais rien de bien concluent...

OK, je ré-explique.

Si j'ai bien compris ce que tu veux faire c'est que le menu, le haut et le pied soient toujours visibles et que seul le contenu défile, c'est ça ?

Pour faire cela, il faut s'assurer que la page entière ne va pas scroller or, le plus simple pour faire cela c'est de tout mettre en position absolue. Refait ta mise en page en mettant tout en absolue et ça devrait marcher.

Même fin de message que la dernière fois en espérant avoir été plus clair ...

Édit : il faudrait renommer ton topic et le placer dans la catégorie CSS car ton problème est bien d'ordre CSS.
Modifié par CNeo (09 Jul 2007 - 19:33)

En effet, là, je me suis reconcentré sur le CSS.

Bon visiblement, ll'absolut marche, sans que j'ai tout à mettre en absolut : je met le pied et la div de contenu en absolut, et c'est bon, sous Firefox, sous IE 7... mais pas sous IE 6 ! comme je disait, j'ai bien un probleme de largeur : meme si je met left à 190, et right à 0, la dive ne s'étend pas jusqu'a l'extremité droite de la fenêtre (uniquement sous ie 6)

C'est pour ça que j'aimerais continuer quand meme à chercher un solution en javascript en meme temps, si possible...

en fait, c'est pire que ça, je vien de voir que IE6 non seulement il se fout de la valeur right:0;, mais aussi de la bottom:0;, il ne prend en compte que left et top, ce qui fait que la div ce positionne au bon endroit, mais ne fait que prendre la taille du contenu, et ne s'étend pas à l'écran, et si jamais l'écran devient plus petit que la taille de base de la div, elle ne s'adapte meme pas, elle garde sa taille, ce qui fait que l'overflow ne sert à rien !

Tout ce que tu constates est sûrement un concours de circonstances, je vais manger et après j'essayerai de refaire la mise page.

Bon appeti, je te remerci pour ton aide en tout cas, parce que là, c'est vraiment la misère

Voici le lien vers la version en absolu, si ça peut vous aider :
http://polystudio.2.free.fr/test2/

Cette version marche EXACTEMENT comme je veux qu'elle marche dans Firefox (sauf pour le redimentionnement du au masquage du header). par contre, y'a un petit bug de position dans IE7, et IE6, c'est la misère...
Modifié par Assimil (10 Jul 2007 - 14:30)

Ta version est bien sauf qu'il faut que tu mettes ton menu en absolue aussi car si on rétrécie trop la page il fait tout scroller.

Édit: j'ai pas IE sous la main là, c'est quoi les bugs de positionnement ?
Modifié par CNeo (10 Jul 2007 - 15:05)

Voici les captures d'écran :

Firefox :
http://img487.imageshack.us/img487/903/firefoxhu5.th.gif

IE 6 :
http://img412.imageshack.us/img412/3957/ie6ae0.th.gif

IE 7 :
http://img487.imageshack.us/img487/7289/ie7pi0.th.gif

CNeo a écrit :
Ta version est bien sauf qu'il faut que tu mettes ton menu en absolue aussi car si on rétrécie trop la page il fait tout scroller.

Bin, je ne trouve pas le comportement génant... tu parle du menu du haut, ou de celui de gauche ?

moi ce qui me gène plus, c'est le comportement dans ie 6... t'as une idée à ce sujet ?

Je parle du menu de gauche. C'est gênant qu'il fasse scroller toute la page quand il est trop grand pour la taille de l'écran.

Pour IE6 je pense que le problème pourrait venir de la définition du positionnement absolue ( l'élément se place par rapport à son dernier parent positionné ). Fais en sorte que cet élément soit body en le positionnant ( en mettant par exemple une position relative ).
Modifié par CNeo (11 Jul 2007 - 10:47)

Ayé, en fait, je vai tout remettre en relatif et fair comme je pensais au départ en utilisant la fonction JS que j'ai trouvé ici :

http://pompage.net/pompe/pieds/

et qui marche tres bien pour mesurer la hauteur de la zone d'affichage !

en tout cas, merci pour tout

Bon, en fait, j'avais mis résolu, mais ça n'a résolut qu'une partie de mon probleme ^^

Maintenant, il faut que je detecte le redimentionnement de la fenetre et que j'adapte automatiquement la div en javascript...

Y a t il un moyen pour faire ça ?

Il y a quelque chose que tu oublies, la solution Javascript n'est pas utilisable chez les utilisateurs qui le désactive. Les CSS sont toujours à privilégier.

Oui, mais en CSS ça marche pas, et ça ne marchera jamais sous IE6 qui ne comprend pas bien les position absolute.

De plus, ce n'est pas un site web, mais un progiciel, dont on a un certain controle du parck utilisateur, et un des prerequi est justement d'avoir Javascript...

Apres, tout ce que je veux, pour ma part, c'est une solution à mon probleme, et comme ce n'est visiblement pas en CSS que je la trouverais, je me suis tourné vers JS, maintenant, soi je trouve quand meme une solution CSS par hazard, soit je trouve comment capter dynamiquement le redimentionnement d'une fenêtre en JS, ce sur quoi je concentre mes efforts...

(et de toute façon, tel que c'est conçu, si le mec n'a pas javascript le site marchera quand meme, sauf qu'il aurra l'assenceur au niveau de la fenetre et pas de la div... le javascript ne fait qu'aporter un peut de confort)
Modifié par Assimil (11 Jul 2007 - 10:54)

Je suis sûr qu'il y a une solution en CSS, le seul problème c'est que je n'ai pas IE6 à disposition donc je vais l'installer et je reviens te donner la solution.

Si tu as une solution à me proposer en CSS, qui marche dans ff, ie 6 et 7, je suis preneur ! parce que pour l'instant, mon JS, il fait la meme chose dans tout les navigateur, ce qui n'est pas le cas du CSS de cette version : http://polystudio.2.free.fr/test2

En meme temps, si quelqu'un sais comment detecter un redimentionnement de la fenetre en JS, ça m'interresse aussi

Merci d'avance ^^
Modifié par Assimil (11 Jul 2007 - 13:09)

Bah je suis pas un pro en JS mais le redimensionnement c'est un évenement ( sûrement onresize ), ensuite il suffit de trouver à quoi tu dois l'appliquer.

Oublie ce que j'ai dis sur le CSS je viens de me rappeler qu'il n'y a pas de solution pour IE 6 ( à ma connaissance en tout cas ).

Cependant comme le positionnement absolu fonctionne bien sous Firefox, IE 7 et Opera je te conseille de n'appeler ton script que pour IE 6 via un commentaire conditionnel.
Modifié par CNeo (11 Jul 2007 - 12:52)

Oui, mais le probleme, c'est que le script marche avec le relatif, et que la solution CSS est en absolut, donc... script pour tout le monde ^^

par contre, ce qui me manque VRAIMENT maintenant, c'est une solution pour détecter un redimentionnement de la fenetre, et relancer mon script pour pouvoir adaper à la nouvelle taille, je vais aprofondir le onresize... mais si quelqu'un sais quelque chose, ça m'aiderais bien
Modifié par Assimil (11 Jul 2007 - 13:10)

Bon, voilà, grace à ton indication sur le onresize (Merci beaucoup !) ça m'a permit de savoir ou chercher, donc maintenant, ça marche !

Youpi youpi ^^

Bon, me reste plus qu'un bug au niveau d'IE7, qui pour une raison qui m'échape, fait superposer tout le contenu sur le bas du header (CF capture d'écran IE7 ci dessus...)

si quelqu'un à une idée, ça m'aiderais bien,
Merci d'avance !