Bonjour

De retour pour de nouvelles aventures... et surtout de nouvelles questions

Je souhaite diviser ma page "centrale" en 3 parties :
- le haut : barre d'outils et panneau de recherche
- le milieu : tableau de données
- le bas : rien

Voici ce que j'ai fait :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dojox.layout.ContentPane");
	dojo.require("dojo.parser");  
</script>
 
<!-- Reste du code -->
 
<div dojoType="dijit.layout.BorderContainer" design="screenDesign" style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top" HEIGHT=200 style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5; height: 100px;">
Contenu haut
</div>
<div dojoType="dijit.layout.ContentPane" region="center" HEIGHT=300 style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 30px; background-color: #F0F0F5; height: 300px;">
<TABLE style="border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;">
<TR>
<TD BGCOLOR=WHITE HEIGHT=300 STYLE="border-bottom: 2px solid #CECECE; border-right: 2px solid #CECECE; padding: 10px 25px 10px 25px; ">
Contenu milieu
</TD>
</TD>
</TABLE>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom" style="border: 0px; padding: 0px; margin: 0px; padding-top: 5px; padding-left: 100px; background-color: #F0F0F5;">
Contenu bas
</div>
</div>
Seulement, j'ai deux soucis rien qu'à ce niveau :
- j'aimerais ne pas avoir de bordure "blanche"
- je voudrais que ma partie haute s'agrandisse automatiquement par rapport au contenu, que ma partie centrale ait une taille minimale et puisse s'agrandir suivant son contenu, et que la partie basse prenne le reste de la page.

Pour ce dernier point, voici le fonctionnement actuel :
- la partie haute a une taille fixe et s'il y a déplacement, la propriété CSS overlay est activée (ascenseurs)
- la partie basse prend une place infime et la partie centrale prend le reste...


La seconde partie de mon problème est que je voudrais placer une sorte d'AccordeonPane... avec un seul "panneau" qui serait automatiquement fermée. C'est là où j'ai trouvé l'ExpandoPane et surtout peu d'explications.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
	dojo.require("dojox.layout.ExpandoPane");
	dojo.require("dojo.fx.easing");
</script>
 
<!-- Reste du code -->
 
<div gutters="true" dojoType="dijit.layout.BorderContainer" autoHeight="true">
&nbsp;
 
	<div dojoType="dojox.layout.ExpandoPane" 
		splitter="false"
		duration="125" 
		region="bottom" 
		title="Recherche" 
		maxHeight="200px"
		startExpanded="false"
		autoHeight="true"
		style="height: 10px" >
 
Formulaire de recherche dynamique
	</div>
</div>
Les problèmes de cette partie sont :
- le DIV n'est pas un bloc (il peut se placer au dessus d'autres éléments comme du texte dans la même zone, voire déborder sur le bloc inférieur)
- Le titre n'apparaît pas lorsque l'ExpandoPane est fermé


Merci d'avance

PS : Je suis toujours en Dojo 1.4.1.