[SOLUCIONADO] Nav por encima de otra capa

mblascog · #1 (**permalink**) 14/07/2014, 01:53

Buenas,
En la web tengo el típico menú horizontal (<ul><li>...)
Por media query transformo dicho menú horizontal en vertical al presionar un botón.
Imaginemos pues, una web con un menú e información general.
Al presional el botón menú, para visualizarlo, me gustaría que saliera encima del contenido. Ahora lo desplaza hacia abajo.
He intentado poner en la capa contenido z-index=1 y en el nav z-index = 10
Pero no funciona.
Gracias

pzin · #2 (**permalink**) 14/07/2014, 03:34

Para que no desplace nada, el submenú debería de tener una posición absoluta.

mblascog · #3 (**permalink**) 14/07/2014, 03:52

Gracias pzin,
Pero si pongo una posición absoluta, luego no lo puedo centrar según el ancho del navegador, verdad?

pzin · #4 (**permalink**) 14/07/2014, 08:45

La posición absoluta es para el submenú, no para el menú. Luego simplemente una posición relativa a elemento li que contenga al submenú para que haga de referencia.

mblascog · #5 (**permalink**) 14/07/2014, 14:48

Gracias pzin,
Pero no te sigo. Yo sólo tengo un menú, ningún submenú

Una imagen vale más que 1000 palabras

Este menú, cuando la web se visualiza desde el pc, es horizontal. Por media query lo hago vertical, y lo que quiero es centrarlo al ancho del navegador, cosa que no consigo si lo ubico a piñón fijo.

El código es este:

Código CSS:

Ver originalnav{
        padding:0;
        display:none;
        width:80%;
        position:absolute;
        left:36px;
        top:65px
    }
    nav ul li{
        font-size:1.2em;
        width:100%;
        text-align:left;
        height:40px;
        border:1px solid #000;
        padding-left:10px;
        font-weight:bold;
        vertical-align:middle;
        background-image:url(../imatges/fletxa.png);
        background-repeat:no-repeat;
        background-position:90% 50%;
    }

Gracias

Zeromm · #6 (**permalink**) 14/07/2014, 16:03

Cita:

Iniciado por mblascog

Una imagen vale más que 1000 palabras

...y un codepen no tiene precio!!

mblascog · #7 (**permalink**) 14/07/2014, 16:16

No entiendo a qué te refieres

Zeromm · #8 (**permalink**) 15/07/2014, 00:16

que uses codepen para poner un ejemplo. Metes el html que afecta a toda la navegación, lo mismo con el css y javascript (si lo llevase), lo guardas, nos pegas el código de ese ejemplo y así ayudarte "estará chupado"

pzin · #9 (**permalink**) 15/07/2014, 00:26

mblascog si sabes que va a medir 80% entonces centrarlo es bastante sencillo, simplemente lo mueves la mitad del ancho sobrante:

Código CSS:

Ver originalnav {
  position: absolute;
  left: 10%;
  width: 80%;
}

mblascog · #10 (**permalink**) 15/07/2014, 00:36

Gracias. Desconocía el significado de codepen.
El código es el siguiente:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href=http://localhost/francana/obra/es>OBRA</a></li>
                <li><a href=http://localhost/francana/exposiciones>EXPOSICIONES</a>
                </li><li><a href=http://localhost/francana/distinciones>DISTINCIONES</a></li>
                <li><a href=http://localhost/francana/criticas>CRITICA</a></li>
                <li><a href=http://localhost/francana/bibliografia/es>BIBLIOGRAFIA</a></li>
                <li id='opcioActiva'>CONTACTO</li>
                <li id='flag'><a href='http://localhost/francana/contacte' target='_top'><img src='http://localhost/francana/imatges/banderap_ca.png'/></a></li>    
            </ul>
        </nav>  
    </header>
    <section>
        <article>
            bla bla bla
        </article>
    </section>  
</body>
</html>

Código CSS:

Ver originalnav{
    float:left;
    width:100%;
}
nav ul {
    list-style-type:none;
    background:gray;
    height:100%;
}
nav ul li{
    background:gray;
    display:inline-block;
    font:bold .9em 'Helvetica';
    width:15%;
    text-align:center;
    padding-top:1%;
    padding-right:0; 
    padding-left:0;
    margin:0;border:0;
    height:36px;
}
nav ul li:hover{
    font-weight:bold;
    background:rgba(0,0,0,.6);
}
nav ul li a{
    color:white;
    text-decoration:none;
}
/*nav ul li a img{display:none;}*/
nav ul li#opcioActiva{
    font-weight:bold;
    color:#FFFFB6;
}
nav ul li#flag {
    width:10%;
    float:right;
}

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

Código CSS:

Ver originalnav{
        padding:0;
        display:none;
        width:80%;
        position:absolute;
        left:36px;
        top:65px
    }
    nav ul li{
        font-size:1.2em;
        width:100%;
        text-align:left;
        height:40px;
        border:1px solid #000;
        padding-left:10px;
        font-weight:bold;
        vertical-align:middle;
        background-image:url(../imatges/fletxa.png);
        background-repeat:no-repeat;
        background-position:90% 50%;
    }
    #opcioActiva{
        font-size:1.2em;
        width:100%;
        text-align:left;
        height:40px;
        line-height:40px;
        border:1px solid #000;
        padding-left:10px;
        font-weight:bold;
        vertical-align:middle;
        background-image:url(../imatges/fletxa.png);
        background-repeat:no-repeat;
        background-position:90% 50%;
    }
    nav ul li a{
        line-height:40px;
        vertical-align:middle;
        width:100%;
    }
    nav ul li a img{
        display:inline;
        vertical-align:middle;
    }

Aquí está todo el código que afecta a la pregunta.
Gracias.

Zeromm · #11 (**permalink**) 15/07/2014, 01:19

el resultado del codigo que has puesto no creo que sea justo lo que quieres... creo que falta algo de código xDD http://codepen.io/zeromm/pen/xIqKG (sale ya con el mediaqueri activado)

mblascog · #12 (**permalink**) 15/07/2014, 05:22

He colgado la web en ejemplo
Para ver lo que digo, debes reducir el ancho del navegador por debajo de 360píxeles
Ahora miraré esto del codepen. No sé lo que es
Muchas gracias

Zeromm · #13 (**permalink**) 15/07/2014, 05:37

yo, el menú que se despliega al pinchar en las lineas lo veo centrado y no empuja el contenido, que creo que era lo que buscabas ¿cual es el problema?

lo de codepen, el codigo que pusiste aqui lo pones allí en su correspondiente campo y ya tienes ese contenido para poder modificarlo al gusto sin tener que andar subiendo nada a ningún servidor :)

pzin · #14 (**permalink**) 15/07/2014, 05:54

mblascog ¿viste mi respuesta? No está centrado porque usas píxeles en lugar de un valor porcentual.

El código si lo pones aquí está bien, es lo imprescindible y siempre será mejor que ponerlo en algún sitio externo, incluyendo URLs o playgrounds.

mblascog · #15 (**permalink**) 15/07/2014, 05:55

Perdona pzin, no lo he había visto

Zeromm · #16 (**permalink**) 15/07/2014, 10:30

Cita:

Iniciado por pzin

mblascog
El código si lo pones aquí está bien, es lo imprescindible y siempre será mejor que ponerlo en algún sitio externo, incluyendo URLs o playgrounds.

eing!!?¿ ¿en serio?

ver el código fuente y buscar el error en ese codigo.... o ver el codigo fuente y el diseño que genera, teniendo con ello la ayuda del firebug entre otros, y buscar el error...
hombre, a lo mejor a ti te resulta mas comoda la primera opción, no te voy a decir yo que no, pero vamos... no lo es

pzin · #17 (**permalink**) 15/07/2014, 11:43

No he dicho nada de que algo sea más o menos cómodo. Pero es bastante más imprescindible tener el código aquí en el foro que en alguna URL externa, ya sea en forma de página o servicios como jsfiddle, codepen y demás. Que no quita que se ponga, vaya. Aunque realmente es raro que haga falta; en este caso por ejemplo se veía claro cómo solucionar el problema sin necesidad de ejecutarlo.

Zeromm · #18 (**permalink**) 15/07/2014, 12:53

Cita:

Iniciado por pzin

No he dicho nada de que algo sea más o menos cómodo. Pero es bastante más imprescindible tener el código aquí en el foro que en alguna URL externa, ya sea en forma de página o servicios como jsfiddle, codepen y demás. Que no quita que se ponga, vaya. Aunque realmente es raro que haga falta; en este caso por ejemplo se veía claro cómo solucionar el problema sin necesidad de ejecutarlo.

bueno... no dijiste que fuera más comodo... pero si que fuera mejor, aunque no es lo mismo, no hay una diferencia enorme. xDD

Igualmente hay que valorar siempre la posibilidad de que la gente que pregunta distintas cuestiones, a lo mejor son de un nivel muy básico de css (y no me refiero a "mblascog", que quede claro, que no se cual es su nivel), y si pueden ver un ejemplo de manera visual y no solo el código, siempre les quedará todo mucho mas claro que si solo se les escribe código.

Que igualmente tambien entiendo que pueda ser útil poner el código aqui, aunque no sea para el presente si para un futuro en el que a lo mejor los links de codepen no estén activos y que cualquier persona que entre al foro no pueda ver el problema por esa cuestión... esa parte si la entiendo :). Pero creo que siempre en el 90% de los casos debería ir acompañado de ejemplos visuales, y codepen y este tipo de webs lo ponen muy facil para ello

mblascog · #19 (**permalink**) 15/07/2014, 16:27

Muy buenos todos los comentarios. Y Zeromm tranquilo, mi nivel es muy básico, pero voy aprendiendo.