Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Elementos desplazados indeseadamante

HTML - Elementos desplazados indeseadamante

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Elementos desplazados indeseadamante
Gonzalo (19/09/2018 21:24:58)280 visitas
2 respuestas
Mensajes realizados anteriormente (No estaban la última vez que entraste)Elementos desplazados indeseadamante
xve (20/09/2018 07:34:33)
Mensajes realizados anteriormente (No estaban la última vez que entraste)Elementos desplazados indeseadamante
Gonzalo (21/09/2018 13:26:18)
sin imagen de perfil

Elementos desplazados indeseadamante

Publicado por Gonzalo (1 intervención) el 19/09/2018 21:24:58
Tengo este código que he intentado implementarle un menu desplegable.
El problema es que cuando hago click sobre el enlace de clase "open" la lista desordenada se despliega y el menu de hace mas alto y la página se me despliega quedandome el botón para cerrar el menú en otra posición alejandome el ratón de él.
He intentado con todo tipo de modificaciones y no he conseguido nada.
A continuación os dejo el codigo HTML:
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
<!DOCTYPE html>
<html>
<head>
	<title>Prueba Responsive</title>
	<meta name="viewport" content="width=device-width,maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="css/estilos.css">
	<link rel="stylesheet" type="text/css" href="css/grande.css">
	<link rel="stylesheet" type="text/css" media="(min-width:501px) and (max-width:800px" href="css/mediano.css">
	<link rel="stylesheet" type="text/css" media="(min-width:300px) and (max-width:500px" href="css/pequenyo.css">
</head>
<body>
	<header class="fondoAzul"><h1> Titulo del encabezado </h1></header>
	<div id="contenedor">
		<div id="izquierda">
			<menu id="navigation">
				<div class="control-menu">
					<a href="#navigation" class="open"><span>Abrir menú</span></a>
					<a href="#" class="close"><span>Cerrar menú</span></a>
				</div>
				<ul class="nav-items">
					<li><a href="">Elemento</a></li>
					<li><a href="">Elemento</a></li>
					<li><a href="">Elemento</a></li>
					<li><a href="">Elemento</a></li>
				</ul>
			</menu>
			<section id="ultimoMomento" class="fondoAzul">
				<h2>Ultimo momento</h2>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</section>
			<div id="principal">
				<section id="col1">
					<h2>Columna 1</h2>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
				</section>
				<section id="col2">
					<h2>Columna 2</h2>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
				</section>
				<section id="col3">
					<h2>Columna 3</h2>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
					<article>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
						tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
						quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
						consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
						proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
					</article>
				</section>
				<section id="col2">
			</div><!--principal-->
		</div><!--izquierda-->
		<div id="derecha">
			<nav><h2>Barra de navegación derecha</h2></nav>
			<section>
				<h2>Section derecha</h2>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</section>
		</div>
	</div><!--contenedor-->
	<footer class="fondoAzul">Pie de página</footer>
</body>
</html>
Y el código CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body{
	background-color: grey;
}
menu .control-menu{
	display:block;
}
ul.nav-items{
			display: none;
		}
#navigation:target .nav-items{

	display: block;
	list-style-type: none;
}
.close{
	display: none;
}
#navigation:target .open{

	display: none;
	margin-bottom: 300px;
}
#navigation:target .close{

	display: block;
}
Agradecería que sus respuestas tengan una explicación del porque me pasa y porque se puede soloucionar de la manera que propongan para poder entenderlo mejor.
Gracias por su atención y ayuda.
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
Val: 1.260
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Elementos desplazados indeseadamante

Publicado por xve (1542 intervenciones) el 20/09/2018 07:34:33
Hola Gonzalo, tu problema, es que cuando utilizas un fragmento de la URL... en tu caso #navigation, para el navegador, es un "anchor", y lo que hace, es que posiciona la web en el id que tiene el mismo valor que el anchor.
si por ejemplo, cambias tu url, y en vez de poner #navigation, pones #principal, veras que todavía se posiciona mas hacia abajo, ne la "columna 1".

Una solución, es no utilizar el fragmento en la url y utilizar javascript.
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

Elementos desplazados indeseadamante

Publicado por Gonzalo (1 intervención) el 21/09/2018 13:26:18
En primer lugar, darte las gracias por la respuesta, es cierto lo del anchor, debería de haberme dado cuenta de esa obviedad, pero al tener que utilizar código ajeno no lo hice.
Ahora ya se que esta no es la mejor manera para hacer un menú desplegable, alguna recomendación sobre como realizarlo?Preferiría evitar Javascript pero estoy dispuesto a utilizarlo.
Por otro lado, hay otra duda que tengo, porque al desplegarse la lista desordenada .nav-items el menu cambia de altura independientemente de la posición y altura que le de?
Un saludo.
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