Page redimensionnee avec browser

bender86 · 17/01/2011, 21h43

Bonjour,

J ai une petite question de debutant. J aimerai savoir comment faire pour que le contenu de ma page qui est contient des div tab et formulaires soient redimensionne en meme temps que ma fenetre.

J ai teste de mettre width et height a 100% sur le body mais rien y change. Une solution?

Merci

ornitho13 · 18/01/2011, 21h22

salut,

utilise le margin.

exemple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
...
<body>
   <div class="wrapper"></div>
</body>
...

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.wrapper{
   margin:0px 50px;
   background-color:#333;
}

bender86 · 18/01/2011, 22h49

Et il faut mettre tout le contenu de la page dans la div?

Merci

ornitho13 · 19/01/2011, 14h57

oui, mets tout le contenu dans ce div

bender86 · 19/01/2011, 19h36

J ai teste ta solution et ca ne fonctionne pas car dans ma page j ai des composants dhtmlx onglets et grid.

Est ce que je dois mettre la taille de tous mes composants en %?

Merci

ornitho13 · 19/01/2011, 19h46

aurais tu un bout de code à montrer ?

bender86 · 19/01/2011, 20h26

Merci de bien vouloir m'aider.

Je t'ai fait un exemple de ma page

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
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
 
        <link href="monCSS.css" rel="stylesheet" type="text/css"/>
        <link rel="STYLESHEET" type="text/css" href="codage/dhtmlxTabbar/codebase/dhtmlxtabbar.css"/>
        <link rel="STYLESHEET" type="text/css" href="codage/dhtmlxGrid/codebase/dhtmlxgrid.css"/>
        <link rel="STYLESHEET" type="text/css" href="codage/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_blue.css"/>
        <link rel="stylesheet" type="text/css" href="codage/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css"/>
        <link rel="STYLESHEET" type="text/css" href="codage/dhtmlxToolbar/codebase/skins/dhtmlxtoolbar_dhx_skyblue.css"/>
        <link rel="STYLESHEET" type="text/css" href="codage/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn_bricks.css"/>
 
        <script  src="codage/dhtmlxTabbar/codebase/dhtmlxcommon.js"></script>
        <script  src="codage/dhtmlxTabbar/codebase/dhtmlxtabbar.js"></script>
        <script  src="codage/dhtmlxTabbar/codebase/dhtmlxtabbar_start.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
        <script  src="codage/dhtmlxGrid/samples/common/data.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
        <script  src="codage/grid2excel/client/dhtmlxgrid_export.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/ext/dhtmlxgrid_splt.js"></script>
        <script  src="codage/dhtmlxToolbar/codebase/dhtmlxtoolbar.js"></script>
        <script  src="codage/dhtmlxConnector_php/codebase/connector.js"></script>
        <script  src="codage/dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
        <title>test</title>
 
    </head>
    <body>
<table width="70%" align="left">
<tr>
<td width="70%" align="left">
 
<table boorder="0">
    <tr>
        <td>
            <button type="button" class="bouton1" tabindex="1"  name="add" id="add" border="0"><span><em>Ajout</em></span></button>
        </td>
        <td>
            <button type="button" class="bouton1" tabindex="2"  name="modif" id="modif" border="0" disabled="true"><span><em>Modification</em></span></button>
        </td>
        <td>
            <button type="button" class="bouton1" tabindex="3" name="del" id="del" border="0" disabled="true"><span><em>Suppression</em></span></button>
        </td>
    </tr>
</table>
 
</td>
</tr>
</table>
 
