Foros del Web » Creando para Internet » CSS »

problemas con menú fijo y contenido

 Estas en el tema de problemas con menú fijo y contenido en el foro de CSS en Foros del Web. Hola a todos, estoy haciendo una web donde el menú está fijo en la parte superior con una separación de 3em con respecto al inicio ...
  #1 (permalink)  
Antiguo 28/05/2015, 03:45
 
Fecha de Ingreso: marzo-2009
Mensajes: 17
Antigüedad: 15 años, 1 mes
Puntos: 0
problemas con menú fijo y contenido
Hola a todos,
estoy haciendo una web donde el menú está fijo en la parte superior con una separación de 3em con respecto al inicio de la página (margin-top:3em;) el problema es que luego tengo otro div con el contenido y cuando lo visualizo el contenido empieza desde margin-top:0em, por así decirlo, empieza desde el principio de la página por lo que queda detrás del menú y yo quiero que empiece por debajo de dicho menú.
He probado a usar el código "margin-top:15em;" en el div de contenido pero no funciona, sigue en el mismo sitio.
¿alguien me puede ayudar por favor?
  #2 (permalink)  
Antiguo 28/05/2015, 07:19
 
Fecha de Ingreso: abril-2015
Mensajes: 11
Antigüedad: 9 años
Puntos: 0
Respuesta: problemas con menú fijo y contenido
Hola, he estado probando un poco y no me ha dado problemas, lo único es, como la positon de la barra es fixed en vez de separarla con margin-top lo he hecho con top. El contenedor principal tendría un margin-top de (3em + height de la barra), ej: 5em si la barra fuese de 2em, el problema es que si la altura de la barra la tienes en px no puedes calcularlo correctamente.

Este es el código que he probado. Para probarlo he usado la web de codepen por ello no tiene ni el Doctype ni el link al css.

El HTML:

Código HTML: 
Ver original
  1. <head>
  2.   <meta charset="UTF-8" />
  3.   <title>Document</title>
  4. </head>
  5. <body>
  6.   <div class="menu">Menu</div>
  7.   
  8.   <div class="cuerpo">
  9.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum vel, excepturi animi corporis aut repellendus expedita, ex hic praesentium illum at, nihil sed adipisci nobis in placeat voluptatibus odio!</p>
  10.     <p>Unde nemo, reprehenderit ullam similique facilis dicta fugiat non consectetur saepe, quia aut labore! Tempore, libero, quaerat! Aperiam eligendi ullam nobis, sapiente laborum, aspernatur recusandae aliquid sint laudantium, praesentium autem?</p>
  11.     <p>Repellat animi a expedita, consequatur aliquam molestias fugit suscipit laborum sint numquam maiores molestiae in dolor officiis. Quasi consectetur minus rem odio illum sed libero velit modi odit quae! In.</p>
  12.     <p>Sunt adipisci exercitationem aperiam eveniet, hic culpa et est molestiae itaque eos corrupti voluptas eaque facere animi harum vitae perferendis quam, dolorem nihil pariatur repellendus sapiente optio, accusamus quod? Ipsum!</p>
  13.     <p>Quos distinctio dolorem quaerat, aut. Numquam fugiat itaque consequatur, labore quae eum doloribus magni facilis nobis repudiandae vero ratione ut reprehenderit minus nostrum, earum soluta dicta. Quasi repellendus delectus, molestiae.</p>
  14.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ipsum quisquam optio ab non corporis nemo perferendis dolor, tempora consequatur rem temporibus doloremque laborum dolorum vel distinctio nostrum perspiciatis alias.</p>
  15.   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minus corporis aperiam velit sed et magnam eos hic esse voluptatem optio molestias, quas doloribus labore fugit quo odio reprehenderit explicabo.</p>
  16. </div>
  17. </body>
  18. </html>

El CSS:


Código CSS: 
Ver original
  1. body{
  2.   padding: 0;
  3.   margin: 0;
  4. }
  5.  
  6. .menu{
  7.   
  8.   width: 100%;
  9.   position: fixed;
  10.   top: 3em;
  11.   height: 2em;
  12.   background-color: #ddd;
  13.   z-index: 1000;
  14.   
  15. }
  16.  
  17. .cuerpo{
  18.   
  19.   width: 100%;
  20.   margin-top: 5em;
  21.   height: 3000px;
  22.   background-color: #256;
  23.   
  24. }

Espero que sea esto a lo que referías.
Última edición por Numon; 28/05/2015 a las 07:36
  #3 (permalink)  
Antiguo 28/05/2015, 08:42
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 4 meses
Puntos: 208
Respuesta: problemas con menú fijo y contenido
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
  #4 (permalink)  
Antiguo 28/05/2015, 09:22
 
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?
  #5 (permalink)  
Antiguo 28/05/2015, 11:00
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 4 meses
Puntos: 208
Respuesta: problemas con menú fijo y contenido
Precisamente agregando un margin-top de 6em al "wrapper" queda justo por debajo del nav..

http://codepen.io/anon/pen/bdgdzb
  #6 (permalink)  
Antiguo 28/05/2015, 11:44
 
Fecha de Ingreso: marzo-2009
Mensajes: 17
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: problemas con menú fijo y contenido
Hice eso muchas gracias :) estaba encabezonada, puse margin-top:6em; y borré el margin:auto; y genial. Mil gracias

Etiquetas: contenido, fijo, página, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 02:46.