<!DOCTYPE html>
<html>
<head>
<title>
Pagina de ejemplo
</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="cabecera">
<p class="titulo" id="inicio"></p>
<p class="inicio"></p>
</div>
<div class="menu">
<ul>
<li><a href="#inicio" class="enlace">Inicio</a></li>
<li><a href="#contacto" class="enlace">Contacto</a></li>
<li><a href="#articulos" class="enlace">Articulos</a></li>
</ul>
</div>
<div class="articulos" id="articulos">
</div>
<div class="contacto" id="contacto">
<p>Contacto</p>
<form class="formulario" action="mailto:[email protected]" method="post" enctype="text/plain">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre"> <br/>
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos"> <br/>
<label for="email">email:</label>
<input type="email" name="email"> <br/>
<label for="mensaje">Mensaje:</label>
<textarea class="textarea" placeholder="Escriba su mensaje..."></textarea> </br>
<input type="submit" value="Enviar">
</form>
</div>
<div class="pie">
</div>
</body>
</html>Good, it turns out that drawing a page, I want to leave the menu above fixed, in the style sheet is a Fixed position, below I have as a description, and below some articles. I have both of them in absolute position. When you scroll down, the menu is fixed, with the description nothing happens, but when you get to the articles, it covers it. I pass the code to you:
.menu {
position:fixed;
top:0;
height:10%;
right:0;
left:0;
bottom:auto;
background-color:yellow;
visibility:visible;
}
.menu ul {
list-style: none;
height: 100%;
margin: 0;
padding: 0;
}
.menu ul li {
float:left;
width: 33%;
height: 100%;
text-align:center;
margin:20px 0px 0px 0px;
}
.cabecera {
position: absolute;
width:100%;
height:20%;
right: 0;
top:10%;
left: 0;
bottom: auto;
background-color:green;
text-align:center;
}
.articulos{
position:absolute;
width:100%;
height:80%;
right: 0;
top:30%;
left: 0;
bottom: auto;
background-color:gray;
text-align:center;
}
img {
width:400px;
height:220px;
border-radius:25px;
}
.coche1{
position:absolute;
left:10%;
}
.coche2{
position:absolute;
right:10%;
}
.coche3{
position:absolute;
left:10%;
top:300%;
}
.coche4{
position:absolute;
right:10%;
top:300%;
}
.pie {
height:700px;
bottom:0;
}