Mise en page de menu à gauche et à droite

Bonjour,

Je sais que mon probleme a été posé plus d'une fois, mais malgré mes recherches sur les float, les éléments en position absolute... je n'arrive pas à trouver une mise en page efficace qui s'adapte à plusieurs résolutions d'écran!

Mon site est créé comme ceci:

une div de 1000px centrée à hauteur variable dans laquelle on a :
-en tete, menu, corps et pied de page largeur 100% (à hauteur en pourcentage, sauf pour le corps qui a une hauteur variable), tous centrés horizontalement par des margin auto.

Mon souci, c'est que je voudrais au niveau du corps :
- un menu à gauche : il ne s'affiche que lorsque j'ai cliqué sur un sous-menu de mon menu principal
- un menu à droite : menu vu seulement par les utilisateurs connectés (pour rédiger des articles par exemple)

Et là, je teste et reteste, rien ne fonctionne bien :
- si je mets ces deux div en float left et right, le texte de mon corps se décale vers la gauche ou la droite...
- si je les mets en position absolute, le changement de résolution fait qu'elles ne restent jamais au même endroit

Y'a t-il une solution qui me permette de placer ces deux "bandes" de menu correctement, ou avez-vous une autre idée d'emplacement qui s'adapte bien à toutes les contraintes d'un site?

Je vous remercie d'avance,

Steph
Modifié par steph6499 (15 Aug 2011 - 12:45)

Pourrait-on avoir un bout de code html, ou même un lien vers une page de test ?

Sinon, j'imagine quelque chose de ce genre :

<div class="sous-menu">ton menu</div>
<div class="menu-connecte">le menu pour les utilisateurs connectés</div>
<div class="contenu">le reste</div>

Et ensuite tu écris :

.sous-menu {
float:left;
width:100px;
}
.menu-connecte {
float:right;
width:100px;
}
.contenu {
margin-right:100px;
margin-left:100px;
}

Normalement tu auras l'espace qu'il faut autour de ton contenu pour que rien ne se décale.

Salut salut,

Moi j'dis laisse tomber les floats, et utilise inline-block, ca sera plus propre et plus simple.

Bref je te conseil ce lien qui pourra surement te séduire ^^

A bientôt

Merci de vos réponses à tous les deux.

AkaiKen --> j'ai remis mes floats dans le code pour pouvoir t'envoyer celui-ci, mais a priori tous les problèmes dûs à la résolution et à l'emplacement des floats semblent avoir disparu (je ne sais pas ce que j'avais foutu avant!!).
Par contre, il me reste un souci :
le texte à l'intérieur du corps est centré, et du coup, quand il se trouve à la même hauteur que les floats, il se centre par rapport à ce dernier, et non plus par rapport au bord gauche du corps (j'espère être claire).
Ce problème aurait pu être résolu par le fait que j'ai également un float à droite mais comme il n'est pas de la même largeur que celui de gauche mon texte dans le corps à hauteur des float est décalé par rapport au texte en dessous de ceux-ci!!
Qu'entends-tu par "Normalement tu auras l'espace qu'il faut autour de ton contenu pour que rien ne se décale." ?

Sinon je veux bien aller voir du côté des inline block mais si je peux améliorer mon code sans avoir à changer pleins de choses (donc à voir peut-être plus tard, si je n'ai pas de solution à mon problème).

Je n'ai donc pas donné d'image ni de code, mais je le ferai s'il le faut toujours.

Merci d'avance,

Peux-tu mettre ici un lien vers la page qui pose problème ? Ou bien une page de test ?

a écrit :
Qu'entends-tu par "Normalement tu auras l'espace qu'il faut autour de ton contenu pour que rien ne se décale." ?

Tout simplement que les marges font que la présence ou non de ta colonne de gauche, par exemple, ne va pas jouer sur la position de la colonne centrale.

Tiens : http://www.lamecarlate.net/tests/aide/col.html (désolée pour les vives couleurs, je ne me souviens jamais que de #f00 et #ff0 comme couleurs de test). Si tu as Firebug (magnifique extension pour Firefox s'il en est), essaie d'ajouter "display:none" sur la colonne de gauche : elle disparaîtra sans que la colonne du milieu en soit affectée.

Toujours besoin d'aide ou c'est bon ?