Tema: problemas con menú fijo y contenido
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 28/05/2015, 09:22
Judy9105
 
Fecha de Ingreso: marzo-2009
Mensajes: 17
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: problemas con menú fijo y contenido
Cita:
Iniciado por fede5426 Ver Mensaje
Yo te recomendaría que nos dejes tu código en este post, usando el Highlight.. Así lo podemos revisar y ver donde esta el problema en TU código, en vez de estar adivinando o suponiendo cual es el error, va a ser más fácil ayudarte.

Saludos
cierto, estoy un poco novata en el tema de foros tabién
Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Menu dinamico</title>
  6. <link rel="stylesheet" type="text/css" href="estilos.css">
  7. <link rel="stylesheet" type="text/css" href="fonts.css">
  8.  
  9. </head>
  10.  
  11. <body>
  12.  
  13. <header>
  14.     <nav>
  15.         <ul>
  16.             <li><a href="#"><span class="home"><i class="icon icon-home2"></i></span>Home</a></li>
  17.             <li><a href="#"><span class="the proyect"><i class="icon icon-rocket"></i></span>The proyect</a></li>
  18.             <li><a href="#"><span class="the team"><i class="icon icon-person"></i></span>The team</a></li>
  19.             <li><a href="#"><span class="Contributors"><i class="icon icon-organization"></i></span>Contributors</a></li>
  20.             <li><a href="#"><span class="News"><i class="icon icon-radio-tower"></i></span>News</a></li>
  21.             <li><a href="#"><span class="Contact"><i class="icon icon-mail"></i></span>Contact</a></li>
  22.         </ul>
  23.     </nav>
  24.  </header>
  25.  
  26.  
  27.  <div id="wrapper">
  28.  <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  29. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  30. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  31. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  32. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  33. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  34. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  35. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  36. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  37. <P> contenido. INTRODUCCIÓN SOBRE V2SPACE</P>
  38.  
  39.  </div>
  40.  
  41.  
  42.  
  43. <div id="footer">
  44.   <p><strong> &copy; 2015 V2Space | &reg; All Rights Reserved.</strong> 
  45.   <br>
  46.     <span style="font-size: 12px">Privacy guidelines</br>
  47.       Terms and conditions </span></p>
  48. </div>
  49.  
  50.  
  51.  
  52.  
  53. </body>
  54. </html>

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /*para eliminar todos los márgenes que nos agrega por defecto el navegador*/
  5.  
  6. *{
  7.     margin:0;
  8.     padding:0;
  9. }
  10.  
  11. /******GENERAL******/
  12.  
  13. html,body{
  14.     height:100%;
  15. }   
  16.  
  17. /******MENU******/
  18.  
  19. header{
  20.     top:15px;
  21.     width: 100%;
  22.     overflow: hidden;
  23.     height: 150px;
  24.     position:fixed; 
  25. }
  26.  
  27. nav{
  28.     top:-20px;
  29.     position:absolute;
  30.     left:0;
  31.     right:0; /**/
  32.     margin:20px auto;
  33.     width:90%;
  34.     max-width:1200px;          /*ancho máximo del menú*/
  35.     
  36. }
  37.  
  38. nav ul{
  39.     list-style:none;         /*para eliminar los puntos del listado que crea automáticamente <ul>*/
  40. }
  41.  
  42. nav > ul{                   /* solo afecta a las primeras lineas de <ul> no a las secundarias si las hubiera*/
  43.     display:table;
  44.     width:100%;
  45.     background:#003;
  46.     position:relative;
  47. }
  48.  
  49. nav > ul li{
  50.     display:table-cell;      /*nos lo coloca en vez de en columna por celdas horizontales iguales*/
  51. }
  52.     
  53. nav > ul li a{
  54.     color:#FFF;
  55.     display:block;
  56.     line-height:20px;
  57.     padding:20px;
  58.     position:relative;
  59.     text-align:center;
  60.     text-decoration:none;
  61.     -webkit-transition: all .3s ease;
  62.     -moz-transition: all .3s ease;
  63.     -ms-transition: all .3s ease;
  64.     -o-transition: all .3s ease;
  65.     transition: all .3s ease;
  66. }
  67.  
  68. nav > ul > li > a span{
  69.     background:#174459;
  70.     display:block;
  71.     height:100%;
  72.     width:100%;
  73.     left:0;
  74.     position:absolute;
  75.     top:-55px;
  76.     -webkit-transition: all .3s ease;
  77.     -moz-transition: all .3s ease;
  78.     -ms-transition: all .3s ease;
  79.     -o-transition: all .3s ease;
  80.     transition: all .3s ease;
  81. }
  82.  
  83. nav > ul > li > a span .icon{
  84.     display:block;
  85.     line-height:60px;
  86. }
  87.  
  88. nav > ul > li > a:hover > span{
  89.     top:0;
  90. }
  91.  
  92. /*Colores del menú desplegable, por si quiero poner uno de cada*/
  93. nav ul li a .home{ }
  94. nav ul li a .the proyect{ }
  95. nav ul li a .the team{ }
  96. nav ul li a .contributors{ }
  97. nav ul li a .news{ }
  98. nav ul li a .contact{ }
  99.  
  100. /******CONTENIDO******/
  101. #wrapper{
  102.     margin: auto;
  103.     height: auto;
  104.     min-height:100%;
  105. }
  106.  
  107.  
  108. /*****PIE DE PÁGINA*****/
  109.  
  110. #footer{
  111.     text-align: center;
  112.     background-color:#003;
  113.     background-attachment: fixed;
  114.     background-repeat: no-repeat;
  115.     color: #fff;
  116.     height: 4em;
  117.     margin-bottom:0px;
  118.     width: 100%;
  119.     
  120. }




el contenido donde pone "contenido. introducción sobre V2Space" está por desarollar, y yo quiero que ese contenido empiece por debajo del menú no por detrás de él, arriba del todo. ¿Alguien sabe cómo?