Cómo alinear un menú horizontal en el Top de la página.

Necesito de su ayuda con esto:

Miren tengo un menú, pero cuando bajo con la barra que esta en la derecha, la barra también BAJA...

Aquí les dejo un imagen.

                       

Quisiera que solo se queda en el top de la página...

De modo que cuando yo baje con la barra esta barra se quede arriba y desaparezca cuando bajo y no me siga como en la primera imagen...

                                 

También quisiera que no se deforme el menu, y tenga unos margen ya establecidos.

Miren como se deforma... :(

  AQUI DEJO EL ESTILO CSS:

.ex1 img{
    margin: 20px;
    border: 2px solid #ACAEAD;
    -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
}
.ex1 img:hover {
   -webkit-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline
}
* {
  padding: 0;
  margin: 0;
}
p {
  margin-bottom: 20px;
}
.wrapper {
  width: 100%;
  margin: none;
  overflow:hidden;
}
header {
  background: rgba(0,0,0,0.9);
  width: 100%;
  position: fixed;
  z-index: 10;
}
nav {
  float: left; /* Desplazamos el nav hacia la izquierda */
}
nav ul {
  list-style: none;
  overflow: hidden; /* Limpiamos errores de float */
}
nav ul li {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
nav ul li a {
  Display: block; /* Convertimos los elementos a en elementos bloque para manipular el padding */
  padding: 20px;
  color: #fff;
  text-decoration: none;
}
nav ul li:hover {
  background: #3ead47;
}
.contenido {
  padding-top: 80px;
}

--------------------------------------------------------------

AQUÍ HTML

<html>
    <head>
        <title>I.E 80706</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/estilo.css">
        <header>
          <section class="wrapper">
                <nav>
                    <ul>
                        <li><a href="index.html"><b>INICIO</b></a></li>
                        <li><a href="autos.html"><b>HISTORIA</b></a></li>
                        <li><a href="ejemplo1.html"><b>PROMOCIONES</b></a></li>
                        <li><a href="ejemplo1.html"><b>PROFESORES</b></a></li>
                        <li><a href="ejemplo1.html"><b>ACTIVIDADES RECIENTES</b></a></li>
                        <li><a href="redes.html"><b>REDES SOCIALES</b></a></li>
                    </ul>
            </nav>
            </section>
        </header>
    </head>
<body>

</HTML>
                                 

1

1 Respuesta

21.050 pts. La ilusión sólo es otra forma de ver el mundo

¿Me puedes pasar el enlace de la página? Normalmente si quieres dejar una imagen en top lo haces cómo una capa aparte.

file:///E:/PAGINA%20WEB%2080706/promocion4.html 

¿Te refieres a esto? Todavía esta en proyecto amigo

Así no puedo verlo mándame la página mi correo [email protected]

Añade tu respuesta

Haz clic para o
El autor de la pregunta ya no la sigue por lo que es posible que no reciba tu respuesta.

Más respuestas relacionadas