Como coloco o rodapé embaixo de tudo?
Oi gente, preciso de ajuda com meu código, basicamente eu quero colocar um rodapé no final do "site" teste que estou criando para template...
Mas por algum motivo eu coloco várias propriedades para a div que está com class de rodapé não sai do lugar
Está aí os códigos
HTML
<!DOCTYPE html PUBLIC "~//w3c//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Index</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<aside>
<div id="box-profile">
<img src="img.png" alt="" class="img-profile"/>
<a href= [https://www.youtube.com/channel/UCNmMpvtey6QI7KMzdzMab9g/featured"](https://www.youtube.com/channel/UCNmMpvtey6QI7KMzdzMab9g/featured) target="_blank"><p class="name-user">Impulse MK</p></a>
</div>
<input type="checkbox" id="show-menu">
<nav>
<ul>
<li><a href="Index.html">Home</a></li>
<li><a href="https://www.youtube.com/channel/UCNmMpvtey6QI7KMzdzMab9g/featured" target="_blank">Channel</a></li>
<li><label for="show-menu">Vídeos</label>
<ul class="sub-menu">
<li><a href="Playlists.html">Playlists</a></li>
<li><a href="Series.html">Series</a></li>
<li><a href="Games.html">Games</a></li>
</ul>
</li>
<li><a href="About.html">About</a></li>
</ul>
</nav>
</aside>
<header><li>Teste</li></header>
<header class="text">
<div>Teste</div>
<div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet volutpat diam. Fusce metus mi, sodales ac sem non, ullamcorper mattis augue. Donec elit dui, semper non maximus dictum, accumsan tristique justo. Quisque laoreet, libero vel malesuada rhoncus, purus leo aliquam enim, vitae convallis justo diam quis ligula. Nulla ultricies fringilla turpis et venenatis. Aenean ornare blandit leo vel sagittis. Nam vulputate egestas magna, ac feugiat metus ultricies gravida. In interdum feugiat dapibus. Fusce vitae massa viverra, blandit mauris nec, placerat felis. Nullam lobortis nisl at ante congue, sit amet ornare turpis pellentesque. Maecenas luctus, arcu nec maximus finibus, tortor ipsum egestas risus, sed vehicula mi purus quis lacus. Sed sed efficitur magna, eget laoreet mi. Nulla porttitor interdum nisi a vulputate. Sed euismod nibh sed erat sollicitudin placerat. Proin blandit ligula sit amet ante gravida, vitae venenatis risus fermentum. Nulla leo arcu, vulputate id neque ac, luctus sodales sapien.</p>
<p>Etiam vitae ante pharetra, pulvinar odio eget, posuere risus. Vestibulum malesuada turpis ligula. Nulla eget euismod massa. Morbi ullamcorper lacinia sem, eget blandit erat lobortis vitae. Pellentesque vitae magna purus. Integer mattis enim eu dolor sodales porttitor at eu lectus. Vivamus elementum eros eget tincidunt lacinia. Nullam tincidunt nisi ut placerat cursus. Aenean vel cursus tellus. Vivamus vel pulvinar dolor, sit amet gravida leo. Aliquam fringilla sed nisl at vestibulum. Sed laoreet magna turpis, nec lacinia tortor rutrum eu. Proin molestie magna nibh, non accumsan neque bibendum id. Quisque commodo nec est vitae cursus. Ut faucibus eros sapien, non dapibus turpis ultricies vitae. Vivamus volutpat quam vitae augue condimentum, vitae rutrum ex iaculis.</p>
<p>Integer at orci imperdiet tellus commodo ornare. Donec rutrum pretium felis, a porttitor odio placerat at. Nam vitae convallis velit. Maecenas purus enim, lobortis ullamcorper lobortis in, facilisis rutrum est. Etiam finibus fringilla mauris ac sagittis. Nam non leo consequat, gravida nibh quis, ultricies augue. Etiam ac orci massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mauris id sem venenatis placerat in at orci. Vestibulum quis ornare magna. Cras a augue semper, sodales justo sed, tempor dui. Nam quis lacus suscipit, fringilla ante in, dapibus odio. Fusce fringilla ligula vehicula, congue nulla vitae, tincidunt arcu. Mauris vehicula orci ut faucibus dapibus.</p>
<br>
<br>
</div>
</header>
<div class="footer"></div>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="style.js"></script>
</body>
</html>CSS
{ margin:0;}
/ menu e submenu /
header {
position:absolute;
top: 0;
left: 230px;
width: calc(100% - 230px);
height: 100px;
background: #e74c3c;
}
header li {
list-style: none;
font-family: 'Roboto';
color: #f1f1f1;
margin-left: calc( 100% - 683px );
margin-top: 35px;
font-size:25px;
}
aside {
position: fixed;
left: 0;
top: 0;
width: 230px;
height: 200%;
background: #f1f1f1;
font-family: 'Lato', sans-serif;
overflow: hidden;
box-shadow:15px 10px 100px 0 #000;
}
#box-profile {
width: 230px;
height: 100px;
overflow: hidden;
background:#ea5848;
}
.img-profile {
position: relative;
display: block;
float: left;
margin:15px 0 25px 15px;
width: 70px;
height: 70px;
}
.name-user {
position: relative;
display: block;
float: left;
width: auto;
line-height: 20px;
font-size: 20px;
color: #fff;
font-family: 'Lato', sans-serif;
margin:40px 0 40px 15px;
}
input[id="show-menu"] {
display: none;
}
aside nav ul {
list-style: none;
width: 100%;
margin-top:30px;
}
nav ul li {
display: block;
width: 230px;
height: auto;´´´
}
nav ul li:hover {
border-left: 3px solid #B71C1C;
}
ul li a, label {
display: block;
text-indent: 20px;
width: 100%;
line-height: 14px;
font-size: 14px;
padding: 18px 0;
text-decoration: none;
cursor: pointer;
color: #F44336;
}
/sub menu/
aside input[id="show-menu"]:checked + nav ul li ul {
height: 150px;
}
.sub-menu {
overflow: hidden;
margin-top: 0;
background: #EEEEEE;
height: 0;
transition: 1s;
}
/ fim do menu e submenu /
/ fundo /
html {
margin-left:200px;
margin-top:50px;
background-image:url(Wallpaper.jpeg);
background-size:100%;
}
/ fim do fundo /
header.text {
position: absolute;
display:block;
box-shadow: 0 0 20px 10px #111;
top: 135px;
left: 305px;
width: 1000px;
height: auto;
background:#ecf0f1;
border-radius: 60px;
}
header.text div {
margin-top:60px;
margin-left:60px;
margin-right:60px;
font-family:'Lato';
font-size:30px;
color:#e74c3c;
}
header.text div.text {
margin-top:20px;
font-size:20px;
overflow:hidden;
}
.footer {
position:absolute;
bottom:0;
width:100%;
}
Discussão (1)
Carregando comentários...