<div align="left" id="tabbar1" class="dhtmlxTabBar" imgpath="codage/dhtmlxTabbar/codebase/imgs/" style="width:100%; height:80%;" tabstyle="dhx_skyblue" >
<div id="onglet2" name="onglet1" width="100px">
        <div align="center" id="gridboxTab1" style="width:100%; background-color:white;"></div>
        <div id="toolbars" align="center"><span id="pagingArea"></span>&nbsp;<span id="infoArea"></span></div>
        <script>
            mygrid = new dhtmlXGridObject('gridboxTab1');
            mygrid.setImagePath("codage/dhtmlxGrid/codebase/imgs/");
            mygrid.setHeader("lib1,lib2,Lib3");
            mygrid.setInitWidths("100,100,*");
            mygrid.setColAlign("left,left,left");
            mygrid.setColTypes("ro,ro,ro");
            mygrid.setColSorting("connector,connector,connector");
            mygrid.attachHeader("#connector_text_filter,#connector_text_filter,#connector_text_filter");
            mygrid.selMultiRows = true;
            mygrid.setSkin("dhx_skyblue");
            mygrid.enablePaging(true, 10,1, "pagingArea", false, true);
            mygrid.enableAutoHeigth(true);
            mygrid.setPagingTemplates("Pages : [prevpages:Pr&eacute;c&eacute;dente - :] [currentpages:] [nextpages: - Suivante:]","");
            mygrid.init();
        </script>
        <script type="text/javascript">
           mygrid.loadXML("test_connector.php");
        </script>
 
    </div>
 
    <!-- onglet detail-->
    <div id="detail" name="D&eacute;tail" width="100px">
        <table class="titre2" width="90%" align="center">
            <form id="form_cPaysDet" name="form_cPaysDet" method="post" >
                <tr>
                    <td valign="center">
                        <table class="cadre" width="100%" align="center">
                            <tr>
                                <td align="left">
                                    <FONT color="red"><strong>Libell&eacute;1</strong></FONT>
                                </td>
                                <td align="left">
                                    <input type="text" name="txtLib1" id="txtLib2" tabindex="8" size="20"  readOnly="true"  />
                                </td>
                                 <td>
                                     <strong>Libell&eacute;2</strong>
                                 </td>
                                 <td>
                                     <input type="text" readOnly="readOnly" name="txtLib2" tabindex="9" id="txtLib" size="10" "/>
                                 </td>
                                 <td>
                                     &nbsp;
                                 </td>
                            </tr>
                            <tr>
                                <td align="left">
                                    <strong>Libell&eacute;3</strong>
                                </td>
                                <td align="left" colspan="3">
                                    <input type="text" name="txtLib3" id="txtLib3" tabindex="10" size="90" readOnly="true"  />
                                </td>
                                <td>
                                     &nbsp;
                                 </td>
                            </tr>
                            <input name='todo' id="todo" type='hidden'/>
                            <input name='idGrid' id="idGrid" type='hidden' value=''/>
                        </table>
                    </td>
                </tr>
            </form>
        </table>
    </div>
</div>
</body>
</html>

Tant que j'y suis j'ai mis le problème que mes boutons qui sont dans une table qui elle même est contenue dans une table ne s'aligne pas à gauche et la largeur n'a aucun effet sur IE. De plus le reste se met sur la même ligne que les boutons.

En espérant que ça t'aide à m'aider

Merci

ornitho13 · 19/01/2011, 21h37

si tu pouvais ajouter le code css également, merci

17/01/2011, 21h43	#1
bender86 Membre à l'essai Inscription : mai 2008 Messages : 208 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2008 Messages : 208 Points : 24 Points : 24	Page redimensionnee avec browser Bonjour, J ai une petite question de debutant. J aimerai savoir comment faire pour que le contenu de ma page qui est contient des div tab et formulaires soient redimensionne en meme temps que ma fenetre. J ai teste de mettre width et height a 100% sur le body mais rien y change. Une solution? Merci
	00

18/01/2011, 22h49	#3
bender86 Membre à l'essai Inscription : mai 2008 Messages : 208 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2008 Messages : 208 Points : 24 Points : 24	Et il faut mettre tout le contenu de la page dans la div? Merci
	00

19/01/2011, 14h57	#4
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	oui, mets tout le contenu dans ce div
	00

19/01/2011, 19h36	#5
bender86 Membre à l'essai Inscription : mai 2008 Messages : 208 Détails du profil Informations personnelles : Localisation : Belgique Informations forums : Inscription : mai 2008 Messages : 208 Points : 24 Points : 24	J ai teste ta solution et ca ne fonctionne pas car dans ma page j ai des composants dhtmlx onglets et grid. Est ce que je dois mettre la taille de tous mes composants en %? Merci
	00

19/01/2011, 19h46	#6
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	aurais tu un bout de code à montrer ?
	00

19/01/2011, 21h37	#8
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	si tu pouvais ajouter le code css également, merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email