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:
resetear.css<!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:
estilo.css*{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:
Espero que puedan ayudarme, gracias./* 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; }
----
Xploit Mx