Afficher masquer des calques+imbrications de plusieurs calques

Slt tous,
voila, j'ai créé une page avec un fond de couleur. sur lequel j'ai créer un calque <div id="page"> avec un fond blanc et une valeur non renseigner pour la hauteur.
Tout le contenu de mon site se trouvera dans ce calque (<div id="page">.

et en autre un menu.
lorsque on cliquera sur l'un des titres du menu, cela fera apparaitre un autre calque.
j'utilise donc le comportement afficher/masquer les calques.

le problème que je rencontre:
Lorsque un des calques s'affiche, si le contenu de celui ci est trop important, il vas passer par dessus mon calque "<div id="page"> et ne sera plus sur fond blanc.

existe t'il une solution pour que la hauteur du calque <div id="page"> s'adapte a la hauteur de mes autres calque ?

merci de votre aide
Modifié par Kweb (06 Jun 2007 - 16:25)

Bonjour,

Une première très bonne idée serait de ne plus parler de calques...

Une deuxième excellente idée serait de donner un lien vers une page test reproduisant ton problème...

oupsss!!!!
Bien je recommence alors...

J'ai créer une page avec un fond de couleur
j'ai créer ce css

#01{
	position:absolute;
	top: 30px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
}

dans laquelle je vais y insérer un menu qui sera situé par défaut a gauche

<div id="01">
<a href="#">menu 1</a><br />
 <a href="#">menu 2 </a>
</div>

Ce que je souhaiterais faire :
si on clique sur le "menu 1", on affiche le contenu "X" d'une longueur aléatoire
si on clique sur le "menu 2", on affiche le contenu "y" d'une longueur aléatoire et le contenu "x" disparait

Ce que j'ai realiser:

<div id="01">
<a href="#" onclick="MM_showHideLayers('test01','','show','test02','','hide')">menu 1</a><br />
<a href="#" onclick="MM_showHideLayers('test01','','hide','test02','','show')">menu 2 </a>
</div>

<div id="test01">
  <p>test 01 <br />
  gfdsgdsfgh bgsdlkjh gdskjh gds gdslkjh gdskljh gdskljh gdskjh gdskjh gdskljh gdsjh gksjdh kjh gsd </p>
</div>
<div id="test02">Test02<br />
gfsdlkjn lmkhjs dfmlk gd* gdsmljh gdsmljh gdsmlh gdsg sdfg
</div>

je voudrais que le DIV="01" s'adapte a la hauteur des DIV="test02" ou "test01" ?

Cela est il possible ? par quelle moyen.
merci
Modifié par Kweb (06 Jun 2007 - 17:00)

Bonjour,

A priori, ton bloc étant positionné en absolute, il ne pourra pas "pousser" ton bloc #page.
Je pense qu'en JS cela doit être possible ou alors en "simulant" en jouant sur les backgrounds...

Bon courage

Bonjour,

Si tu places tes deux div DANS le div 01 et non en dehors, cela doit résoudre le problème non ?
As-tu une raison spéciale d'éviter l'imbrication ?

Juste au passage: le nom d'un identifiant ne peut commencer par un chiffre...

a écrit :
Si tu places tes deux div DANS le div 01 et non en dehors, cela doit résoudre le problème non ?

J'ai essayé mais sa ne fonctionne pas.

par contre j'ai tester en mettant dans ma balises DIV"01" un div comme ceci par exemple :

#content{
	padding: 0px 10px 0px 0px;
	margin:0px 0px 0px 178px;
	border-left: 1px solid #ccd2d2;
}

et lorsque j'ecrit dedans tout fonction, la hauteur de mon DIV"01" s'adapte a mon contenu....
mais avec cette méthode, je ne peux pas faire des masquer/afficher....
a ma connaissance en tout cas.

Si quelqu'un aurais une solution ! son post sera le bien venu...
MErci