Discussion :

[guitou0]

Hello.

Petit problème avec mes CSS. J'essaie de simuler des onglets pour diviser un formulaire et éviter une page trop haute.
Voilà le code HTML, avec la fonction javascript (mais qui ne pose pas de problème) :

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
 
function HideDiv(id_div)
{
	switch (id_div)
	{
		case 'Page1':
			document.getElementById("Page1").className = 'DisplayPage';
			document.getElementById("Page2").className = 'HidePage';
			document.getElementById("Page3").className = 'HidePage';
			document.getElementById("Page4").className = 'HidePage';
			document.getElementById("Onglet1").className = 'OngletSel';
			document.getElementById("Onglet2").className = 'Onglet';
			document.getElementById("Onglet3").className = 'Onglet';
			document.getElementById("Onglet4").className = 'Onglet';
		break;
		case 'Page2':
			document.getElementById("Page1").className = 'HidePage';
			document.getElementById("Page2").className = 'DisplayPage';
			document.getElementById("Page3").className = 'HidePage';
			document.getElementById("Page4").className = 'HidePage';
			document.getElementById("Onglet1").className = 'Onglet';
			document.getElementById("Onglet2").className = 'OngletSel';
			document.getElementById("Onglet3").className = 'Onglet';
			document.getElementById("Onglet4").className = 'Onglet';
		break;
		case 'Page3':
			document.getElementById("Page1").className = 'HidePage';
			document.getElementById("Page2").className = 'HidePage';
			document.getElementById("Page3").className = 'DisplayPage';
			document.getElementById("Page4").className = 'HidePage';
			document.getElementById("Onglet1").className = 'Onglet';
			document.getElementById("Onglet2").className = 'Onglet';
			document.getElementById("Onglet3").className = 'OngletSel';
			document.getElementById("Onglet4").className = 'Onglet';
		break;
		case 'Page4':
			document.getElementById("Page1").className = 'HidePage';
			document.getElementById("Page2").className = 'HidePage';
			document.getElementById("Page3").className = 'HidePage';
			document.getElementById("Page4").className = 'DisplayPage';
			document.getElementById("Onglet1").className = 'Onglet';
			document.getElementById("Onglet2").className = 'Onglet';
			document.getElementById("Onglet3").className = 'Onglet';
			document.getElementById("Onglet4").className = 'OngletSel';
		break;
		default:
			document.getElementById("Page1").className = 'DisplayPage';
			document.getElementById("Page2").className = 'HidePage';
			document.getElementById("Page3").className = 'HidePage';
			document.getElementById("Page4").className = 'HidePage';
			document.getElementById("Onglet1").className = 'OngletSel';
			document.getElementById("Onglet2").className = 'Onglet';
			document.getElementById("Onglet3").className = 'Onglet';
			document.getElementById("Onglet4").className = 'Onglet';
		break;
	}
}
 
                <table id="Form">
                    <tr>
                        <td id="Onglet1" class="OngletSel" onclick="HideDiv('Page1')">
                            Page 1
                        </td>
                        <td id="Onglet2" class="Onglet" onclick="HideDiv('Page2')">
                            Page 2
                        </td>
                        <td id="Onglet3" class="Onglet" onclick="HideDiv('Page3')">
                            Page 3
                        </td>
                        <td id="Onglet4" class="Onglet" onclick="HideDiv('Page4')">
                            Page 4
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="Table_Form_td_border" colspan="5">
                            <div id="Page1" class="DisplayPage">
                                <asp:Label ID="LblTitle" runat="server" Text="Titre : " CssClass="LabelSheets"></asp:Label>
                                <asp:DropDownList ID="DdlTitle" runat="server" width="50px" CssClass="DropDownListSheets"></asp:DropDownList>
                                <asp:Label ID="LblName" runat="server" Text="Nom : " CssClass="LabelSheets"></asp:Label>
                                <asp:TextBox ID="TbName" runat="server" CssClass="TextBoxSheets"></asp:TextBox>
                                <asp:Label ID="LblSurname" runat="server" Text="Prénom : " CssClass="LabelSheets"></asp:Label>
                                <asp:TextBox ID="TbSurname" runat="server" CssClass="TextBoxSheets"></asp:TextBox>
                            </div>
                            <div id="Page2" class="HidePage">
                            </div>
                            <div id="Page3" class="HidePage">
                            </div>
                            <div id="Page4" class="HidePage">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="5">
                            <asp:Button ID="BtnOK" runat="server" Text="Valider" CssClass="Button" Width="100px"/><asp:Button ID="BtnCancel" runat="server" Text="Annuler" CssClass="Button" Width="100px"/>
                            <asp:Label ID="LblError" runat="server" Text="" CssClass="Text_Error"></asp:Label>
                        </td>
                    </tr>
                </table>

Et le CSS qui va avec :

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
Table#Form {
	width:100%;
}
.Table_Form_td_border {
	border:solid 1px black;
}
Td#Page1 {
	background-color:#FFFFFF;
	border:solid 1px black;
}
Td#Page2 {
	background-color:#FFFFFF;
	border:solid 1px black;
}
Td#Page3 {
	background-color:#FFFFFF;
	border:solid 1px black;
}
Td#Page4 {
	background-color:#FFFFFF;
	border:solid 1px black;
}
.Onglet {
	width:10%;
	background-color:White;
	color:Black;
	float:left;
	cursor:pointer;
	text-align:center;
	border:solid 1px black;
	margin-right:2px;
	padding:1px 1px 1px 1px;
}
.OngletSel {
	width:10%;
	background-color:#3798D6;
	color:White;
	float:left;
	cursor:pointer;
	text-align:center;
	border:solid 1px black;
	margin-right:2px;
	padding:1px 1px 1px 1px;
}
.DisplayPage {
	visibility:visible;
	height:auto;
	padding:5px 5px 5px 5px;
}
.HidePage {
	visibility:hidden;
	height:0px;
	line-height:0px;
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}

Des petits screens permettront de mieux appréhender le problème.
Au 1er affichage de ma page tout est normal :


Si je clique sur ma 2e page les textbox de ma 1ere page sont toujours affichées (mais pas sélectionnable, on ne peut rien saisir) :


Si je reviens sur la 1ere page, pas de problème, je retourne sur la page 2 même problème qu'au dessus et si je sélectionne la page3 cette fois les textbox n'apparaissent plus :


Mais en retournant sur la page 1 elles ne sont plus là :


Je n'ai plus le problème si je supprime les attributes height des classes .DisplayPage et .HidePage, mais les div sont alors affichées l'une à la suite de l'autre au lieu de l'une au dessus de l'autre (le principe des onglets).

Quelqu'un a-t-il une solution pour que les textbox n'apparaissent que dans leur div respectives et qu'elles ne disparaissent pas ?

[EDIT] Nouvelle info, j'ai installé FF 2.des_brouettes et ça marche correctement, mais les problèmes persistent sous IE7.

[guitou0]

Réponse extrêmement simple trouvée ici.
Il suffit de faire un display:none.