2

He presentado un problema al tratar de hacer responsive mi menu de navegación html-CSS. Al principio mi menu se veía por debajo del header, así que decidí solucionar este problema con un margin-top auto; y se volvió a ubicar correctamente mi menu. Pero a medida que iba reduciendo la ventana del navegador, mi menu se va ocultando por debajo del header-Fixed. Quisiera saber de que forma podria solucionar este error utilizando html-css, ningun otro lenguaje. Gracias.

CODIGO HTML:

<!DOCTYPE html>  
<html>  
    <head>  
        <title>SOFTWARE FREATICO</title>  
        <link rel="stylesheet" type="text/css" href="style.css">  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <header>  
            <h1><i>Phreatic Software</i></h1>  
        </header>  
        <div class="contenedor">  
            <nav class="menu">  
                <ul class="nav">  
                    <li><a href="#">NOSOTROS</a>  
                    </li>  
                    <li><a href="#">HOME</a>  
                    </li>  
                </ul>  
            </nav>   
        </div>  
    </body>  
</html>   

CODIGO CSS:   

*{  
    margin:0px;  
    padding:0px;  
}  
header {  
    position:fixed;  
    z-index:9999;  
    top:0%;  
    left:0%;  
    width:100%;  
    background-image:url(material/1.jpeg);  
    color:#fff;  
    text-align:center;  
    box-shadow:0px 0px 30px 0px black;  
}  
body {  
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+65,29b8e5+73 */
    background: rgb(179,220,237); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 65%, rgba(41,184,229,1) 73%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 65%,rgba(41,184,229,1) 73%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 65%,rgba(41,184,229,1) 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#29b8e5',GradientType=0 ); /* IE6-9 */  
}  
.contenedor {  
    position:relative;  
    width:80%;   
    margin:auto;  
}  

.menu {  
    position:relative;  
    width:50%;  
    margin:auto;  
    margin-top:3.7%;  
}  
ul,ol {  
    list-style:none;  
}   

.nav>li {  
    width:50%;  
    float:left;  
    background:yellow;  
}  
.nav li a {  
    text-align:center;  
    background-color:#000;  
    color:#fff;  
    text-decoration:none;  
    padding:10px 12px;  
    display:block;  
}  
.nav li a:hover {  
    background-color:#434343;  
}  
.nav li ul {  
    display:none;  
    position:absolute;  
    min-width:140px;  
}         
.nav li:hover > ul {  
    display:block;  
}  
.nav li ul li {  
    position:relative;  
}  
.nav li ul li ul {  
    right:-140px;  
    top:0px;  
}  

2 respuestas 2

2

Lo que debes hacer

Se recomienda realizar la siguiente acción:

  • Eliminar la propiedad margin-top: 3.7% de la clase .menu.
  • Agregar la propiedad margin-top: 40px a la clase .contenedor.

Esta es la explicación

La razón por la que ocurre lo que mencionas obedece a que margen superior margin-top se establece en porcentaje % y esto se calcula en relación al ancho del elemento. Entonces, en la medida en la que su anchura se va reduciendo su margen superior se reduce como resultado.

Dado que las etiquetas <header></header> y <div class="contenedor"></div> forman los elementos principales del cuerpo (body) del documento y la primera, que es la cabecera, tiene su posición fija (position: fixed); la segunda debería tener un margen superior (margin-top) o la propiedad top igual a la altura de la cabecera.

Así queda si se aplican las recomendaciones sugeridas en esta respuesta:

*{  
        margin:0px;  
        padding:0px;  
    }  
    header {  
        position:fixed;  
        z-index:9999;  
        top:0%;  
        left:0%;  
        width:100%;  
        background-image:url(material/1.jpeg);  
        color:#fff;  
        text-align:center;  
        box-shadow:0px 0px 30px 0px black;  
    }  
    body {  
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+65,29b8e5+73 */
        background: rgb(179,220,237); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 65%, rgba(41,184,229,1) 73%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 65%,rgba(41,184,229,1) 73%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(179,220,237,1) 0%,rgba(41,184,229,1) 65%,rgba(41,184,229,1) 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#29b8e5',GradientType=0 ); /* IE6-9 */  
    }  
    .contenedor {  
        position:relative;  
        width:80%;   
        margin:auto;
        
        /* Propiedad que ha sido agreda*/
        margin-top: 40px;
    }  

    .menu {  
        position:relative;  
        width:50%;  
        margin:auto;
        
        /* 
        Propiedad eliminada:
        margin-top: 3.7%
        */
    }  
    ul,ol {  
        list-style:none;  
    }   

    .nav>li {  
        width:50%;  
        float:left;  
        background:yellow;  
    }  
    .nav li a {  
        text-align:center;  
        background-color:#000;  
        color:#fff;  
        text-decoration:none;  
        padding:10px 12px;  
        display:block;  
    }  
    .nav li a:hover {  
        background-color:#434343;  
    }  
    .nav li ul {  
        display:none;  
        position:absolute;  
        min-width:140px;  
    }         
    .nav li:hover > ul {  
        display:block;  
    }  
    .nav li ul li {  
        position:relative;  
    }  
    .nav li ul li ul {  
        right:-140px;  
        top:0px;  
    }
<!DOCTYPE html>  
<html lang="es-VE">  
<head>  
    <title>SOFTWARE FREATICO</title>  
    <link rel="stylesheet" type="text/css" href="style.css">  
    <meta charset="utf-8">
    
</head>

<body>  
    <header>  
        <h1><i>Phreatic Software</i></h1>  
    </header>  
    <div class="contenedor">  
      <nav class="menu">  
        <ul class="nav">  
          <li><a href="#">NOSOTROS</a>  
          </li>  
          <li><a href="#">HOME</a>  
          </li>  
        </ul>  
      </nav>   
    </div>  
</body>  
</html>

1

Si no he entendido mal tu pregunta, tu problema lo tienes en .menu{ margin-top:3.7%;} Ponle un margin-top en pixels, y dale la misma altura a header, por ejemplo 40px; para conservar mas o menos el diseño que tienes. Cuando posicionas de forma absoluta (por ejemplo con position:fixed) los elementos no se ajustan unos a otros, ni se respetan sus respectivas alturas, anchos, etc.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.