[RESOLVIDO] Exercícios 4.9 da Caelum

Front-end
,
#1

BOA TARDE!
Estou tendo problemas nesse exercício. Por algum motivo a “novidades” e “mais-vendidas” n ficam uma do lada da outra

 .painel{
margin: 10px 0;
padding: 10px;
width: 445px;

}

.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;

}

.novidades{
float: left;
background-color: #f5DCDC;
}

.mais-vendidos{
float: right;
background-color: #DCDCf5;
}

me%20ajudem%20kkk
me ajudem kkk.jpg771×779 179 KB

alguém poderia me ajudar nisso? agradeço.

#2

Possivelmente, o tamanho dos painéis não cabem na mesma linha. Faz um teste diminua o tamanho dos painéis width: 245px;

“O painel de novidades deve flutuar à esquerda e o mais-vendidos , à direita. Cada um deve ocupar 445px (pouco menos da metade dos 940px), assim um ficará ao lado do outro:”

Quem é a div pai dos painéis, ela tem 940px?
Mostre as classe .container e .paineis e também a estrutura do html nessa parte!

#3

bom dia!

HTML

       <div class="painel">
<section class="painel novidades">
	<h2>novidades</h2>
	<ol>
		<li>
			<a href="produto.html">
				<figure>
					<img src="img/produtos/miniatura1.png" alt="produto 1">
					<figcaption>roupa irada por R$29,90</figcaption>
				</figure>
			</a>
		</li>

		<li>
			<a href="produto.html">
				<figure>
				<img src="img/produtos/miniatura2.png" alt="produto 2">
				<figcaption>roupa irada por R$30,00</figcaption>
			</figure>
			</a>
		</li>

		<li>
			<a href="produto.html">
				<figure>
				<img src="img/produtos/miniatura3.png" alt="produto 3">
				<figcaption>roupa irada por R$30,00</figcaption>
			</figure>
			</a>
		</li>

		<li>
			<a href="produto.html">
				<figure>
				<img src="img/produtos/miniatura14.png" alt="produto 4">
				<figcaption>roupa irada por R$30,00</figcaption>
			</figure>
			</a>
		</li>

		<li>
			<a href="produto.html">
				<figure>
				<img src="img/produtos/miniatura15.png" alt="produto 5">
				<figcaption>roupa irada por R$30,00</figcaption>
			</figure>
			</a>
		</li>

		<li>
			<a href="produto.html">
				<figure>
				<img src="img/produtos/miniatura6.png" alt="produto 6">
				<figcaption>roupa irada por R$30,00</figcaption>
			</figure>
			</a>
		</li>
	</ol>
</section>

Mais Vendidos

  1. miniatura10 Roupa irada por R$20,00 
    2.     <li>
		<a href="produto.html">
            <figure>
            	<img src="img/produtos/miniatura4.png" alt="miniatura4">
            	<figcaption> Roupinha irada por R$30,00</figcaption>
            </figure>
        </a>
    </li>

    <li>
        <a href="produto.html">
            <figure>
            	<img src="img/produtos/miniatura12.png" alt="fotorosa">
            	<figcaption> Roupinha por R$30,00</figcaption>
            </figure>
		</a>
	</li>

	<li>
        <a href="produto.html">
            <figure>
            	<img src="img/produtos/miniatura7.png" alt="fotorosa">
            	<figcaption> Roupinha por R$30,00</figcaption>
            </figure>
		</a>
	</li>

	<li>
        <a href="produto.html">
            <figure>
            	<img src="img/produtos/miniatura6.png" alt="fotorosa">
            	<figcaption> Roupinha por R$30,00</figcaption>
            </figure>
		</a>
	</li>

	<li>
        <a href="produto.html">
            <figure>
            	<img src="img/produtos/miniatura5.png" alt="fotorosa">
            	<figcaption> Roupinha por R$30,00</figcaption>
            </figure>
		</a>
	</li>
</ol>

    CONTAINER

    .container{
    margin: 0 auto;
    width: 940px;
    position: relative;
    }

    PAINEL

    .painel{
    margin: 10px 0;
    padding: 10px;
    width: 445px;
    }

#4

Bom dia! Você está seguindo esse livro aqui! Né!
https://www.caelum.com.br/apostila-html-css-javascript/mais-html-e-css/#exerccios-painis-flutuantes

Então nessa parte aqui!

<div class="painel"> 
   <section class="painel novidades">
    [•••]

É assim:

<article class="container paineis">
     <!-- os paineis de novidades e mais vendidos entrarão aqui dentro -->
     <section class="painel novidades">
     [•••]
</article>
#5

Valeu, man. me ajudou muito.

Sou meio lerdo nisso poque sou novato rs. eu tinha errado o tamanha da width no painel kkkk tinha colocado outra numero

Muito obrigado pela ajuda, man!

1 curtida