Hola,
Estoy diseñando una página web basada en HTML5 con CSS2 y CSS3.
Hasta ahora el diseño está quedando tal y como yo deseo, sin embargo, no logro conseguir que el footer quede como yo quiero.
A continuación les dejo una imagen en donde se muestra cómo es mi footer y como deseo que quede:
También les dejo los códigos del HTML (index.html) y el CSS (Hoja de reset y de estilo):
index.html
Código:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="resetear.css">
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<header>
<h1>PÁGINA WEB</h1>
<nav id="menu">
<ul>
<li><a id="inicio" href="#">ENLACE 1</a></li>
<li><a id="chat" href="#">ENLACE 2</a></li>
<li><a id="radio" href="#">ENLACE 3</a></li>
<li><a id="ayuda" href="#">ENLACE 4</a></li>
<li><a id="contacto" href="#">ENLACE 5</a></li>
</ul>
</nav>
</header>
<div class="contenido">
<section id="inicio"></section>
</div>
<footer>
</footer>
</body>
</html>
Código:
*{margin:0;padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
Código:
/* CUERPO */
body {
background: #F4F4F4;
color: #000;
font-size: 12px;
}
/* ENCABEZADO */
header {
background: #212121;
height: 110px;
}
header h1 {
width: 850px;
margin: 0 auto;
color: #FFF;
font-family: 'Finger Paint', cursive;
font-size: 55px;
}
/* MENÚ DE NAVEGACIÓN */
header nav {
height: 50px;
position: relative;
z-index: 1;
background: #2C2E2E;
border-top: 2px solid #333;
}
header ul {
width: 850px;
margin: 0 auto;
list-style: none;
}
header li {
display: inline;
float: left;
margin-top: 8px;
padding-right: 15px;
font-family: 'Patrick Hand SC', cursive;
}
header a {
text-decoration: none;
color: #0EC4F7;
font-size: 20px;
text-shadow: 1px 2px 3px #000;
-moz-text-shadow: 1px 2px 3px #000;
-webkit-text-shadow: 1px 2px 3px #000;
}
nav a:hover {
color: #95E5FB;
}
/* CONTENIDO */
div.contenido {
background: #FFF;
width: 850px;
margin: 0 auto;
overflow: hidden;
padding-left: 10px;
min-height: 500px;
position: relative;
z-index: 0;
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
box-shadow: 0 2px 15px #333;
-moz-box-shadow: 0 2px 15px #333;
-webkit-box-shadow: 0 2px 15px #333;
}
section#inicio, section#chat, section#radio, section#ayuda, section#contacto {
width: 100%;
margin: 0 auto;
top: 30px;
clear: both
position: relative;
padding-top: 20px;
}
footer {
background: #212121;
height: 100px;
}
Espero que puedan ayudarme, gracias.
----
Xploit Mx