Superposition de calques ( div )

[Oncle Tom]

Bonjour,

j'ai un p'tit soucis avec une arborescence déroulante créée en combinant DIV et CSS.
C'est sous la forme
* titre 1
** titre 1.1
*** titre 1.1.1
*** titre 1.1.2
** titre 1.2
...
..
.

Et ainsi de suite (sachant que j'ai décrit qu'au minimum).
Le prob est que la réaction de Mozilla est aléatoire sur ces div. Quand je clic sur "titre 1.1" ça va me décaler le reste vers le bas mais certains coups, si je clic sur "titre 1", tout ce qui est en dessous va se superposer sur "titre 2".

:/ c'est assez bizarre et j'arrive pas à trouver la parade.
je pense que c'est pas forcément clair et qu'il faudra un exemple en image ou bien avec la page en question ^^

 

[George Abitbol]

je pense que c'est pas forcément clair et qu'il faudra un exemple en image ou bien avec la page en question ^^

Mais tu préfères attendre qu'on te le confirme, c'est ça ?

Fred

 

[Oncle Tom]

lol ouais bon ok j'ai compris ^^ par contre je le ferai demain pque c'est pour le boulot ... d'ailleurs ça fait 4 minutes que je devrais être dehors

 

[Oncle Tom]

Bon alors, voilà nos p'tits moutons.

Ca, c'est mon arborescence compactée, y'a que les "titre 1" qui apparaissent.

Quand je clic sur le "titre 1" intitulé "Gaz", voilà ce que j'obtiens :

Mes calques se chevauchent et ... ben il ne faut pas.
Chaque niveau est composé de 2 colonnes (on n'en voit qu'une là) et de plusieurs lignes. C'est pas un tableau mais des DIV dit au passage. Quand je fonctionnais avec des tableaux j'y arrivais mais c'est IE qui comprenait rien. Donc là j'utilise les DIV, ça fonctionne à part cette superposition.

Big up à celui ou celle qui a une idée ^^


PS : en bonus, un bout de la feuille de style :

/*/
	Tableaux de l'arborescence
/*/
.aG{
	width: 69.6%;
	height: 15px;
	float: left;
	margin: 0px;
	display: inherit;
	clear: inherit;
}
.aD{
	width: 29.6%;
	height: 15px;
	float: right;
	margin: 0px;
	display: inherit;
	clear: inherit;
}
.cps{
	display: inherit;
}

 

[François]

Salut,

Moi j'aurais mis : display: bloc ou inline, mais je ne suis pas spécialiste CSS, je commence.
En tous cas chez moi ca marche avec ca.

Quelques explications ici : http://www.yoyodesign.org/doc/w3c/css2/ ... splay-prop
et là
http://openweb.eu.org

A+

 

[Oncle Tom]

C'est bien le problème : l'héritage est "block" ^^
Je l'ai mis dans la feuille de style, j'ai essayé avec inline ... même topo :/ (je m'aide aussi de la doc CSS mais pas moyen :'( )

 

[François]

je serais toi, j'essaierai dans une page très simple, avec le moins de propriétés possible, donc avec le moins d'imbrication de DIV, pour tester...

Essaie également de te procurer la feuille de style par défaut des principaux navigateurs

Mon exemple :

.divderoulant {margin-left: 6px; display: none}

plus un JS qui passe display à block ou l'inverse sur un click du titre.

Je t'ai extrait un bout de code :
-http://www.argus-pieces-auto.com/jedi.html

A+

 

[Oncle Tom]

J'utilise un JS.
En fait avant je le faisais sous forme de liste à puce et ça marchait très bien.
Seulement j'ai eu besoin d'intégrer une deuxième colonne avec des options pour modifier les différentes infos relatives aux titres et c'est là que ça bloque.

Ce qui est "marrant", c'est que si le menu n'est pas déplié au départ, quand je clic dessus pour le cacher et que je le redéplie, ben ça passe bien ... à mon avis le problème vient d'ailleurs.

 

[Final Séraphin]

Moi j'aurais mis :

"clear : both"

pour tous tes CSS

 

[Oncle Tom]

J'ai essayé ton astuce Séraphin mais aucun changement.
Assez bizarrement, j'ai essayé la propriété "inline" et ça marche maintenant ... faut juste que j'effectue un décalage de marge pour mieux présenter le tout mais ça décale tous les calques au lieu de les chevaucher.

Allez donc savoir...