Jump to content

Footer at bottom of page

Conrad AV

By Conrad AV
in CSS

 Share

Recommended Posts

Conrad AV Newbie

Conrad AV

Posted
Posted

Hello I am new with web development and I have an question, I have tried to serach at differente sites but i do not why this is not working for me. I want to put the footer of the page at the bottom (I mean, the footer should always be at the bottom, even if the content is not enough to push it down). Here is my HTML and my CSS. Hope you can help me, thank you!

 

<---HTML--->

<!DOCTYPE-html>
<html>
<head>
<meta charset="UTF-8">
<title>
CV y Portafolio
</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
</head>

<body>
<header>
<nav class="center">
<ul>
<li>
<a href="#">
SOBRE MÍ
</a>
</li>
<li>
<a href="#">
PORTAFOLIO
</a>
</li>
<li>
<a href="#">
CONTACTO
</a>
</li>
</ul>
</nav>
</header>

<div class="center">

<section id="SobreMi">
<div id="Cont-SobreMi">
<img src="img/Diego.jpg">
<h1>Sobre mí</h1>
<p>Mi nombre es Diego, soy diseñador gráfico graduado el 11 de Diciembre de 2014. Desde niño he sido amante de los juegos de video y comenzando mi adolescencia descubrí el gusto por la lectura. Me gusta leer novelas históricas, ciencia ficción y fantasía.</p>
<br>
<br>
<p>Debido al trabajo de mi padre, me mudé constantemente a distintos estados de la república mexicana, siempre que llegaba a un nuevo lugar era comenzar desde cero, creo que esto me ayudó a aceptar los cambios que se presentan en la vida con relativa facilidad.</p>
</div>

<div id="Cont-Intereses">
<h1>Intereses</h1>
<div id="Intereses"></div>
<div id="Intereses"></div>
<div id="Intereses"></div>
<div id="Intereses"></div>
<div id="Intereses2"></div>
<div id="Intereses2"></div>
<div id="Intereses2"></div>
<div id="Intereses2"></div>
</div>

<div id="Vida-Laboral">
<h1>Vida laboral</h1>
</div>

</section>

<aside>
</aside>
</div>

<footer>
<div class="center">
<div id="cont-footer">
Contenido del Footer
</div>
</div>
</footer>

</body>
</html>

 

 

<---CSS RESET--->

@charset "utf-8";

* {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
font-weight:normal;
font:inherit;
vertical-align:baseline;
box-sizing:border-box;
}


article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display:block;
}
body {
line-height:1;
}
h1, h2, h3, h4, h5, h6 {
font-weight:bold;
}
ol, ul {
list-style:none;
}
b, strong {
font-weight:bold;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}

 

 

<---CSS--->

 

.center {margin: auto; max-width: 1200px; position: relative; height: initial;}

body {background-color: ghostwhite; font-family: Ebrima, Arial, Helvetica; height: auto;}

header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #1d1d1d; color: ghostwhite; z-index: 3; font-family: sans-serif; font-weight: bold; border-style: solid; border-bottom-width: 1px; border-color: ghostwhite; display: block;}
#menu-prinicipal {position: absolute; left: 0;}
#menu-principal li {display: inline-block; margin-top: 16px; margin-left: 0;}
#menu-principal a { text-decoration: none; color: ghostwhite; padding: 15px; opacity: 1;}
#menu-principal a:hover {background-color: #42BAC8; color: ghostwhite;}

section {width: 100%; height: 100%; margin-top: 40px; margin-bottom: 40px; padding: 0; display:block; /*background-color: ghostwhite;background: url(../img/Galaxia2.jpg) no-repeat center center / cover;*/ }
#contenido {position: absolute; margin-top: 50px; margin-bottom: 0; width: 900px; height: auto; /*background-color: white;*/ padding: 30px; vertical-align: middle; font-size: 11pt; font-family: sans-serif; color: #1d1d1d;}
#contenido img {float: left; margin-right: 30px; margin-bottom: 10px; /*max-width: 50%; max-height: 50%;*/ width: 300px; height: 300px; border-radius: 1%}
#contenido h3 {margin-top: 0; margin-bottom: 40px; font-size: 1.5em; color: #42BAC8;}
#contenido h2 {margin-top: 0; margin-bottom: 10px; font-family: sans-serif; font-size: 1.5em;}
#contenido p + h2 {margin-top: 40px;}
#contenido p {text-align: justify; padding-right: 0; font-family: sans-serif; line-height: 1.3; text-indent: 3em;}
#contenido ul + h2 {margin-top: 40px;}
#contenido li {text-indent: 1em; line-height: 1.3em;}

#Portafolio {margin-bottom: 100px; display: block;}

/*Index*/

#contenido-index {padding-top: 300px; color: #1d1d1d;}
#contenido-index h3, h2 {font-size: 3em; font-style: normal;}

/*Sobre mi*/

