Olá, estou aprendendo programação front-end com a apostila da Caelum -Desenvolvimento Web com HTML, CSS e JavaScript.
Estou montando uma loja virtual em que tenho 2 painéis flutuantes para alinhar lado a lado, e dentro de cada painel tem imagens e texto, gostaria de saber como alinhar da forma correta. Pois segui o exemplo e não fico da mesma forma que o exemplo dado.
Segue imagem abaixo para verificar.
Imagem correta:
fala man, blz?
coloca seu código HTML e CSS aí, ou em um Jsbin
pra adiantar, dá uma verificada se a estrutura está assim:
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura1.png">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<!-- 6 itens de lista aqui -->
</ol>
Verifique também se está tudo abrindo e fechando como deveria, as <li>, as duas <ol>, etc.
abcz!
Opa Natan, beleza???
Segue baixo código que está no INDEX.HTML
<!-- Segundo Produto -->
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura3.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura4.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura9.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura8.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura15.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<!-- primeiro produto -->
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura9.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<!-- Segundo Produto -->
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura5.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura14.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura12.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura10.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="mirrorfashion/img/produtos/miniatura15.png">
<figcaption>Fuzz Cardigan por R$129,90</figcaption>
</figure>
</a>
</li>
</ol>
</section>
</div>
E agora o código no arquivo CSS.
.painel {
margin: 10px 0;
padding: 10px;
width: 445px;
}
.novidades {
float: left;
background-color: #f5dcdc;
}
.mais-vendidos {
float: right;
background-color: #dcdcf5;
}
.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
padding-bottom: 10px;
}
.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;
}
vader, dei uma olhada aqui, seu CSS está 100%, mas o HTML deu pau na hora de postar, aí não consegui ver
mas montei esse jsbin aqui, dá uma comparada pra ver se está igual
outra coisa, certifique-se que vc está chamando o reset css, chuto que é isso que está dando pau
abcz!
Natan, Muito obrigado cara… realmente era o arquivo CSS Reset, coloquei igual o seu que está no jsbin e deu certo.
Muito obrigado mesmo, um grande abraço e sucesso.
opa magina vader
soh marca minha resposta como solucao, ai a galera sabe que o topico foi solucionado
abcz e bons estudos!