Hola. Te paso el código de la forma que lo haría yo, con mucho menos código, separando presentación de contenido y responsive:
HTML:
Código :
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>
Ayuda alejonetco1
</title>
</head><body>
<div class="wrapper">
<ul id="menu">
<li><a href="#">Elemento</a></li>
<li><a href="#">Elemento</a></li>
<li><a href="#">Elemento</a></li>
<li><a href="#">Elemento</a></li>
<li><a href="#">Elemento</a></li>
</ul>
<!-- .wrapper--></div>
<div id="content">
<p>Lipsum paragraph.</p>
<!-- #content --></div>
<div class="wrapper"><div id="footer">
Pie
<!-- .wrapper, #footer --></div></div>
</body></html>
CSS:
Código :
* {
margin:0;
padding:0;
}
body {
margin-top:0.5em;
}
#menu {
background:#023859;
text-align:center;
}
#menu ul {
list-style:none;
}
#menu li {
display:inline;
vertical-align:bottom;
}
#menu a {
color:#fff;
text-transform:uppercase;
display:inline-block;
padding:1em 0.5em;
}
.wrapper {
margin:0 auto;
max-width:50em;
}
#footer {
color:#fff;
background:#023859;
text-align:center;
padding:1em;
}
#content {
padding:1.5em 0;
}
