La estructura general del HTML es la siguiente:
Código HTML :
<!--PIE DE PÁGINA--> <header id="color_fondo_footer"> <footer id="footer" class="especial"> <article id="poco_margen" class="articulo_f"> <h2 class="tit_footer">Sobre nosotros</h2> <p class="des_footer"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. </p> <p id="logo_novoa"> <span id="nom_logo">Novo</span><span id="sub_logo">AR</span> <span id="leyenda">Arte digital</span> </p> <p id="derechos_reservados"> © 2013 NovoAR. Todos los derechos reservados. </p><br> </article> <article class="articulo_f"> <h2 class="tit_footer">Contactanos</h2> <p class="des_footer"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <form id="suscribete" method="" action=""> <input id="email" type="text" placeholder="introduce tu e-mail" name="correo"> <input id="enviar_email" type="submit" name="Enviar" value="Enviar"> </form> </article> <article class="articulo_f"> <h2 class="tit_footer">Estamos en las redes</h2> <p class="des_footer"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <nav id="medios_sociales"> <ul> <li class="m_sociales"> <a href="#"> <img src="images/3d-black-and-white-social-icons/facebook_white.png"> </a> </li> <li class="m_sociales"> <a href="#"> <img src="images/3d-black-and-white-social-icons/twitter_white.png"> </a> </li> <li class="m_sociales"> <a href="#"> <img src="images/3d-black-and-white-social-icons/google_plus_white.png"> </a> </li> <li class="m_sociales"> <a href="#"> <img src="images/3d-black-and-white-social-icons/youtube_white.png"> </a> </li> </ul> </nav> </article> </footer> </header> <!--/PIE DE PÁGINA-->
Utilizo un <header></header> que este contiene a <footer</footer> para darle un efecto de color de fondo que abarca el 100% de la longitud de la pantalla del monitor.
Para las divisiones del contenido uso las etiquetas <article></article> uno para las redes sociales, otro para contacto y otro para la información del sitio.
En el head de la página principal tengo 3 archivos vinculados, todos con extensión .css "reset.css", "basico.css" y "general.css", explico cada uno de ellos:
1.- Reset:
Con este archivo reseteo los valores predeterminados que los navegadores puedan darle a ciertos elementos HTML, este archivo lo descargue de la página oficial de Eric Meyer.
2.- Básico:
En este archivo a cada elemento del HTML le doy un estilo por defecto.
3.- General:
En este último archivo CSS, van los demas estilos de los elementos HTML.
Así es como tengo vinculados los estilos CSS en el HTML:
Código HTML :
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>::NovoAR::</title> <link media="all" rel="stylesheet" type="text/css" href="CSS/reset.css"> <link media="all" rel="stylesheet" type="text/css" href="CSS/basico.css"> <link media="all" rel="stylesheet" type="text/css" href="CSS/general.css"> </head>
Los estilos CSS de cada archivo vinculado son los siguientes:
reset.css
Código CSS :
/**************************************************
ESTILO RESET CSS
**************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
basico.css
Código CSS :
/****************************************
ESTILO BÁSICO DE LA PÁGINA
****************************************/
.especial{
margin: 0px auto;
}
#cabecera,
#cuerpo,
#footer{
border: 0px solid red;
margin-bottom: 50px;
width: 1000px;
}
#footer{
margin-bottom: 0px;
}
general.css
Solamente colocare el estilo que le corresponde al pie de página
Código CSS :
/*
PIE DE PÁGINA
--------------------------------------------------*/
#color_fondo_footer{
background-color: #2C2C2C;
}
.articulo_f{
border: 0px solid;
display: inline-block;
margin-bottom: 30px;
margin-top: 25px;
margin-right: 12px;
width: 310px;
}
#logo_novoa{
color: #808080;
margin-bottom: 15px;
margin-left: 10px;
margin-top: 15px;
}
#nom_logo{
font-family: 'Salsa', Arial, Verdana, Tahoma, sans-serif;
}
#sub_logo{
font-family: 'Oleo Script Swash Caps', Arial, Verdana, Tahoma, sans-serif;
}
#leyenda{
font-family: 'Paprika', Arial, Verdana, Tahoma, sans-serif;
font-size: 12px;
}
#derechos_reservados{
color: #808080;
font-family: 'Inder', Arial, Verdana, Tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
margin-left: 10px;
}
.tit_footer{
color: #ffffff;
font-family: 'Salsa', Arial, Verdana, Tahoma, sans-serif;
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
padding-left: 10px;
}
#suscribete{
margin-left: 10px;
margin-top: 33px;
}
#email{
border-radius: 2px 2px 2px 2px;
font-size: small;
font-weight: bold;
margin-bottom: 20px;
padding: 7px 10px;
width: 246px;
}
#enviar_email{
-moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
-webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
box-shadow: 0px 1px 0px 0px #f0f7fa;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #798082), color-stop(1, #9ca5a8));
background:-moz-linear-gradient(top, #798082 5%, #9ca5a8 100%);
background:-webkit-linear-gradient(top, #798082 5%, #9ca5a8 100%);
background:-o-linear-gradient(top, #798082 5%, #9ca5a8 100%);
background:-ms-linear-gradient(top, #798082 5%, #9ca5a8 100%);
background:linear-gradient(to bottom, #798082 5%, #9ca5a8 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#798082', endColorstr='#9ca5a8',GradientType=0);
background-color:#798082;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
border:1px solid #82878a;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:14px;
font-weight:bold;
padding:9px 18px;
text-decoration:none;
text-shadow:0px -1px 0px #4c5470;
}
#enviar_email:hover{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9ca5a8), color-stop(1, #798082));
background:-moz-linear-gradient(top, #9ca5a8 5%, #798082 100%);
background:-webkit-linear-gradient(top, #9ca5a8 5%, #798082 100%);
background:-o-linear-gradient(top, #9ca5a8 5%, #798082 100%);
background:-ms-linear-gradient(top, #9ca5a8 5%, #798082 100%);
background:linear-gradient(to bottom, #9ca5a8 5%, #798082 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ca5a8', endColorstr='#798082',GradientType=0);
background-color:#9ca5a8;
}
#enviar_email:active{
position:relative;
top:1px;
}
#medios_sociales{
border: 0px solid;
margin-left: 10px;
margin-top: 30px;
}
.m_sociales{
display: inline-block;
}
.m_sociales a{
text-decoration: none;
}
.des_footer{
color: #808080;
font-family: 'Inder', Arial, Verdana, Tahoma, sans-serif;
font-size: 14px;
padding-left: 10px;
text-align: left;
}
#poco_margen{
margin-left: 15px;
}
#margen_cero{
margin-right: 0px;
}
Para visualizar mejor el problema que tengo en el footer, coloque unos bordes con colores (uno con rojo y otros en blanco) para ver las dimensiones de las áreas divididas en el footer, estos bordes los coloque en los archivos CSS.
El borde rojo es el footer, y los bordes en color blanco son las etiquetas <article></article> que use para hacer las divisiones del pie de página.
Visualmente, es así como me queda el footer.
Si a una de estas divisiones le agrego más contenido, se desalinean más, ejemplo, le colocaré otro parrafo a contactanos, las divisiones lateralres se bajan, he intentado usar posiciones absolutas, y que los articles floten hacia la izquerda, pero solamente se desalinean más.
¿Qúe puedo hacer para que el contenido del footer quede correctamente alineado?, espero me puedan orientar con mi problema.
