Pessoal, estou tentando fazer uma página seguindo os passos do curso de HTML5 e CSS3, mas não consigo nem fixar na base o rodapé e nem deixar o conteúdo do site acima do rodapé. Podem me ajudar? : O código HTML é esse:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Personagens - Mesa do Almeida</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.css">
</head>
<body>
<div id="tudo">
<header>
<div class="caixa">
<h1><img src="leitor.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Personagens</a></li>
<li><a href="sobre.html">Sobre o Mundo</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="personagens">
<li id="thorku">
<h2>Thorku Dunduur</h2>
<img src="thorku.png">
<p>Raça: Anão
<br>Classe: Clérigo</p>
<p></p>
</li>
<li id="haltar">
<h2>Haltar de Turi</h2>
<img src="haltar.png">
<p>Raça: Anão</p>
<p>Classe: Paladino</p>
</li>
<li id="icaro">
<h2>Icaro Pedyo Anar</h2>
<img src="icaro.png">
<p>Raça: Humano
<br>Classe: Ladino</p>
<p></p>
</li>
<li id="cleo">
<h2>Cleo de Hemera</h2>
<img src="cleo.png">
<p>Raça: Golias
<br>Classe: Paladino</p>
<p></p>
</li>
</ul>
</main>
<footer>
<img src="dado.png">
<p>© Copyright Rafael Almeida</p>
</footer>
</div>
</body>
</html>E o Código CSS é esse:
html body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
}
header{
background: #ffffff;
padding: 10px 0;
}
nav{
position: absolute;
top: 110px;
right: 0;
}
.caixa{
position: relative;
width: 730px;
margin: 0 auto;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover{/*rastreio de comportamento (hover=passar o mouse)*/
color: #c78c19;
}
.personagens{
width: 1100px;
margin-left: 1100 auto;
padding: 50px 50px;
}
.personagens li{
display: inline-block;
text-align: center;
vertical-align: top;
margin: 0 5px;
box-sizing: border-box;
border: 2px solid #000000;
border-radius: 10px;
}
.personagens h2{
font-size: 20px;
font-weight: bold;
font-family: serif;
}
.personagens p{
font-weight: bold;
text-align: left;
color: #000000;
}
.personagens li:hover{/*rastreio de comportamento (hover=passar o mouse)*/
border-color: #c78c19;
}
.personagens li:hover h2{
font-size: 21.2px;
}
.personagens li:active{/*Quando estiver clicado*/
border: 0px 30px solid #c69c19;
color: #c69c19;
}
.personagens li img:active{
margin-top: 5px;
box-sizing: border-box;
border-radius: 10px;
}
#thorku img{
padding-top: 82px;
}
#haltar img{
padding-top: 105px;
padding-bottom: 5px;
}
#icaro img{
padding-top: 35px;
padding-bottom: 9px;
}
#cleo img{
padding-bottom: 15px;
}
main{
margin: 0 0;
padding-top: 20px;
max-width: 640px;
width: 94%;
}
footer{
text-align: center;
background-image: url("book.jpg");
background-size: 33.3% 100%;
background-image: linear-gradient(to bottom, rgba(219, 219, 219, 0.068) 1%,rgba(192, 192, 192, 0.469) 100%), url('book.jpg');
border: 0 0 0 0 0 ;
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
}Agradeço a quem tiver disposição de ver essa bagunça.
