Discussion :

[andyajram]

Bonjour j'ai un tableau a Onglet qui marche bien sur quelque page dont j'ai besoin que de quelque onglet qui ne dépasse pas 5 onglet mais sur une page j'ai besoin d'un tableau a 11 onglets et là c'est la galère car tous les onglets deviennent on désordre et j'ai essayer toute sorte de dimensionnement mais j'arrive pas a le faire s'il vous plait quelqu'un pourrait m'aider ? voici mon code HTML et CSS :

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
<div id="menu-tab" style="margin-top: 150px;"><!----------------tableau-01---------------------------------->
<div id="page-wrap">
<div class="tabs" style="left:-100px"><!----------------onglet-01-------------------------->
<div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">Portefeuille</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-02-------------------------->
<div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">Délégation</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-03-------------------------->
<div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Produit</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-04-------------------------->
<div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Encaissement</label>
<div class="content">
</div>
</div>
<!----------------onglet-05-------------------------->
<div class="tab"><input id="tab-5"  name="tab-group-1" type="radio" /> <label for="tab-5">Secteur</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-06-------------------------->
<div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Type Transaction</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-07-------------------------->
<div class="tab"><input id="tab-7" name="tab-group-1" type="radio" /> <label for="tab-7">Année/Mois Réglement</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-08-------------------------->
<div class="tab"><input id="tab-8" name="tab-group-1" type="radio" /> <label for="tab-8">Agence</label>
<div class="content">
</div>
</div>
<!----------------onglet-09-------------------------->
<div class="tab"><input id="tab-9" name="tab-group-1" type="radio" /> <label for="tab-9">Délai</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-10-------------------------->
<div class="tab"><input id="tab-10" name="tab-group-1" type="radio" /> <label for="tab-10">Montant</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-11-------------------------->
<div class="tab"><input id="tab-11" name="tab-group-1" type="radio" /> <label for="tab-11">Total</label>
<div class="content">
</div>
</div>
<!-- -------------Fin Onglet -->
</div>
</div>
</div>

**************************** CSS*******************

Code css :

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
* {
    margin: 0;
    padding: 0;
 
    }
#menu-tab {
    /*background: white;*/
    font-family: 'trebuchet ms', geneva; 
    font-size: 11pt;
    color:black;
    }
 
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;
 
}
 
/*--------------Dimensions tableau--------------*/
 
#page-wrap {
      width: 70%; 
      margin: 10px auto;
 
    }
 
/*--------------Onglets--------------*/
 
.tabs {
      position: relative;   
      min-height: 480px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(170, 185, 185, 0.97);
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;   
    }
 
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
      overflow-y: auto;
      margin-bottom: -20px;
    }
    .content > * {
      opacity: 0;
 
      -webkit-transform: translate3d(0, 0, 0);
 
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
 
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
 
/*-------------Onglets actifs--------------*/
 
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
 
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*--------------Images--------------*/
 
    .content img {
    border:4px solid white;
    box-shadow:6px 6px 10px grey;
    -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
 
    .content img:hover {
    opacity: 0.8;
    -webkit-transform: rotate(7deg);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
 
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
      }

MErci d'avance

[Shuuichi]

Bonsoir andyajram. voici un essai de solution à ton problème.

Code Html modifié:

Code html :

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
<div id="menu-tab" style="margin-top: 150px;"><!----------------tableau-01---------------------------------->
<div id="page-wrap">
<div class="tabs" style="left:100px">
<!----------------onglet-01-------------------------->
<div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> 
<label for="tab-1">Portefeuille</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-02-------------------------->
<div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> 
<label for="tab-2">Délégation</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-03-------------------------->
<div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> 
<label for="tab-3">Produit</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-04-------------------------->
<div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> 
<label for="tab-4">Encaissement</label>
<div class="content">
</div>
</div>
<!----------------onglet-05-------------------------->
<div class="tab"><input id="tab-5"  name="tab-group-1" type="radio" /> 
<label for="tab-5">Secteur</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-06-------------------------->
<div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> 
<label for="tab-6">Type Transaction</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-07-------------------------->
<div class="tab"><input id="tab-7" name="tab-group-1" type="radio" /> 
<label for="tab-7">Année/Mois Réglement</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-08-------------------------->
<div class="tab"><input id="tab-8" name="tab-group-1" type="radio" /> 
<label for="tab-8">Agence</label>
<div class="content">
</div>
</div>
<!----------------onglet-09-------------------------->
<div class="tab"><input id="tab-9" name="tab-group-1" type="radio" /> 
<label for="tab-9">Délai</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-10-------------------------->
<div class="tab"><input id="tab-10" name="tab-group-1" type="radio" /> 
<label for="tab-10">Montant</label>
<div class="content">
 
</div>
</div>
<!----------------onglet-11-------------------------->
<div class="tab"><input id="tab-11" name="tab-group-1" type="radio" /> 
<label for="tab-11">Total</label>
<div class="content">
</div>
</div>
<!-- -------------Fin Onglet -->
</div>
</div>
</div>

Et voici ci-dessous le code css modifié:

Code css :

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
* {
    margin: 0;
    padding: 0;
 
    } 
#menu-tab {
    /*background: white;*/
    font-family: 'trebuchet ms', geneva; 
    font-size: 100%;
    color:black;
    }
 
#menu-tab a {
color: grey;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
#menu-tab a:hover{
color: green;
 
}
 
/*--------------Dimensions tableau--------------*/
 
#page-wrap {
      width: 40%; 
      margin: 10px auto;
 
    }
 
/*--------------Onglets--------------*/
 
.tabs {
      position: absolute;   
      min-height: 480px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgba(170, 185, 185, 0.97);
      padding: 10px; 
      border: 1px solid #ccc; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      border-radius: 10px 10px 0px 0px;
      box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);
    }
    .tab [type=radio] {
      display: none;   
    }
 
/*--------------Contenu article onglet--------------*/
    .content {
      position: absolute;
      top: 28px;
      left: 0;
      background: white;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 1px solid #ccc; 
      border-radius: 0px 10px 10px 10px;
      box-shadow:6px 6px 10px rgba(0, 0, 0, 0.41);
      overflow: hidden;
      overflow-y: auto;
      margin-bottom: -20px;
    }
    .content > * {
      opacity: 0;
 
      -webkit-transform: translate3d(0, 0, 0);
 
      -webkit-transform: translateX(-100%);
      -moz-transform:    translateX(-100%);
      -ms-transform:     translateX(-100%);
      -o-transform:      translateX(-100%);
 
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
 
/*-------------Onglets actifs--------------*/
 
    [type=radio]:checked ~ label {
      background: white;
      border-bottom: 1px solid white;
      z-index: 2;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    [type=radio]:checked ~ label ~ .content > * {
      opacity: 1;
 
      -webkit-transform: translateX(0);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
    }
/*--------------Images--------------*/
 
    .content img {
    border:4px solid white;
    box-shadow:6px 6px 10px grey;
    -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
    }
 
    .content img:hover {
    opacity: 0.8;
    -webkit-transform: rotate(7deg);
      -moz-transform:    translateX(0);
      -ms-transform:     translateX(0);
      -o-transform:      translateX(0);
 
      -webkit-transition: all 0.6s ease;
      -moz-transition:    all 0.6s ease;
      -ms-transition:     all 0.6s ease;
      -o-transition:      all 0.6s ease;
      }