HTML - Problema con posición

 
Vista:
sin imagen de perfil

Problema con posición

Publicado por Pavel (2 intervenciones) el 29/04/2014 23:54:42
Hola a todos. Tengo una serie de problemas con una página que estoy haciendo en clase. Concretamente es la compatibilidad para Google Chrome al desplegar un menú. Os explico:

El menú está pillado de internet. Lo he estado toqueteando un poco para adaptarlo pero aun así no lo tengo todo muy visualizado (aunque no creo que el problema sea eso). Para desplegar este menú solamente se pulsa el botón de la izquierda del header y se abre. Al desplegarse, todo el contenido de la página se arrastra hacia la derecha para mostrar el menú.

El problema está en que en Chrome se desplaza toda la página menos justamente el <header>, por lo que se queda debajo del menú (no tengo ni idea de por qué, ya que en Firefox e IE sí que funciona perfectamente). Esto no sería un problema si no fuera porque justamente tapa el botón para poder cerrar el menú, así que necesito solucionarlo y no tengo ni idea de cómo hacerlo.

He estado probando a ver qué es y el problema está en la posición: el position: fixed; del <header>, ya que si le pones otro valor funciona, pero yo quiero dejarlo fijo siempre.

Espero que alguien pueda solucionar el problema y, si no es mucha molestia, alguna que otra recomendacion sobre cómo debo de estructurar algo no estaria de más ya que estoy aprendiendo.

Os dejo la página adjunta en un .zip, pero también la podéis ver en mediahost.eshost.es (la carpeta "diseno_pagina_principal_(v0.6)")
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 Jacinto

Problema con posición

Publicado por Jacinto (9 intervenciones) el 09/05/2014 11:35:44
Buenas.
Acabo de probar tu página en chrome y efectivamente la hamburguesa que es como la llaman en algunos sitios se esconde la desplegar el menu.
Creo que al final fue una chorrada lo que habia que tocar así que este es el css que debes de cambiar.
1
2
3
4
5
6
7
8
9
header {
	top: 0;
	width: 100%;
	/*height:6%;*/
	height:35px;
	/*position: fixed;*/
	float:left;
	margin: 0 auto;
}
Simplemente cambia esas dos lineas que estan en negrita (creo) y tu sufrimiento se habra acabado.
Ya me comentaras que tal.
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
sin imagen de perfil

Problema con posición

Publicado por Pavel (2 intervenciones) el 13/05/2014 21:59:37
Bueno, gracias por solucionarmelo, pero la verdad es que la página ha sufrido un tremendo cambio. Al final pillé un menú CSS de internet y lo adapté a lo que quería. Ahora lo único que de momento no funciona es que el texto de los contenedores se descoloca cuando hay demasiado texto. Espero poder solucionarlo pronto, pero si sabes cómo hacerlo no me vendría mal una ayuda. La página es www.mediahost.eshost.es, como antes.

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
Imágen de perfil de Jacinto

Problema con posición

Publicado por Jacinto (9 intervenciones) el 14/05/2014 18:35:10
Muy buenas.
La verdad que si sufrio un gran cambio, pero bueno eso nunca es malo, si no todo lo contrario.
La verdad que estuve probando con firefox y no se ve que se desorone nada. De todas formas si tienes algun problema con esto avisame.
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
Imágen de perfil de Jacinto

Problema con posición

Publicado por Jacinto (9 intervenciones) el 14/05/2014 19:18:28
comprueba este dato, que es un fallo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<title>Subir Archivo - MediaHost v1.0 PRE-BETA</title>
</head>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale = 1.0">
	<link href='pictures/favicon.png' rel='shortcut icon' type='image/png'/>
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="css/comentarios.css">
	<link rel="stylesheet" type="text/css" href="css/font/font-face.css">
	<script type="text/javascript" src="js/jquery.1.10.2.min.js"></script>
	<script type="text/javascript" src="js/gnmenu.js"></script>
</head>
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