3 colonnes "rétractables" et fixes

Bonjours à tous et d'abord merci pour toutes les ressources disponibles sur ce site et aux conseils trouvés sur ce forum.

Je viens vers vous car j'ai un petit souci (évidement )

Je suis en train de refaire la structure d'un site ( http://www.randonner-leger.org/forum/index.php ).
On souhaite conserver la colonne de menu de gauche et en rajouter une autre a droite. J'ai donc utilisé les infos trouvées sur ce site pour faire 3 colonnes en float.
Nous souhaitons que la colonne de gauche reste en haut de l'écran je l'ai donc mise en position:fixed

J'ai donc ça :
#colonne1 { position: fixed; width:150px;}
#centre { position :relative; margin-left: 170px;}
#colonne2 {float: right; }

Mais je veux pouvoir rétracter ces 2 barres (en utilisant un script spectaculous).

Pour celle de droite pas de problème. Je clic sur la barre "association". Celle-ci disparait et la barre de menu apparait, repoussant le partie forum (dans la balise centre) et vice versa. Super

Par contre pour la gauche, ça ne marche pas puisqu'elle est en "fixed". J'ai donc du mettre un margin-left: 170px a la balise centre pour qu'elle ne recouvre ma barre.
Du coup quand je fait disparaitre ma barre, le forum ne viens pas se coller a gauche

Y aurait il une solution en css ou faut il que je modifie le margin-left en JS (ça doit être faisable, non ?)

Vous avez mon brouillon là :
http://tvesin.dyndns.org/Forum/viewtopic.php?id=1

Merci d'avance.
Modifié par highpictv (08 May 2011 - 19:02)

Bonjour,

Le mieux serait de supprimer le positionnement fixe du menu de gauche.

Accessoirement, ce positionnement pose problème en cas de petit viewport (typiquement, j'ai un écran en 1280*1024px, mais mon navigateur est toujours réduit à 1024*600, ton menu s'affiche donc avec des ascenseurs intérieurs, ce qui est extrêmement moche et absolument pas ergonomique) ou de petite résolution (mini-pc).

Oui mais on souhaite que cette barre soit fixe ...
J'ai résolue le problème en modifiant dynamiquement (en JS) la marge de gauche de la balise centre.

Mais je suis surpris de ce que tu me dis a propos des ascenseurs. En réduisant ma fenêtre, il n'apparait jamais d'ascenseurs dans aucune des 3 parties et ce sous aucun des navigateurs que j'ai testé (FF, IE, opera, safari, chrome) !?

Sous IE8



Désolée pour la qualité, je n'ai que Paint sur cet ordi ^^;
Modifié par Laurie-Anne (09 May 2011 - 09:34)

Très étrange je n'ai pas ça sous IE9 et je ne me souviens pas l'avoir eu sous IE8

highpictv a écrit :
Oui mais on souhaite que cette barre soit fixe ...

Tu peux la rendre fixe uniquement s'il y a la place pour l'afficher à l'écran. À tester en JavaScript.

Pour adapter la mise en page lorsqu'on masque une barre, tu peux utiliser JavaScript pour ajouter une classe sur la colonne centrale, et définir une variation des styles CSS pour cette classe (par exemple diminuer ou supprimer un margin-left).

highpictv a écrit :
J'ai résolue le problème en modifiant dynamiquement (en JS) la marge de gauche de la balise centre.

Éviter de modifier les styles CSS via un script JS. Il vaut mieux ajouter/supprimer des classes sur les éléments, et gérer le reste dans la feuille de styles.

D'accord, merci. N'étant pas un pro je ne sais pas comment faire ça mais je vais trouver