aside { margin-top: 50px; margin-bottom: 50px; padding: 5px; width: 280px; height: 645px; float: right; font-family: sans-serif;}
#contenido-aside {border-style: inset; border-bottom-width: 1px; border-color: #42BAC8;}
#contenido-aside h3 {color: #42BAC8; margin-bottom: 0px; padding: 5px; border-style: solid; border-bottom-width: 0; border-bottom-color: #42BAC8; color: ghostwhite; background-color: #42BAC8;}
#contenido-aside {width 100%; height: 160px; color: #1d1d1d; /*background-color: white;*/ padding: 10px;}
#contenido-aside p {line-height: 1.3;}
#contenido-aside + #contenido-aside {margin-top: 10px;}
#contenido-aside a {text-decoration: none; color: #1d1d1d;}
.ver-mas {color: #42BAC8; text-align: center;margin-bottom: 15px;}

#intereses {width: 838px; height: auto; margin-top: 15px; padding: 0; background-color: none; display:inline-block;}
#intereses h2 {margin-bottom: 15px; font-size: 1.5em; color: #42BAC8;}
#contenido-intereses {width: 146px; height: 109px; display: inline-block; background-color: 2b2b2b;}
#contenido-intereses img {width: 146px; height:109px;}
#contenido-intereses + #contenido-intereses {margin-left: 21px;}
#descripcion-foto {width: 146px; height: 20px; position: absolute; margin-top: 89px; background-color: #42BAC8;}
#texto-intereses {padding-left: 5px; padding-top: 3px; font-size: 1em; color: white; font-style: normal;}

/*Experiencia Laboral*/

#contenido-ExpLab {position: absolute; margin-top: 50px; margin-bottom: 0px; width: 900px; height: auto; /*background-color: white;*/ padding: 20px; vertical-align: middle; font-family: sans-serif; color: #1d1d1d;}
#contenido-ExpLab img {float:left; margin-top: 20px; margin-left: 0; margin-bottom: 20px; max-width: 50%; max-height: 50%;}
#contenido-ExpLab h3 {margin-top: 0; margin-bottom: 40px; font-size: 2em; color: #42BAC8;}
#contenido-ExpLab h2 {margin-top: 0; margin-bottom: 10px; font-family: sans-serif; font-size: 1.5em;}
#contenido-ExpLab p + h2 {margin-top: 40px;}
#contenido-ExpLab p {text-align: justify; padding-right: 0; font-family: sans-serif; line-height: 1.3; text-indent: 1em;}
#contenido-ExpLab ul + h2 {margin-top: 50px;}
#contenido-ExpLab li {text-indent: 1em; line-height: 1.3em;}

/*Portafolio*/

#contenido-portafolio {position: absolute; margin-top: 30px; margin-bottom: 50px; padding: 20px 20px 20px 20px; width: 100%; height: 645px; font-family: sans-serif; background-color: transparent;}
#contenido-portafolio h2 { margin-bottom: 10px; color: #42BAC8; font-size: 2em;}
#contenido-portafolio img {max-width: 90%; max-height: 100%; margin-bottom: 0px; margin-left: 0px; padding-top: 30px;}
#contenido-portafolio p {line-height: 1.3; text-align: justify; text-indent: 2em;}
#contenido-portafolio #Contenedor {margin-left: 25px;}
#contenido-portafolio #Prueba { float:left; width: 900px; height: 600px; margin-left: 10px; margin-bottom: 0px; margin-right: 10px; /*background-color: red;*/ display: inline-block;}
/*#contenido-portafolio #Btn {float: left; width: 100px; margin-top: 175px;; height: 300px; background-color: #42BAC8; display: inline-block;}*/
#contenido-portafolio #Izquierda {float: left; width: 100px; height: 300px; margin-top: 175px; padding-top: 5px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; background-color: #42BAC8; color: ghostwhite; font-weight: bold; cursor: pointer; display:inline-block; font-size: 1em;}
#contenido-portafolio #Derecha {float: left; width: 100px; height: 300px; margin-top: 175px; padding-top: 20px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; background-color: #42BAC8; color: ghostwhite; font-weight: bold; cursor: pointer; display: inline-block; font-size: 1em;}
#contenido-portafolio #texto { width: 900px; height: 100px; margin-left: 220px; margin-bottom: 10px; padding-top: 0px; display: inline-block; font-weight: bold; color: #2b2b2b; font-size: 1em;}
#contenido-portafolio a:hover {text-decoration: none; color: #2b2b2b;}
#contenido-portafolio a {text-decoration: none; color: #42BAC8;}
#contenido-portafolio #texto #texto_cont1 {margin-right: 20px; display: inline-block;}
#contenido-portafolio #texto #texto_cont2 {margin-right: 20px; display: inline-block;}
#contenido-portafolio #texto #texto_cont3 {display: inline-block;}

/*Contacto*/
#contenido-contacto{position: absolute; margin-top: 200px; width: 100%; height: auto; padding: 20px; color: #1d1d1d;}
#contenido-contacto img {max-width: 10%; margin-bottom: 30px;}
#contenido-contacto h3 {font-size: 1.5em;}
#contenido-contacto img + h3 {margin-bottom: 50px;}

/*Footer*/

footer {position: relative; margin-top: 20px; bottom: 45%; padding: 20px; width: 100%; height: 80px; color: white; background-color: black; display: block;}
#Frase {font-style: italic;}
#Nombre {text-indent: 2em;}

post-199305-0-34705100-1464465842_thumb.png

Link to comment
Share on other sites
Conrad AV Newbie

Conrad AV

Posted
  • Author
Posted

Just do a search for 'sticky footer' in forums of this site, or use search engine 'sticky footer' NOT 'fixed footer'.

 

I know its been brought up here several or even hundreds times before.

 

Thank you, gonna check it right now.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...