No consigo que el menú aparezca en horizontal
Estoy aprendiendo HTML5 y CSS3 y tengo un problema con los menús. No consigo que con el navegador internet explorer el menu me aparezca en horizontal. Esto es lo que he puesto.
<nav>
<div class="menu">
<ul>
<li><a href="#">Opcion_1</a></li>
<li><a href="#">Opcion_2</a></li>
<li><a href="#">Opcion_3</a></li>
</ul>
<div>
</nav>
nav{
background-color:#b0b0b0; /*color de fondo del menú*/
}
nav .menu li{
list-style:none;
display: inline-block;
margin: 25px;
}
nav .menu a {
display: block;
color: #fff;
text-decoration:none;
}
a{
text-decoration:none;
}
1 respuesta
Benditos problemas con el Internet Explorer. En primer lugar, decirte que SI se ve bien en la versión 9 de IE. no así en las 8 y 7.
Problema: IE8 e inferiores NO reconocen la etiqueta <nav>. Si la quitas y trabajas todo a partir del div 'menu' verás como lo arreglas. Pero sólo en IE8, no en el IE7.
Otro problema: A IE7 no le gusta el display:inline-block (parece que no lo reconoce). En su lugar debes usar el float:left (y limpiar los floats después, por supuesto).
Ante todo plantéate a qué público diriges tu web y qué navegadores piensas soportar. Actualmente el IE6 ya no lo soporta casi nadie, y el IE7 está desapareciendo a marchas forzadas (al menos en España). Pero aún hay mucho IE8, que venia con los Win XP.
Resumiendo, si quieres un código compatible (cross-browser que llamamos), usa algo así:
<style type="text/css">
div.menu{
background-color:#b0b0b0; /*color de fondo del menú*/
}
div.menu li{
list-style: none;
float: left;
margin: 25px;
}
div.menu a {
display: block;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Opcion_1</a></li>
<li><a href="#">Opcion_2</a></li>
<li><a href="#">Opcion_3</a></li>
</ul>
<div style="clear:both;"></div>
</div>
</body>Espero haberte ayudado y ya sabes: ante cualquier duda, pregunta.
Por cierto: ¿Qué nivel tienes de HTML y CSS?
Miquel
No he conseguido que aparezce el menu horizontal con tus indicaciones. Con IE10 no lo puedo ver correctamente y este navegador es el que más me interesa. Tan solo quiero hacer un menu en horizontal. También eliminé la etiqueta <nav> y aun así no funcionó. Si me pudieras poner un ejemplo o una url donde se explique y funcione correctamente te estaría muy agradecido. Muchas gracias por tu ayuda y colaboración. Mi nivel pues siendo un poco vanidoso je,je,je es medio_bajillo ja,ja,ja
Vaya, no entiendo qué es lo que te causa el problema. A mí se me ve perfecto en IE y el código es muy 'standard', no debe dar ningún problema. ¿Ya has puesto bien el doctype? He hecho este ejemplo completo, que debe funcionarte sin duda. Cópialo en tu editor de código y pruébalo.
Si te parece, puedes ver una pagina que estoy acabando, y que usa menús horizontales. Esta aquí: http:www.joancalafell.com/cromo
Puedes ver el código y, si quieres, usarlo.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Probando</title> <style type="text/css"> .menu{ background-color: #b0b0b0; } .menu li{ list-style: none; display: inline-block; margin: 25px; } .menu a { color: red; text-decoration: none; } </style> </head> <body> <div class="menu"> <ul> <li><a href="#">Opcion_1</a></li> <li><a href="#">Opcion_2</a></li> <li><a href="#">Opcion_3</a></li> </ul> </div> </body> </html></> <br class="pln" />
