Barra de navegacion sobre imagen Buenas a todos.
Este es mi primer post en el foro, pero estoy segurísimo de que no será el ultimo y que pasaré tiempo por estos lares.
Antes de nada, quiero aclarar que estoy empezando en el mundo del desarrollo web, así que si alguna vez suelto alguna burrada, ruego se me disculpe pues es sin intención.
Estaba practicando un poco y me había propuesto diseñar un header como el que he visto en muchas páginas, pero no consigo hacerlo.
La idea es que la cabecera tenga una imagen de fondo, y sobre ésta imagen tenga la barra de navegación.
Desde mi ignorancia, he creado la etiqueta <header> y anidada a esta la etiqueta <nav> puesto que es una barra de navegación. La barra de navegación consta de una caja que cubre todo el ancho de la pantala con un padding de 10px. Pero a la hora de centrar la barra de navegación sobre la imagen con un margin-top a la etiqueta nav, me lo aplica tambien al header completo, por lo que la imagen también baja.
Intento añadir el codigo utilizado:
CODIGO HTML:
<body>
<header id="cabecera">
<nav id="barranavegacion">
<ul>
<li>Inicio</li>
<li>Presentacion</li>
<li>Galeria</li>
<li>Contacto</li>
</ul>
</nav>
</header>
CODIGO CSS:
header{
background-image: url(imagenes/bailando.jpg) ;
height:300px;
background-size:cover;
position:relative;
}
#barranavegacion{
padding:10px;
background-color:rgba(153,153,153,0.25);
text-align:center;
position:static;
}
nav li{
display:inline;
padding:50px;
}
¿Qué tendría que cambiar/añadir para obtener el efecto que comento?
Muchisimas gracias de antemano!
