Fallo en menu

ShuSho · #1 (**permalink**) 27/11/2012, 03:48

Buenas, alguien sabe porque al hacer la transiccion al pasar sobre cada pestaña del menu se me descoloca y baja?

Os dejos el codigo:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>
            Menu
        </title>
        <style type="text/css">
nav {
        margin-top: 50px;
        box-shadow: inset 0 5px 18px rgba(0, 0, 0, 0.6);
        float: left;
        width: 100%;
        height:200px;
        background: rgba(0, 0, 0, 0.05);
        margin: auto;
        text-align: center;
        }
 
        nav ul {
        list-style: none;
        }
 
        nav ul #menu{
        border-top: 1px solid #ff8c00;
        margin-left: 10em;
        margin-right: 10em;
        padding: 0;
        width: 700px;
        box-shadow: inset 0 10px 18px -13px #ff8c00;
        border-top-right-radius: 1px;
        border-top-left-radius: 1px;
 
        }
 
        nav ul li{
        position: relative;
        display: inline-block;
        margin: 10px;
        margin-top: 0;
        padding: 0.8em;
        width: 80px;
        height: 10px;
        background: #d5d5d5;
        font-family: 'Gorditas', cursive;
        font-weight: 300, bold; 
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        box-shadow: inset 0 10px 20px -11px #ff8c00;
        }
 
        nav ul li a{
        color: #444444;
        text-decoration: none;
        }
 
        nav ul li:hover{
        box-shadow: 0 2px 10px #ff8c00;
        background-color: #ff8c00;
        height: 40px;
        -webkit-transition-duration: 1s;
        margin-top: 0;
        }
 
 
 
        </style>
    </head>
    <body>
        <nav>
            <ul>
                <div id="menu">
                    <ul>
                        <li>
                            <a href="#">Inicio</a>
                        </li>
                        <li>
                            <a href="#">Item2</a>
                        </li>
                        <li>
                            <a href="#">Item 3</a>
                        </li>
                        <li>
                            <a href="#">Item 4</a>
                        </li>
                    </ul>
                </div>
            </ul>
        </nav>
    </body>
</html>

Aparte de esto, como vereis arriba tiene un borde con una sombra naranja, pero se me ve un poco mal, sabeis alguna formar de poner la sombra solo en el top, porque en los laterales se me ve algo

C2am · #2 (**permalink**) 27/11/2012, 08:14

Hola
Primero creo que tienes un <ul><div><ul> cuando deberías ser solo <div><ul>, y tal vez ese div no hace falta, pero no lo estudie así que dejalo así.

Segundo, me parece que el movimiento ese se debe al display:inline-block, según pude probar, con un vertical-align: top en el css del li deberías poder solucionar el inconveniente.

Saludos

PhilComfortHost · #3 (**permalink**) 27/11/2012, 11:55

"...alguien sabe porque al hacer la transiccion al pasar sobre cada pestaña del menu se me descoloca y baja?"

- sí, quita 'height: 40px;' desde nav ul li:hover

"...sabeis alguna formar de poner la sombra solo en el top..?"

- hmmm, puede quitar la sombra entera y añadir una imagen a 'background' como "background: #color url('sombra.png') top repeat-x;"

pzin · #4 (**permalink**) 27/11/2012, 12:52

Cita:

Iniciado por PhilComfortHost

- sí, quita 'height: 40px;' desde nav ul li:hover

Yo creo que esa no es una solución, si no más bien evitar que haga lo que quiere hacer.

Cita:

Iniciado por PhilComfortHost

- hmmm, puede quitar la sombra entera y añadir una imagen a 'background' como "background: #color url('sombra.png') top repeat-x;"

No sé si te has dado cuenta, pero el foro es específico de CSS. Y gracias a Dios o al W3C —esto ya depende de cada cual— no hacen falta imágenes para hacer sombra alguna. A menos que añores aquellos años de GIFs animados, java-applets y Altavista.

Respecto a la pregunta, que ya te dijo C2am cómo arreglarlo, la de la sombra realmente sólo te hace falta jugar con el cuarto valor —que en el :hover no lo has puesto— que es la propagación de la sombra. Algo así debería de servirte:

Código CSS:

Ver originalbox-shadow:0 17px 10px -15px #ff8c00;

Un artículo sobre sombras: http://www.css3.info/preview/box-shadow —inglés.

PhilComfortHost · #5 (**permalink**) 29/11/2012, 12:36

Cita:

Iniciado por Bonez

No sé si te has dado cuenta, pero el foro es específico de CSS.

Esto "background: #color url('sombra.png') top repeat-x;" es específicamente CSS.

Y, en respecto, no creo que has dado una solución?

pzin · #6 (**permalink**) 29/11/2012, 12:48

Cita:

Iniciado por PhilComfortHost

Esto "background: #color url('sombra.png') top repeat-x;" es específicamente CSS.

No lo es. No si el contenido de sombra.png es una sombra, cosa que se deduce fácilmente. Es como si en vez de usar @font-face recomiendas a alguien poner una imagen con el texto y la fuente que quiera.

La solución a las preguntas está en #2 y #4.

PhilComfortHost · #7 (**permalink**) 29/11/2012, 13:04

Cita:

Iniciado por Bonez

La solución a las preguntas está en #2 y #4.

Interesante, por que la pregunta es "...sabeis alguna formar de poner la sombra solo en el top..?"

Así, ¿puede usted explicar su solución así podemos entender mejor?

pzin · #8 (**permalink**) 29/11/2012, 14:11

Cita:

Iniciado por PhilComfortHost

¿puede usted explicar su solución así podemos entender mejor?

¿Quién es podemos?

Lo expliqué más arriba, de hecho hasta puse algo de código; sólo hay que jugar con la propagación de la sombra, luego aplicarle algún valor negativo en el desplazamiento vertical. Con lo primero se consigue que se contraiga la sombra y con lo segundo que suba hacia arriba, por lo que no se mostrará en la parte de abajo, y como está contraída, tampoco se mostrará en los laterales. Y lo mismo se puede hacer para cualquier lado.

De hecho se puede hacer muchas cosas con box-shadow, hasta sombras múltiples:

Código CSS:

Ver originalalgo {
  box-shadow:   0     0   20px rgb(0,0,0),
               40px  25px 50px rgb(150,0,210),
              -40px  25px 50px rgb(0,200,255),
              -40px -25px 50px rgb(0,250,150),
               40px -25px 50px rgb(200,0,0);
}