1.- fuentes.css: En este archivo tengo las fuentes que estoy ocupando, estas fuentes las obtuve de google fonts.
2.- estilo_reset.css: Use un archivo reset para minimizar las diferencias visuales al momento de que la página sea vista en diferentes navegadores, este archivo reset lo copie de la página de Eric Meyer.
3.- estilo_home: En este último archivo css "estilo_home.css" coloco las reglas de estilo para la apariencia y posicionamiento de elementos html de la maqueta.
El último archivo es el index.html
En lo que tengo problemas es que el color del footer abarque el 100% de longitud del monitor intente varias cosas para poder lograrlo y no tengo resultados favorables.
Mi estructura del HTML es la siguiente:
Tengo un div con un selector de tipo id el cual se llama "wrapper_home"
Código HTML :
<div id="wrapper_home"></div>
dentro de el contengo otros <div></div>.
Código HTML :
<div id="cabecera_home"></div> <div id="contenido_home"></div> <div id="footer"></div>
Dentro de estas diviciones principales tengo otras más para la distribución de la información que contendra la página, en la "cabecera_home" contiene un <h1></h1> para contener el nombre de la página, otro div más para llamado "navegacion_home" que contiene una lista desordenada para las opciones del menú horizontal.
Dentro del div "contenido_home" existe otro llamado "galeria_imagen" para una galeria dinamica, también contiene un parrafo con textos de prueba tipo Lorem ipsum, fuera del cierre del div "galeria_imagen" tengo otro div para mostrar los diferentes servicios, este div se llama "servicios" y en el tengo 6 divs más con un tipo de selector class.
Por último el div "footer", el cual contiene 3 divs más para su contenido: "Acerca de" "Contacto" "Redes Sociales" que por el momento contienen textos de prueba Lorem ipsum.
Todo el código HTML es este:
Código HTML :
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Pagina de prueba</title> <!-- HOJAS DE ESTILO --> <link rel="stylesheet" media="all" type="text/css" href="CSS/fuentes.css" /> <link rel="stylesheet" media="all" type="text/css" href="CSS/estilo_reset.css" /> <link rel="stylesheet" media="all" type="text/css" href="CSS/estilo_home.css" /> </head> <body> <div id="wrapper_home"> <!-- Logo de la página --> <div id="cabecera_home"> <h1><span id="nombre">Blue</span><span id="apellido">Scuba</span></h1> <!-- Navegación principal (menú horizontal) --> <div id="navegacion_home"> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Noticias</a></li> <li><a href="#">Poryectos</a></li> <li><a href="#">Contacto</a></li> <li><a href="#">Aviso legal</a></li> </ul> </div> </div> <div id="contenido_home"> <!-- Galeria de imagenes --> <div id="galeria_imagen"> <img src="IMG/slide_00.jpg" /> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p> </div> <div id="servicios"> <!-- Servicios --> <div class="servicio"> <div id="img_contacto"></div> <h3 class="servicio">Contactanos</h3> <p class="servicio">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a class="myButton" href="#">Más Información</a> </div> <div class="servicio"> <div id="img_trabajo"></div> <h3 class="servicio">Visitia nuestro trabajo</h3> <p class="servicio">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a class="myButton" href="#">Más Información</a> </div> <div class="servicio unico"> <div id="img_nosotros"></div> <h3 class="servicio">Sobre nosotros</h3> <p class="servicio">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a class="myButton" href="#">Más Información</a> </div> <div class="servicio"> <div id="img_solucion"></div> <h3 class="servicio">Soluciones practicas</h3> <p class="servicio">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a class="myButton" href="#">Más Información</a> </div> <div class="servicio"> <div id="img_ideas"></div> <h3 class="servicio">Ideas Inovadoras</h3> <p class="servicio">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a class="myButton" href="#">Más Información</a> </div> <div class="servicio unico"> <div id="img_elegirnos"></div> <h3 class="servicio">¿Por que elegirnos?</h3> <p class="servicio">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s </p> <a class="myButton" href="#">Más Información</a> </div> </div> <!-- Fin de los servicios --> </div> <div id="footer"> <!-- Contenido footer --> <div class="contenido_footer"> <h3 class="contenido_footer_descripcion">Acerca de</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="contenido_footer"> <h3 class="contenido_footer_descripcion">Contacto</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> <div class="contenido_footer redes"> <h3 class="contenido_footer_descripcion">Redes Sociales</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <ul id="iconos_sociales"> <li class="sociales"><a href="#"><img src="../IMG/Home_r24_c29_s1.png"></a></li> <li class="sociales"><a href="#"><img src="../IMG/Home_r24_c26_s3.png"></a></li> <li class="sociales"><a href="#"><img src="../IMG/Home_r24_c35_s1.png"></a></li> <li class="sociales"><a href="#"><img src="../IMG/Home_r24_c37_s4.png"></a></li> </ul> </div> <!-- Fin del contenido footer --> </div> </div> </body> </html>
Mi archivo CSS "estilo_home" es el siguiente:
Código CSS :
/**************************************************
ESTILO HOME
**************************************************/
/*
CONTENEDORES GLOBALES
---------------------------------------------------------------------------------*/
div#wrapper_home{
border: 0px solid #000;
margin: 0px auto;
width: 1000px;
}
div#contenido_home{
width: 1000px;
}
/*
CABECERA
---------------------------------------------------------------------------------*/
div#cabecera_home{
border: 0px solid blue;
padding-top: 40px;
width: 1000px;
}
div#cabecera_home h1{
border: 0px solid #000;
float: left;
font-size: 70px;
margin-top: 30px;
}
span#nombre,
span#apellido{
font-family: 'Keania One', Verdana, Tahoma, sans-serif;
}
span#nombre{
color: #73BFCE;
}
span#apellido{
color: #1F2B30;
}
/*
NAVEGACION PRINCIPAL DEL SITIO
---------------------------------------------------------------------------------*/
div#navegacion_home{
border: 0px solid #000;
float: left;
margin-left: 460px;
margin-top: -30px;
}
div#navegacion_home ul{
list-style-type: none;
}
div#navegacion_home ul li{
float: left;
}
div#navegacion_home ul li a{
color: #888888;
font-family: 'ABeeZee', Verdana, Tahoma, sans-serif;
font-size: small;
font-weight: bold;
margin-right: 40px;
text-decoration: none;
}
div#navegacion_home ul li a:hover{
color: #91C9D2;
}
/*
CONTENIDO PRINCIPAL HOME
---------------------------------------------------------------------------------*/
div#galeria_imagen{
float: left;
margin-top: 50px;
width: 1000px;
}
div#galeria_imagen img{
height: 350px;
margin-left: 95px;
width: 800px;
}
div#galeria_imagen p{
font-size: 30px;
font-family: 'ABeeZee', Verdana, Tahoma, sans-serif;
text-align: center;
margin-left: 110px;
margin-top: 40px;
width: 750px;
}
div#servicios{
float: left;
margin-top: 50px;
width: 1000px;
}
div.servicio{
border: 0px solid #000;
float: left;
margin-bottom: 60px;
margin-right: 30px;
width: 310px;
}
div.unico{
margin-right: 0px;
}
/*
PIE DE PAGINA
---------------------------------------------------------------------------------*/
head#color_footer{
background-color: #2c2c2c;S
width: 100%;
}
div#footer{
background-color: #2c2c2c;
border: 0px solid red;
clear: both;
height: 200px;
padding-top: 40px;
width: 1000px;
}
div#footer div.contenido_footer{
border: 0px solid #000;
color: #B2B7B7;
float: left;
margin-right: 30px;
width: 310px;
}
div#footer div.redes{
margin-right: 0px;
}
div#img_contacto{
background-image: url('../IMG/Home_r7_c3_s1.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_contacto:hover{
background-image: url('../IMG/Home_r7_c3_s2.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
h3.servicio{
border: 0px solid #000;
float: left;
font-family: 'Salsa', Verdana, Tahoma, Arial, sans-serif;
font-size: 23px;
margin-left: 75px;
margin-top: -55px;
}
h3.servicio:hover{
color: #4FA9B8;
}
p.servicio{
border: 0px solid #000;
color: #939292;
float: left;
font-family: 'Inder', Verdana, Tahoma, Arial, sans-serif;
margin-left: 75px;
text-align: left;
width: 230px;
}
p.servicio:hover{
color: #000;
}
div#img_trabajo{
background-image: url('../IMG/Home_r7_c13_s1.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_trabajo:hover{
background-image: url('../IMG/Home_r7_c13_s2.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_nosotros{
background-image: url('../IMG/Home_r8_c24_s1.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_nosotros:hover{
background-image: url('../IMG/Home_r8_c24_s2.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_solucion{
background-image: url('../IMG/Home_r14_c2_s1.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_solucion:hover{
background-image: url('../IMG/Home_r14_c2_s2.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_ideas{
background-image: url('../IMG/Home_r15_c14_s1.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_ideas:hover{
background-image: url('../IMG/Home_r15_c14_s2.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_elegirnos{
background-image: url('../IMG/Home_r14_c25_s1.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
div#img_elegirnos:hover{
background-image: url('../IMG/Home_r14_c25_s2.png');
background-repeat: no-repeat;
height: 57px;
width: 57px;
}
ul#iconos_sociales{
border: 0px solid #000;
list-style-type: none;
margin-top: 15px;
}
ul#iconos_sociales li.sociales{
float: left;
}
ul#iconos_sociales li.sociales a{
margin-right: 20px;
text-decoration: none;
}
h3.contenido_footer_descripcion{
color: #fff;
font-family: 'Inder', Verdana, Tahoma, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
text-align: left;
}
div.contenido_footer p{
font-family: 'ABeeZee', Verdana, Tahoma, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: left;
}
/*
ESTILO BOTON
---------------------------------------------------------------------------------*/
.myButton{
-moz-box-shadow: 0px 10px 14px -7px #276873;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color:#599bb3;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:8px 27px;
text-decoration:none;
margin-left: 75px;
margin-top: 20px;
}
.myButton:hover{
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.myButton:active{
position:relative;
top:1px;
}
En las reglas de estilo, wrapper_home le doy una longitud absoluta de 1000px y que el contenido este centrado, tanto al contenido_home como el footer tienen la longitud de wrapper_home, 1000px.
Por el momento obtengo lo siguiente.
Esta es la parte donde se puede observar el footer.
Lo que quiero obtener es que el color del footer "#2C2C2C" se expanda hasta el 100% de la pantalla. Intento esto, meter otro div dentro de div footer, despues en la hoja de estilo le coloco el mismo color de fondo que tiene el footer #2C2C2C con una longitud del 100% pero no me resulta y todo el contenido de la página adquiere el color del footer #2C2C2C.
Código HTML :
<div id="color_footer"> <!-- Contenido footer --> </div>
En estilo_home agrego la siguiente regla
Código CSS :
div#color_footer{
background-color: #2C2C2C;
width: 100%;
}
Y esto es lo que obtengo:
Espero que me puedan guiar para obtener el resultado que quiero.
