menú fijo superior

humanista · #1 (**permalink**) 06/10/2011, 12:37

Hola, encontré este ejemplo de cómo poner un menú fijo horizontal en la parte de arriba.

http://limpid.nl/lab/css/fixed/header

Quería preguntaros cómo lo véis. A mí en principio me va bien en todos los navegadores.

La única pega es que en el Internet Explorer se comporta ligeramente diferente.

En todos los navegadores la barra de la derecha del scroll vertical empieza desde arriba del todo pero en el IE no. En IE empieza justo debajo del menú horizontal. No sé si eso es un problema.

Además de esto, cómo ven el script? me puede dar algún tipo de problema?

Conocen algún otro mejor? Ahora mismo lo tengo hecho con iframes pero no me lo recomiendan ya que no indexa bien y encima tengo q hacer dos archivos por página y programar algunas cosas para que todo quede bien ajustado.

Qué opinan? graciasss

PD: se podría hacer algo para corregir ese problema con el IE?

Kudsick · #2 (**permalink**) 06/10/2011, 14:36

Hola humanista.

Cheque la pagina en firefox, en ie y si, en efecto, la barra se pone abajo del header, pero fijate que en ie si presionas f12 abres el modo documento en estandar ie7, 8 y 9 agarra sin problema, lo que puedes usar para que al cargar tu pagina se inicie con el modo documento en ie7 pon esto debajo de <head>

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

y cuando abras la pagina ya estara utilizando el estandar ie7 y se va a ver como en firefox con la barra en toda la pagina.

Espero te sirva, Saludos!

humanista · #3 (**permalink**) 06/10/2011, 15:16

pues no me va Kudsick, yo tengo IE 8 y al pulsar F12 me sale una "Herramientas de desarollo", una especie de editor.

por otro lado, poniendo la instrucción que me dices, no me funciona

Código HTML:

Ver original<!-- Limpid ? IE in quirks mode -->
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 
<title>Fixed header</title>
<link rel="stylesheet" href="menusuperior.css" type="text/css">
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
 
<div id="header">
 
 <p>Content can be placed here…
 
</div>
 
<div id="content">
 
aaaaaaaaa
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 ccccccccccccccccccccc
 <br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
bbbbbb
 
 
</div>

ArturoGallegos · #4 (**permalink**) 06/10/2011, 15:28

estas viendo ese código y no has visto el error?

jeje te lo pondré en rojo y con letras grandes para que resalte y sea mas notorio

Cita:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<title>Fixed header</title>
<link rel="stylesheet" href="menusuperior.css" type="text/css">
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

<div id="header">

es simple:

*para que IE interprete adecuadamente debes tener un Doctype valido
*para que el doctype valide debe ser lo primero que aparezca en tu código
*al aparecer un comentario antes que el doctype para IE no existe el doctype
*al no existir un doctype tu sitio trabaja en modo quirks y se comporta como se le viene en gana

Kudsick · #5 (**permalink**) 06/10/2011, 15:33

Cierto, ese cuadro de "desarrollador" te permite cambiar el modo de documento en la esquina de arriba lado derecho viene solo le das click y cambias seguro en el tuyo dice "Modo Documento: No estandar" ahi mismo le cambias y se vera bien. Pero esa es otra opcion, la que comenta ag666 puede que sea tu solucion.

humanista · #6 (**permalink**) 06/10/2011, 15:33

vale, encontré ya lo de el F12 y compruebo lo que dices y sí, si me paso al IE7 me va pero lo que no consigo es que funcione la instrucción que me mandas.

Kudsick · #7 (**permalink**) 06/10/2011, 15:35

cambia esto

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

a

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" />

y listo

humanista · #8 (**permalink**) 06/10/2011, 15:43

vale ya lo probé y nada

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 
<title>Fixed header</title>
<link rel="stylesheet" href="../compartido/menusuperior.css" type="text/css">
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
 
<div id="header">
 
 <p>Content can be placed here…
 
</div>
 
<div id="content">
 
aaaaaaaaa
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 ccccccccccccccccccccc
 <br><br><br><br><br><br><br><br><br><br>
 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
bbbbbb
 
 
</div>

humanista · #9 (**permalink**) 06/10/2011, 15:46

nos estábamos cruzando con los mensajes, jeje, ahora sí!!!

con

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" />

sí que me va!!! me imagino que no habrá problemas con compatibilidad con anteriores o posteriores IE no? ni con otros navegadores, no?

gracias

por cierto, usar los css para menús fijos... tiene algún inconveniente???

es la mejor opción?

ArturoGallegos · #10 (**permalink**) 06/10/2011, 15:50

la estructura básica de un documento html 4 (que es el caso del código que muestras)

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="es-MX">
<head>
    <title>Sin título 1</title> 
</head>
<body>
 
 
</body>
</html>

con solo verlo considero que notaras que le falta a tu código...
aunque para serte franco si estas aprendiendo te recomendaría utilices xhtml , que es mas reciente que el html 4 y te ahorraras unos cuantos dolores de cabeza

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-MX" lang="es-MX">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="" />
    <title>Sin título 1</title> 
</head>
<body>
 
 
</body>
</html>

Kudsick · #11 (**permalink**) 06/10/2011, 16:14

Si de hecho como te menciona Ag666 seria recomendable cambiar el DOCTYPE, yo por lo menos para las paginas que hago uso

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

En cuanto a un menu fijo, es realmente a tu criterio, aqui mas que nada es que veas el como lo vas a poner, si con botones, imagenes, flash, etc etc etc.

Yo en donde trabajo desarrollamos una intranet con una barra universal arriba, casi como lo que quieres hacer con el enlace que pusiste al principio, nos gusto y funcionaba de perlas, pero en este momento me encuentro desarrollando una nueva version de esta intranet y esta vez quiero usar un menu lateral hecho con css y java, ahora a lo que voy es que veas la manera mas crativa y a la vez llamativa para ti o hacia quien va dirigida la pagina que estas haciendo.

Mi recomendacion es que pruebes, experimentes y vayas mas alla de lo que convencionalmente se hace. Total si no te gusta usas otra cosa y a lo que sigue =D

Saludos!

humanista · #12 (**permalink**) 06/10/2011, 16:22

vale, de acuerdo, aunque no entiendo mucho sobre los DOCTYPE me informaré para qué sirven y el XHTML pero sobre lo de los menús fijos... qué ventajas e inconvenientes pueden tener?

es que necesito cambiar como 50 ficheros q están con iframe (y por tanto por duplicado) y me quiero asegurar, gracias

humanista · #13 (**permalink**) 06/10/2011, 16:25

vale gracias, una vez más según estaba escribiendo te me adelantaste ;)