CSS - Esconder o reducir div inferior de la página

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Esconder o reducir div inferior de la página

Publicado por xve (352 intervenciones) el 08/04/2014 20:26:12
Hola Bernat, he estado mirando tu código, y la verdad es que es un poco extraño...

Si modificas tu clase .totsjugador por esta:
1
2
3
4
5
6
7
8
9
10
11
12
13
.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;
}

Veras que ya no se te sube...

El problema es el height:80% que las has puesto en la capa superior.
No se si es esto exactamente lo que quieres...

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Esconder o reducir div inferior de la página

Publicado por Bernat (2 intervenciones) el 09/04/2014 11:31:38
Gracias XVE.

No acaba de funcionar.

Partiendo de tu solución, he modificado el css de modo que me ha quedado:

1
2
3
4
5
6
7
8
9
10
11
12
13
.totsJugadors{
        background:#000000; /* para comprobar que se reduce (o no) el div */
	float:left;
	width:100%;
	/* height:50%;*/
	top: 3px;
	left: 3px;
	margin: 0px;
	margin-left:auto;
	margin-right:auto;
	font-family:Verdana,sans-serif;
	clear:both;
       ...

y ahora funciona hasta que (al ejecutar la página) al pulsar e "Primer", se produce el movimiento deseado pero vuelve a suceder que el div inferior passa por debajo del div "totsJugadors".

O sea que está "mediosolucionado".

Tal vez a alguien se le ocurra otra opción. De momento, voy probando.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar