Foros del Web - Ver Mensaje Individual - No se visualiza bien el menu si cierro la etiqueta nav

Harira · #1 (**permalink**) 13/02/2013, 11:51

Hola a todos!

Estoy haciendo un menú para la web y he creado con Gimp una imagen de un píxel de ancho para repetirla todo el ancho de la página. Y solo me sale bien si no cierro la etiqueta nav.

Así sé visualiza bien porque no he cerrado <nav>.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>  
<title>Titulo</title>
<meta charset="utf-8">
<link rel="STYLESHEET" type="text/css" href="estilo.css">
 
</head>
 
<body>
<nav>
    <ul>
        <li>Enlace 1</li>
        <li>Enlace 2</li>
        <li>Enlace 3</li>
        <li>Enlace 4</li>
    </ul>
 
 
<div class="caja">
</div>
</body>
 
</html>

Y así se visualiza mal, solo por añadir el </nav>:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>  
<title>título</title>
<meta charset="utf-8">
<link rel="STYLESHEET" type="text/css" href="estilo.css">
 
</head>
 
<body>
<nav>
    <ul>
        <li>Enlace 1</li>
        <li>Enlace 2</li>
        <li>Enlace 3</li>
        <li>Enlace 4</li>
    </ul>
</nav>
 
<div class="caja">
</div>
</body>
 
</html>

Y este el css:

Código CSS:

Ver originalhtml, body{
    margin:0;
    background-color: #f1f1f1;
}
 
div.caja{
    background-color: #ffffff;
    border: 2px solid #999999;
    width: 500px;
    height: 500px;
    margin:0 auto;
    margin-top:50px;
    }
 
nav{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    background-image: url(menu2.gif);
    background-repeat: repeat-x;
    z-index:5;}
 
ul{
    list-style-type:none;
    margin:0;
}
 
li{
    float: left;
    margin-left:20px; 
 
}

Alguien puede decirme porqué?

Gracias!