Esconder o reducir div inferior de la página
Publicado por Bernat (2 intervenciones) el 08/04/2014 18:00:30
Estoy haciendo una web en la que, al reducirla, el texto que hay en la parte inferior de la página pasa a verse por detras de los botones de la página que se encuentran en la parte superior de la misma. Se sobrepone por detrás de la misma.
Quisiera saber si podeis indicarme como hacer para que, en cuanto la página se reduzca demasiado, el texto que hay en la parte inferior de la página quede "oculto" por detrás de los botones de la parte superior de la página.
Sería como hacer un overflow pero no acabo de obtener el resultado que pretendo.
La página, el CSS
a) Tengo dos div en una misma página como la siguiente:
b) En el código CSS indico los pixels de altura de cada id:
c) el js sería:
Gracias !!
Quisiera saber si podeis indicarme como hacer para que, en cuanto la página se reduzca demasiado, el texto que hay en la parte inferior de la página quede "oculto" por detrás de los botones de la parte superior de la página.
Sería como hacer un overflow pero no acabo de obtener el resultado que pretendo.
La página, el CSS
a) Tengo dos div en una misma página como la siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div id='A' class='totsJugadors'>
<div id='Primer' class='jugador'>Primer</div>
<div id='Segon' class='jugador'>Segon</div>
<div id='Tercer' class='jugador'>Tercer</div>
<div id='Quart' class='jugador'>Quart</div>
<div id='Cinque' class='jugador'>Cinquè</div>
</div>
<div class='B'>
<p>Primer paràgraf</p>
<p>Segon paràgraf</p>
</div>
</body>
b) En el código CSS indico los pixels de altura de cada id:
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
body {margin:0}
.container {width:980px; margin:0 auto}
p, h1, h2, h3, h4 {font-weight:normal; font-family:Verdana,sans-serif}
.totsJugadors{
overflow:hidden; float:left;width:100%;
height:80%;
top: 3px; left: 3px; margin: 0px;margin-left:auto;
margin-right:auto;
font-family:Verdana,sans-serif;
clear:both;}.jugador{
background:#6495ED;
padding:15;text-align:center;
position:float;list-style-type:none;
border:2px solid #000000;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
}#Primer{
margin:5px 0px 10px 0px; height:40px;}#Segon{
background:#5E8BDF;
margin:5px 0px 8px 0px; height:25px;}#Tercer{
background:#5882D0;
margin:5px 0px 6px 0px; height:15px;}#Quart{
background:#5178C0;
margin:5px 0px 3px 0px; height:5px;}#Cinque{
background:#4A6EB1;
margin:5px 0px 2px 0px; height:3px;}.restaPagina{
float:left;width:100%;
clear:both;margin-left:auto;
margin-right:auto;
font-family:Verdana,sans-serif;
}c) el js sería:
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
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{$("#Primer").click(mouPrimer);
}function mouPrimer()
{$('#Primer').css({ 'margin': '5px 0px 8px 0px', 'height':'25px', '-webkit-transition-duration': '1s', '-webkit-transform' : 'translate(0, 84px)', 'background-color' : '#5E8BDF' });
mouSegon();
}function mouSegon()
{$('#Segon').css({ 'margin': '5px 0px 6px 0px', 'height':'15px', '-webkit-transition-duration': '0.8s', '-webkit-transform' : 'translate(0, 84px)', 'background-color' : '#5882D0' });
mouTercer();
}function mouTercer()
{$('#Tercer').css({ 'margin': '5px 0px 3px 0px', 'height':'5px', '-webkit-transition-duration': '0.6s', '-webkit-transform' : 'translate(0, 84px)', 'background-color' : '#5178C0' });
mouQuart();
}function mouQuart()
{$('#Quart').css({ 'margin': '5px 0px 2px 0px', 'height':'3px', '-webkit-transition-duration': '0.6s', '-webkit-transform' : 'translate(0, 84px)', 'background-color' : '#4A6EB1' });
mouCinque();
}function mouCinque()
{$('#Cinque').hide();
}Gracias !!
Valora esta pregunta
0
