1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Se podra correr todo un menu ?

Tema en 'HTML y CSS' comenzado por Elias404, 18 de Junio de 2017.

Tags:
  1. Elias404

    Elias404 Nuevo Miembro

    Se incorporó:
    27 de Abril de 2017
    Mensajes:
    12
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Buenas me explico , estoy haciendo 2 paginas web para mostrarlas en una feria de la especialidad de telecomunicaciones y eh empezado con otro menu pero lo mas que intento este no quiere correrse a la derecha o quedar al centro aunque busco el (left) no logro moverlo o mover los botones hacia al centro
    1231.PNG
    Codigo del menu
    Código (CSS):
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);

    *,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td {
        margin: 0;
        padding: 0;
    }

    article,aside,figure,footer,header,hgroup,nav,section {
        display: block;
    }





    nav {
        display: block;
        background: #374147;
    }

    .menu {
        display: block;
    }

    .menu li {
        display: inline-block;
        position: relative;
        z-index: 100;
    }

    .menu li:first-child {
        margin-left: 0;
    }

    .menu li a {
        font-weight: 600;
        text-decoration: none;
        padding: 20px 15px;
        display: block;
        color: #fff;
        transition: all 0.2s ease-in-out 0s;
    }

    .menu li a:hover,.menu li:hover>a {
        color: #fff;
        background: #BC1108;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        margin: 0;
        padding: 0;
        width: 170px;
        position: absolute;
        left: 0px;
        background: #fff;
        z-index: 99;
        transform: translate(0,20px);
        transition: all 0.2s ease-out;
    }

    .menu ul:after {
        bottom: 100%;
        left: 20%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #fff;
        border-width: 6px;
        margin-left: -6px;
    }

    .menu ul li {
        display: block;
        float: none;
        background: none;
        margin: 0;
        padding: 0;
    }

    .menu ul li a {
        font-size: 12px;
        font-weight: normal;
        display: block;
        color: #797979;
        background: #fff;
    }

    .menu ul li a:hover,.menu ul li:hover>a {
        background: #BC1108;
        color: #fff;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
    }

    .menu ul ul {
        left: 169px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transform: translate(20px,20px);
        transition: all 0.2s ease-out;
    }

    .menu ul ul:after {
        left: -6px;
        top: 10%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-right-color: #fff;
        border-width: 6px;
        margin-top: -6px;
    }

    .menu li>ul ul:hover {
        visibility: visible;
        opacity: 1;
        transform: translate(0,0);
    }

    .responsive-menu {
        display: none;
        width: 100%;
        padding: 20px 15px;
        background: #374147;
        color: #fff;
        text-transform: uppercase;
        font-weight: 600;
    }

    .responsive-menu:hover {
        background: #374147;
        color: #fff;
        text-decoration: none;
    }

    a.homer {
        background: #67BB48;
    }

    @media (min-width: 768px) and (max-width: 979px) {
        .mainWrap {
            width: 768px;
        }

        .menu ul {
            top: 37px;
        }

        .menu li a {
            font-size: 12px;
        }

        a.homer {
            background: #374147;
        }
    }

    @media (max-width: 767px) {
        .mainWrap {
            width: auto;
            padding: 50px 20px;
        }

        .menu {
            display: none;
        }

        .responsive-menu {
            display: block;
        }

        nav {
            margin: 0;
            background: none;
        }

        .menu li {
            display: block;
            margin: 0;
        }

        .menu li a {
            background: #fff;
            color: #797979;
        }

        .menu li a:hover,.menu li:hover>a {
            background: #BC1108;
            color: #fff;
        }

        .menu ul {
            visibility: hidden;
            opacity: 0;
            top: 0;
            left: 0;
            width: 100%;
            transform: initial;
        }

        .menu li:hover>ul {
            visibility: visible;
            opacity: 1;
            position: relative;
            transform: initial;
        }

        .menu ul ul {
            left: 0;
            transform: initial;
        }

        .menu li>ul ul:hover {
            transform: initial;
        }
    }

    @media (max-width: 480px) {
    }

    @media (max-width: 320px) {
    }
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    585
    Me gusta recibidos:
    442
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Puedes intentar poner en el elemento nav un margin: 0 auto considerando que lo tengas de esta manera

    HTML:
    <nav>
      <div class=menu>
      </div>
    </nav>
    En el cual la clase menú deberá tener dos opciones un inline-block o un tamaño de ancho tal como un 1000px, al tener una de las dos opciones el margin: 0 auto hace el centrado del menú...
    Pero si la clase menú esta en el elemento padre osea el <nav> puedes implementar las propiedades flexbox... sino conoces estas propiedades te sujieros que le des una leída, el cual es una propiedad muy buena que podrá solucionar lo que mencionas... un error común es utilizar floats... para ellos debes de ser cuidadoso, ya que usar float no te ayuda a centrar un contenido...
     
    A AngelKrak le gusta esto.

Comparte esta página