[C#] MasterPage: taille du ContentPlaceHolder non controlée

Version imprimable

06/02/2006, 13h46
tscoops

[C#] MasterPage: taille du ContentPlaceHolder non controlée

Bonjour,

j'essaye de faire une MasterPage.
Je souhaite découper ma page à l'aide des balises <div>.
Je place une ContentPlaceHolder entre les balises <div>.

Le problème est que mon ContentPlaceHolder prend plus de place que les dimensions que j'ai fixé pour ma balise div en question (dimension fixée à l'aide de css).

Exemple:
Admettons que je définisse ma balise div avec une largeur et une longeur de 150px. Dans Visual Studion je vois bien apparaitre ma zone.
Lorsque je déplace un ContentPlaceHolder à l'intérieur de cette zone elle s'agrandit!!!!

Auriez vous une solution pour éviter ce genre de désagrément?

Merci d'avance.
06/02/2006, 15h57
tscoops

Est ce que la version béta de VS2005 est buggée à ce sujet?
07/02/2006, 11h43
tscoops

ReBonjour,

quelqu'un utilise t il le ContentPlaceHolder?
Pourquoi prend il plus de place que prévu dans une zone div fixée?
Personne n'a jamais rencontré ce problème dans les master page?

Je suis désespéré là... :(
07/02/2006, 11h53
Koyote

Bonjour,

Si j'ai bien compris ta zone ContentPalceHolder prend plus de place sur ta page quand tu la place entre les balises DIV en mode Designer dans VS2005.

Le Designer de VS ne traduit pas correctement le design de ta page... et ca toujours été...

Maintenant si cela est en mode execution je te conseillerais d'utiliser une table plutot qu'une DIV.
07/02/2006, 12h17
tscoops

Au départ ma zone div qui fait on va dire 100*100.
Dans le designer de VS2005 la zone s'affiche correctement.
Ce que je ne comprends pas c'est lorsque je glisse un contentPlaceHolder.
La zone s'aggrandit du fait qu'il y est le ContentPlaceHolder.

Par contre ça ne le fait pas en mode exécution biensur.

Le désagrément c'est que lorsque des zones div sont proches, les contentPlaceHolder de chaque zone se superposent!!!
07/02/2006, 12h21
Koyote

Les div sont des zones HTML "Flottante" donc je pense que le designer a du mal à les interpréter...

Tu devrais essayer avec des tables juste pour voir.
07/02/2006, 13h49
tscoops

C'est pareil avec les tables. :(
07/02/2006, 14h06
Koyote

Est-ce que tu peux poster un source que j'essai?

Voici un exemple avec les tableaux:

Code:

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
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage2.master.cs" Inherits="MasterPage2" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;<table style="width: 600px">
            <tr>
                <td>
                </td>
                <td>
                    &nbsp;</td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td style="height: 60px">
                </td>
                <td style="height: 60px">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </td>
                <td style="height: 60px">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

07/02/2006, 14h54
Koyote

Je ne vois qu'un seul ContentPlacerHolder dans le source que tu propose...
07/02/2006, 15h53
tscoops

OK. j'ai trouvé. Tu m'a mis sur la piste.
En fait il suffit de mettre des "div dans des div" et dans ce cas ça se comporte comme dans un tableau.
Le ContentPlaceHolder n'empiète pas sur un autre ContentPlaceHolder.

Merci encore pour ton aide.
07/02/2006, 15h54
Koyote

c'est cool.

Et ca donne quoi le source à la fin?
07/02/2006, 20h43
tscoops

Je te mets le source demain matin.

Voici le source du MasterPage:

Code:

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
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <link href="css/style_1.css" rel="stylesheet" type="text/css" />
       <link href="/aspnet_client/System_Web/2_0_50727/CrystalReportWebFormViewer3/css/default.css" rel="stylesheet" type="text/css" />    
    <link href="calendar/winxp.css" rel="stylesheet" type="text/css" />
 
    <script type="text/javascript" src="calendar/utils.js"></script>
    <script type="text/javascript" src="calendar/calendar.js"></script>
    <script type="text/javascript" src="calendar/calendar-fr.js"></script>
    <script type="text/javascript" src="calendar/calendar-setup.js"></script>
     <script type="text/javascript" src="master/js/fct_divers.js"></script>        
</head>
<body style="background-position: 0px 0px; background-attachment: scroll; background-image: url(img/logo_bleu_opaque.gif); background-repeat: no-repeat;">
 
    <!-- Formulaire principale de la page-->
    <form id="Form1" name="form1" runat="server">
        <div id="topleft">
            <!-- *************************BDD Utilisées************************* -->
            <div id="bdd">
                <asp:ContentPlaceHolder ID="CPHBDD" runat="server">
                </asp:ContentPlaceHolder>
            </div>
 
            <!-- *************************Menu de l'application************************* -->
            <div id="menuleft">
                <asp:ContentPlaceHolder ID="CPHMenuLeft" runat="server">
                </asp:ContentPlaceHolder>
            </div>
       </div>
       <!-- *************************Titre de la page *************************-->
       <div id="main">
       <div id="titrepage">
            <asp:ContentPlaceHolder ID="CPHTitre" runat="server">
            </asp:ContentPlaceHolder>
       </div>
 
        <!-- *************************Critères de recherches************************* -->
        <div id="criteres">
            <div id="criteresfiltre" style="left: 0px; top: 0px">
            <div class="TitreCritere">
                <img src="img/tiret.gif" />&nbsp;Critères
                <asp:ContentPlaceHolder ID="CPHCriteres" runat="server">
                </asp:ContentPlaceHolder>
            </div>
            </div>
            <div id="criteresbutton">
                 <div class="TitreCritere">
                    <img src="img/tiret.gif" />&nbsp;Exécution<asp:ContentPlaceHolder ID="CPHExecution"
                        runat="server">
                    </asp:ContentPlaceHolder>
                 </div>
            </div>
        </div>
        <!-- *************************Résultat de la requête************************* -->
        <div id="resultats">
            <div class="TitreCritere">
                <img src="img/tiret.gif" />&nbsp;Résultats
            </div>
            <asp:ContentPlaceHolder ID="CPHResultat" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <!-- *************************Documentation************************* -->
        <div id="doc">
            <div class="TitreCritere">
                <img src="img/tiret.gif" />&nbsp;Documentation
            </div>
            <asp:ContentPlaceHolder ID="CPHDoc" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <!-- *************************Documentation technique************************* -->
        <div id="doctech">
            <div class="TitreCritere">
                <img src="img/tiret.gif" />&nbsp;Documentation Technique
            </div>
            <asp:ContentPlaceHolder ID="CPHDocTech" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        </div>
   </form>
</body>
</html>

Voici le CSS associé pour les DIV:

Code:

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
 
div#topleft
{
	position: absolute;
	width:130px;
	height:425px;
	left:5px;
	top: 5px;
}
div#bdd
{
	position: relative;
	width:100%;
	height:10%;
	left:0px;
	top: 0px;
}
 
div#menuleft
{
	position: relative;
	width:100%;
	height:90%;
	left:0px;
	top: 5px;
}
 
div#main
{
	position: relative;
	width:100%;
	height:100%;
	left:150px;
	top: 5px;
}
 
div#titrepage
{
	position: relative;
	width:880px;
	height:25px;
	left:0px;
	top: 0px;
	FONT-WEIGHT: normal; 
	FONT-SIZE: 16px; 
	COLOR: #009aff; 
	FONT-STYLE: normal; 
	FONT-FAMILY: Arial Black, sans-serif; 
	TEXT-DECORATION: none;
	text-align:center;
	vertical-align:middle;
}
 
div#criteres
{
	position: relative;
	width:880px;
	height:100px;
	left:0px;
	top: 0px;
}
div#criteresfiltre
{
	position:relative;
	width:70%;
	height:100%;
	left:0px;
	top: 0px;
 
}
div#criteresbutton
{
	position: absolute;
	width:30%;
	height:100%;
	left:70%;
	top: 0px;
 
}
div#resultats
{
	position: relative;
	width:880px;
	height:200px;
	left:0px;
	top: 0px;
}
div#doc
{
	position: relative;
	width:880px;
	height:100px;
	left:0px;
	top: 0px;
}
 
div#doctech
{
	position: relative;
	width:880px;
	height:100px;
	left:0px;
	top: 0px;
}