Tema: Nav por encima de otra capa
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 15/07/2014, 00:36
mblascog
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Nav por encima de otra capa
Gracias. Desconocía el significado de codepen.
El código es el siguiente:
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="utf-8"/>
  5. </head>
  6. <body>
  7.     <header>
  8.         <nav>
  9.             <ul>
  10.                 <li><a href=http://localhost/francana/obra/es>OBRA</a></li>
  11.                 <li><a href=http://localhost/francana/exposiciones>EXPOSICIONES</a>
  12.                 </li><li><a href=http://localhost/francana/distinciones>DISTINCIONES</a></li>
  13.                 <li><a href=http://localhost/francana/criticas>CRITICA</a></li>
  14.                 <li><a href=http://localhost/francana/bibliografia/es>BIBLIOGRAFIA</a></li>
  15.                 <li id='opcioActiva'>CONTACTO</li>
  16.                 <li id='flag'><a href='http://localhost/francana/contacte' target='_top'><img src='http://localhost/francana/imatges/banderap_ca.png'/></a></li>    
  17.             </ul>
  18.         </nav>  
  19.     </header>
  20.     <section>
  21.         <article>
  22.             bla bla bla
  23.         </article>
  24.     </section>  
  25. </body>
  26. </html>

Código CSS: 
Ver original
  1. nav{
  2.     float:left;
  3.     width:100%;
  4. }
  5. nav ul {
  6.     list-style-type:none;
  7.     background:gray;
  8.     height:100%;
  9. }
  10. nav ul li{
  11.     background:gray;
  12.     display:inline-block;
  13.     font:bold .9em 'Helvetica';
  14.     width:15%;
  15.     text-align:center;
  16.     padding-top:1%;
  17.     padding-right:0; 
  18.     padding-left:0;
  19.     margin:0;border:0;
  20.     height:36px;
  21. }
  22. nav ul li:hover{
  23.     font-weight:bold;
  24.     background:rgba(0,0,0,.6);
  25. }
  26. nav ul li a{
  27.     color:white;
  28.     text-decoration:none;
  29. }
  30. /*nav ul li a img{display:none;}*/
  31. nav ul li#opcioActiva{
  32.     font-weight:bold;
  33.     color:#FFFFB6;
  34. }
  35. nav ul li#flag {
  36.     width:10%;
  37.     float:right;
  38. }

Y la redefinición de este nav por media query:

Código CSS: 
Ver original
  1. nav{
  2.         padding:0;
  3.         display:none;
  4.         width:80%;
  5.         position:absolute;
  6.         left:36px;
  7.         top:65px
  8.     }
  9.     nav ul li{
  10.         font-size:1.2em;
  11.         width:100%;
  12.         text-align:left;
  13.         height:40px;
  14.         border:1px solid #000;
  15.         padding-left:10px;
  16.         font-weight:bold;
  17.         vertical-align:middle;
  18.         background-image:url(../imatges/fletxa.png);
  19.         background-repeat:no-repeat;
  20.         background-position:90% 50%;
  21.     }
  22.     #opcioActiva{
  23.         font-size:1.2em;
  24.         width:100%;
  25.         text-align:left;
  26.         height:40px;
  27.         line-height:40px;
  28.         border:1px solid #000;
  29.         padding-left:10px;
  30.         font-weight:bold;
  31.         vertical-align:middle;
  32.         background-image:url(../imatges/fletxa.png);
  33.         background-repeat:no-repeat;
  34.         background-position:90% 50%;
  35.     }
  36.     nav ul li a{
  37.         line-height:40px;
  38.         vertical-align:middle;
  39.         width:100%;
  40.     }
  41.     nav ul li a img{
  42.         display:inline;
  43.         vertical-align:middle;
  44.     }

Aquí está todo el código que afecta a la pregunta.
Gracias.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no