Formulaire avec 3 sections : problème avec des div

**Nicolas74** · 02/02/2010, 11h33

Bonjour,

Je veux réaliser un formulaire qui contient :
-une entête
-un menu avec une arborescence
-une zone de description sur la droite.

Ces 3 sections sont contenues dans un cadre. La taille de l'entête est fixe.
Il y a possibilité de redimensionner le menu et la description avec la souris.

Je rencontre deux difficultés qui font que :
- mon formulaire n'est pas encadré, alors qu'il devrait l'être.
- la description commence sous le menu, alors qu'elle devrait débuter à droite.

Pouvez m'indiquer ce qui ne va pas dans mon code ? car je suis perdu :S
Le voici :

La partie qui est dans les balises <style> est dans un css.

(Pour tester ce code il suffit de faire un copier-coller)

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<head>
    <!-- required for my tree -->
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/treeview/assets/skins/sam/treeview.css">
    <!-- required for resizing div -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/fonts/fonts-min.css&2.8.0r4/build/grids/grids-min.css&2.8.0r4/build/resize/assets/skins/sam/resize.css">
 
 
 
 
 
    <!-- Dependency source file -->
    <script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
    <!-- Optional dependency source file to decode contents of yuiConfig markup attribute-->
    <script src="http://yui.yahooapis.com/2.8.0r4/build/json/json-min.js" ></script>
    <!-- TreeView source file -->
    <script src="http://yui.yahooapis.com/2.8.0r4/build/treeview/treeview-min.js" ></script>
    <!-- for resizing div: -->
    <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&2.8.0r4/build/dragdrop/dragdrop-min.js&2.8.0r4/build/element/element-min.js&2.8.0r4/build/resize/resize-min.js"></script>
 
 
    <script language = "Javascript">
        // tree script
        var tree;
        function treeInit()
        {
            tree = new YAHOO.widget.TreeView("treeDiv1");
            // if required, add nodes here
                //var root = tree.getRoot();
                //var tmpNode = new YAHOO.widget.TextNode("mylabel", root, true);
            tree.render();
        }
        // resize script
        var w = 150; // it's where description starts horizontally (in px)
        var w_temp=151;
        var increase=1; // allows to know if size increases or dicreases
        (function() {
            var Dom = YAHOO.util.Dom,
                Event = YAHOO.util.Event,
                col1 = null
                col2 = null;
 
            Event.onDOMReady(function() {
                var size = parseInt(Dom.getStyle('pg', 'width'), 10);
                col1 = Dom.get('sizeIt');
                col2 = Dom.get('sizeIt2');
                var max = (size - 150);
                var resize = new YAHOO.util.Resize('sizeIt', {
                    handles: ['r'],
                    minWidth: 150,
                    maxWidth: max
                });
                resize.on('resize', function(ev) {
                    var w = ev.width;
                    Dom.setStyle(col1, 'height', '');
                    Dom.setStyle(col2, 'width', (size - w - 6) + 'px');
                });
 
                resize.resize(null, 200, 200, 0, 0, true);
            });
 
        })();
 
 
    </script>
</head>
 
<body class="yui-skin-sam" onload="treeInit()">
<style>
root {
    display: block;
}
 
#pg {
    width:1024px;
    height:500px;
	border-width:1px;
    border-color:black;
    border-style:solid;
}
 
#pg ._div
{
/*    border-width:1px;
    border-color:black;
    border-style:solid;*/
    width:1024px;
    height:500px;
    /*margin: 1em;*/
}
#pg .banner
{
	width:1024px;
	height:50px;
	background-color:white;
	border-width:1px;
    border-color:black;
    border-style:solid;
}
#pg .parent_menu_description
{
    height:450px;
    width:1024px;
    overflow: hidden;
    border-width:1px;
    border-color:black;
    border-style:solid;
}
#pg .parent_menu_description .menu
{
 
}
#pg .description
{
    height:100%;
 
}
 
.footer
{
	/*clear:both;
	width:1024px;
	height:50px;
	background-color:white;
    border-width:1px;
    border-color:black;
    border-style:solid;*/
}
 
</style>
	<div>
        <div class="_div">
            <div class="banner">
                bandeau
            </div>
            <div class="parent_menu_description" id="pg">
                <div class="parent_menu_description menu" id="sizeIt">
                    <!-- TREE with entries in the registry-->
					menu
                </div>
                <div class="description" id="sizeIt2">
                    contenuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
                </div>
            </div>
        </div>
	</div>
</body>

Nicolas

**Nicolas74** · 02/02/2010, 14h18

Problème résolu

Si d'autres seraient dans le même cas, voici la solution

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/grids/grids-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/resize/assets/skins/sam/resize.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
 
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/resize/resize-min.js"></script>
 
<script>
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event,
        col1 = null
        col2 = null;
 
    Event.onDOMReady(function() {
        var size = parseInt(Dom.getStyle('pg', 'width'), 10);
        col1 = Dom.get('sizeIt');
        col2 = Dom.get('sizeIt2');
        var max = (size - 150);
        var resize = new YAHOO.util.Resize('sizeIt', {
            handles: ['r'],
            minWidth: 150,
            maxWidth: max
        });
        resize.on('resize', function(ev) {
            var w = ev.width;
            Dom.setStyle(col1, 'height', '');
            Dom.setStyle(col2, 'width', (size - w - 6) + 'px');
        });
 
        resize.resize(null, 200, 200, 0, 0, true);
    });
 
})();
</script>
</head>
 
<body>
<style>
#pg p {
     margin: 1em;
}
#pg {
    width: 1024px;
    height: 500px;
	border-width:1px;
    border-color:black;
    border-style:solid;
}
#pg .banner
{
	height:50px;
	width:1024px;
		border-width:1px;
    border-color:black;
    border-style:solid;
}
#pg .yui-g {
    height: 450px;
    width: 1024px;
    overflow: hidden;
		border-width:1px;
    border-color:black;
    border-style:solid;
}
#pg .yui-g .first {
    background-color: yellow;
		border-width:1px;
    border-color:black;
    border-style:solid;
}
#pg .yui-u {
    height: 100%;
    background-color: orange;
    overflow: hidden;
		border-width:1px;
    border-color:black;
    border-style:solid;
}
 
</style>
 
<div id="pg">
	<div class="banner">
	bandeau
	</div>
    <div class="yui-g">
        <div class="yui-u first" id="sizeIt">
		menu
        </div>
        <div class="yui-u" id="sizeIt2">
		contenu
        </div>
    </div>
</div>

@+
Nicolas

Formulaire avec 3 sections : problème avec des div

CSS

Discussions similaires

Partager

Partager