Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/02/2013, 11:51
Harira
 
Fecha de Ingreso: noviembre-2012
Mensajes: 8
Antigüedad: 12 años
Puntos: 0
Exclamación No se visualiza bien el menu si cierro la etiqueta nav

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
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>  
  4. <title>Titulo</title>
  5. <meta charset="utf-8">
  6. <link rel="STYLESHEET" type="text/css" href="estilo.css">
  7.  
  8. </head>
  9.  
  10. <nav>
  11.     <ul>
  12.         <li>Enlace 1</li>
  13.         <li>Enlace 2</li>
  14.         <li>Enlace 3</li>
  15.         <li>Enlace 4</li>
  16.     </ul>
  17.  
  18.  
  19. <div class="caja">
  20. </div>
  21. </body>
  22.  
  23. </html>

Y así se visualiza mal, solo por añadir el </nav>:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>  
  4. <title>título</title>
  5. <meta charset="utf-8">
  6. <link rel="STYLESHEET" type="text/css" href="estilo.css">
  7.  
  8. </head>
  9.  
  10. <nav>
  11.     <ul>
  12.         <li>Enlace 1</li>
  13.         <li>Enlace 2</li>
  14.         <li>Enlace 3</li>
  15.         <li>Enlace 4</li>
  16.     </ul>
  17. </nav>
  18.  
  19. <div class="caja">
  20. </div>
  21. </body>
  22.  
  23. </html>

Y este el css:

Código CSS:
Ver original
  1. html, body{
  2.     margin:0;
  3.     background-color: #f1f1f1;
  4. }
  5.  
  6. div.caja{
  7.     background-color: #ffffff;
  8.     border: 2px solid #999999;
  9.     width: 500px;
  10.     height: 500px;
  11.     margin:0 auto;
  12.     margin-top:50px;
  13.     }
  14.  
  15. nav{
  16.     width:100%;
  17.     position:fixed;
  18.     top:0;
  19.     left:0;
  20.     background-image: url(menu2.gif);
  21.     background-repeat: repeat-x;
  22.     z-index:5;}
  23.  
  24. ul{
  25.     list-style-type:none;
  26.     margin:0;
  27. }
  28.  
  29. li{
  30.     float: left;
  31.     margin-left:20px;
  32.  
  33. }

Alguien puede decirme porqué?

Gracias!