Problema com footer (Exercicio 4.14 Caelum wd-43)
Bom dia
Estou tendo um problema com o footer e não consigo encontrar a solução. Seguem abaixo as imagens do footer que implementei, a imagem do footer da apostila e meus códigos.
/applications/core/interface/imageproxy/imageproxy.php?img=http://i58.tinypic.com/6744r4.jpg&key=c230b251895f3f2bd834e83efa3514ac7d0891f4d036589fc86d8dc62c7bb861" alt="6744r4.jpg" />
<DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<header class="container">
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
<p class="sacola">
Nenhum item na sacola de compras
</p>
<nav class="menu-opcoes">
<ul>
<li><a href="#">Sua conta</a></li>
<li><a href="#">Lista de desejos</a></li>
<li><a href="#">Cartão fidelidade</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</nav>
</header>
<div class="container destaque">
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<input type="image" src="img/busca.png">
</form>
</section><!--Fim da .busca-->
<section class="menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul>
<li><a href="#">Blusas e Camisas</a></li>
<li><a href="#">Calças</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras</a></li>
<li><a href="#">Acessórios</a></li>
</ul>
</nav>
</section> <!--Fim .menu-departamentos-->
<img src="img/destaque-home.png" alt="Promoção: Big City Night">
</div><!--Fim .container .destque-->
<div class="container paineis">
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura1.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura2.png">
<figcaption>Camiseta Estampa Caveira por R$29,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura3.png">
<figcaption>Fuzz Cardigan Crochê por R$89,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura4.png">
<figcaption>Jaqueta Marujo por R$119,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura5.png">
<figcaption>Regata Lycra por R$19,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura6.png">
<figcaption>Regata Viscose por R$19,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
<section class="painel mais-vendidos">
<h2>Mais vendidos</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura7.png">
<figcaption>Camiseta Poliester R$39,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura8.png">
<figcaption>Camiseta Malha Lisa R$39,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura9.png">
<figcaption>Camisa Flanela Xadrez R$69,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura10.png">
<figcaption>Camiseta Malha Manga Longa R$39,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura11.png">
<figcaption>Short Brim R$39,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura12.png">
<figcaption>Camisa Malha Lisa R$59,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
</div> <!--Fim .container .paineis-->
<footer>
<div class="container">
<img src="img/logo-rodape.png" alt="Logo Mirror Fashion">
<ul class="social">
<li><a href="[http://facebook.com/mirrorfashion](http://facebook.com/mirrorfashion)">Facebook</a></li>
<li><a href="[http://twitter.com/mirrorfashion](http://twitter.com/mirrorfashion)">Twitter</a></li>
<li><a href="[http://plus.google.com/mirrorfashion](http://plus.google.com/mirrorfashion)">Google+</a></li>
</ul>
</div>
</footer>
</body>
</html>
.sacola {
background: url(../img/sacola.png) no-repeat top right;
font-size: 14px;
padding-right: 35px;
text-align: right;
width: 130px;
padding-top: 8px;
position: absolute;
top: 0;
right: 0;
}.menu-opcoes ul li {
font-size: 15px;
display: inline;
margin-left: 20px;
}.menu-opcoes a {
color: #003366;
}body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.container {
margin: 0 auto;
width: 940px;
}header {
position: relative;
}
.menu-opcoes {
position: absolute;
bottom: 0;
right: 0;
}
#logo-cabecalho {
background-image: none;
}
.busca,
.menu-departamentos {
background-color: #dcdcdc;
font-weight: bold;
text-transform: uppercase;
margin-right: 10px;
width: 230px;
}.busca h2,
.busca form,
.menu-departamentos h2 {
margin: 10px;
}.menu-departamentos li {
background-color: white;
margin-bottom: 1px;
padding: 5px 10px;
}.busca input {
vertical-align: middle;
}.busca input[type=search] {
width: 170px;
border-radius: 10px;
}
.busca,
.menu-departamentos {
float: left;
}
.menu-departamentos {
clear: left;
margin-top: 10px;
padding-bottom: 10px;
}
.destaque {
margin-top: 10px;
}
.painel {
margin: 10px 0;
padding: 10px;
width: 445px;
}
.novidades {
float: left;
}
.mais-vendidos {
float: right;
}.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
}.painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}.painel a {
color: #333;
font-size: 14px;
text-align: center;
text-decoration: none;
}
.novidades {
background-color: #f5dcdc;
}
.mais-vendidos {
background-color: #dcdcf5;
}footer{
background-image: url(../img/fundo-rodape.png);
clear: both;
padding: 20px 0;
}.social li a {
height: 32px;
width: 32px;
display: block;
text-indent: -9999px;
}.social a[href*="facebook.com"] {
background-image: url(../img/facebook.png);
}.social a[href*="twitter.com"] {
background-image: url(../img/twitter.png);
}.social a[href*="plus.google.com"] {
background-image: url(../img/googleplus.png);
}footer .container {
position: relative;
}
.social {
position: absolute;
top: 12px;
right: 0;
}.social li {
float: left;
margin-left: 25px;
}Discussão (1)
Carregando comentários...