Problema con superposición de divs
Publicado por Alberto (1 intervención) el 05/07/2016 10:04:36
He desarrollado un código para generar una serie de pestañas que en realidad son divs que se ocultan o se muestran según la pestaña que se pulse, y dentro de ese div o pestaña se muestra una serie de posts de Wordpress.
El problema ha llegado cuando he descubierto que si un enlace de la primera pestaña apunta a la dirección A, pero un enlace de la tercera pestaña apunta a la dirección B, entonces el enlace de la primera pestaña "apunta" a B en vez de a A. Ésto es debido a que la estructura de ambas pestañas es idéntica, pero con diferente contenido. De igual forma, donde hay un enlace en la primera pestaña, también hay un enlace en las otras dos pestañas. De esta manera, en pantalla se ve el contenido de la primera pestaña (o de la pestaña que esté seleccionada), pero al poner el puntero sobre el enlace, la dirección que se vé es la del enlace de la tercera pestaña.
Por lo tengo, he supuesto que es un problema de superposición de capas, como si no se lograsen superponer del todo una capa sobre la otra. He probado ésto en Chrome y en Firefox y ocurre lo mismo. ¿Alguna idea de cómo solucionar este problema? Espero que se entienda mi problema.
Os adjunto copia del código de la página y de los estilos.
Archivo .php:
Archivo .css:
El problema ha llegado cuando he descubierto que si un enlace de la primera pestaña apunta a la dirección A, pero un enlace de la tercera pestaña apunta a la dirección B, entonces el enlace de la primera pestaña "apunta" a B en vez de a A. Ésto es debido a que la estructura de ambas pestañas es idéntica, pero con diferente contenido. De igual forma, donde hay un enlace en la primera pestaña, también hay un enlace en las otras dos pestañas. De esta manera, en pantalla se ve el contenido de la primera pestaña (o de la pestaña que esté seleccionada), pero al poner el puntero sobre el enlace, la dirección que se vé es la del enlace de la tercera pestaña.
Por lo tengo, he supuesto que es un problema de superposición de capas, como si no se lograsen superponer del todo una capa sobre la otra. He probado ésto en Chrome y en Firefox y ocurre lo mismo. ¿Alguna idea de cómo solucionar este problema? Espero que se entienda mi problema.
Os adjunto copia del código de la página y de los estilos.
Archivo .php:
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
<div id="container">
<!--Pestaña 1 activa por defecto--><input id="tab-1" type="radio" name="tab-group" checked="checked">
<label for="tab-1">Tokio</label>
<div class="empty"> </div>
<!--Pestaña 2 inactiva por defecto--><input id="tab-2" type="radio" name="tab-group">
<label for="tab-2">Metrópolis</label>
<div class="empty"> </div>
<!--Pestaña 3 inactiva por defecto--><input id="tab-3" type="radio" name="tab-group">
<label for="tab-3">Otros</label>
<hr class="blue_bar">
<!--Contenido a mostrar/ocultar--><div id="content">
<!--Contenido de la Pestaña 1--><div id="content-1">
Posts de Wordpress
</div>
<!--Contenido de la Pestaña 2--><div id="content-2">
Posts de Wordpress
</div>
<!--Contenido de la Pestaña 3--><div id="content-3">
Posts de Wordpress
</div>
</div>
</div>
Archivo .css:
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
148
149
150
151
152
153
154
155
156
157
#container {
margin-left: 50px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 50px;
}#container input {
height: 25px; visibility: hidden;}#container label {
background: #CCCCCC; /*Background color tabs*/
color: #FFFFFF; /*Fore color tabs*/
cursor: pointer; display: block; float: left;font-size: 14px;
height: 25px; width: 128px;vertical-align: middle;
text-align: center;
font-family: Kozuka;
}#container input:hover + label {
background: #1b3645; /*Hover color tabs*/
color: #FFFFFF;
}#container input:checked + label {
background: #1b3645; /*Active tab color*/
color: #FFFFFF;
position: relative;z-index: 6;
}#container_flows {
margin-left: 50px;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 50px;
}#container_flows input {
height: 25px; visibility: hidden;}#container_flows label {
background: #CCCCCC; /*Background color tabs*/
color: #FFFFFF; /*Fore color tabs*/
cursor: pointer; display: block; float: left;font-size: 14px;
height: 25px; width: 128px;vertical-align: middle;
text-align: center;
font-family: Kozuka;
}#container_flows input:hover + label {
background: #1b3645; /*Hover color tabs*/
color: #FFFFFF;
}#container_flows input:checked + label {
background: #1b3645; /*Active tab color*/
color: #FFFFFF;
position: relative;z-index: 6;
}#content {
background: #FFFFFF;
border-radius: .25em .25em .25em .25em;
min-height: 80%;
position: absolute; width: 880px; padding: 11px;display: inline-block;
}#content div {
opacity: 0; position: absolute; overflow: visible;}#content_flows {
background: #FFFFFF;
border-radius: .25em .25em .25em .25em;
min-height: 80%;
position: absolute; width: 880px; padding: 11px;display: inline-block;
}#content_flows div {
opacity: 0; position: absolute; overflow: visible;}#content_tab {
opacity: 1; /*Opaco*/
background: #FFFFFF;
border-radius: .25em .25em .25em .25em;
min-height: 20em;
position: relative;width: 100%;
z-index: 6;
}#container input#tab-1:checked ~ #content #content-1,
#container_flows input#tab-1-flows:checked ~ #content_flows #content-1-flows,
#container input#tab-2:checked ~ #content #content-2,
#container input#tab-3:checked ~ #content #content-3 {
opacity: 1;}#content-1 {
width: 95%;
}#content-1 div {
opacity: 1;}#content-1-flows {
width: 95%;
margin-top: 21px;
}#content-1-flows div {
opacity: 1;}#content-2 {
width: 95%;
}#content-2 div {
opacity: 1;}#content-3 {
width: 95%;
}#content-3 div {
opacity: 1;}Valora esta pregunta
0