Ola,
Por favor, eu não sei se fiz algo errado ou deixei de fazer algo mais fazendo junto com o professor, me deparei com o problema ai do anexo, a caixa do "cabelo" ficou desalinhada com as outras, estou usando os mesmos valores das aulas.
Obrigado.
Solucionado
Ola,
Por favor, eu não sei se fiz algo errado ou deixei de fazer algo mais fazendo junto com o professor, me deparei com o problema ai do anexo, a caixa do "cabelo" ficou desalinhada com as outras, estou usando os mesmos valores das aulas.
Obrigado.
Oi Lucas, tudo bem?
Você poderia mandar seu código completo aqui? Você pode usar a ferramenta de inserir bloco de código </>. Assim fica até mais fácil para copiar e colar seu código e fazer testes.
O seu link deu erro 404 no found.
Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.
Um abraço e bons estudos.
Ola Lorena,
Obrigado pela resposta, segue aqui o codigo do projeto completo
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="produtos.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Produtos.html">Produtos</a></li>
<li><a href="Contatos.html">Contatos</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produtos-descricao">Na tesoura ou maquina, como o cliente preferir</p>
<p class="produtos-preco">R$ 25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="produtos-descricao">Corte e desenho profissional de barba</p>
<p class="produtos-preco">R$ 18,00</p>
</li>
<li>
<h2>Cabelo + Barba</h2>
<img src="cabelo+barba.jpg">
<p class="produtos-descricao">Pacote completo de cabelo e barba</p>
<p class="produtos-preco">R$ 35,00</p>
</li>
</ul>
</main>
</body>
</html>
CSS
header {
background: #BBBBBB;
}
.caixa{
position: relative;
width: 940px;
margin: 0 auto;
padding: 20px;
}
nav{
position: absolute;
top: 105px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
.produtos {
width: 940px;
margin: 0 auto;
padding: 50px 0;
}
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
}
.produtos h2 {
font-size: 30px;
font-weight: bold;
}
.produtos-descricao {
font-size: 18px;
}
.produtos-preco {
font-size: 22px;
font-weight: bold;
}
Por favor se puder me ajudar ficarei grato.
att,
Oi Lucas!
Não sei em qual aula e módulo você está, mas mais pra frente o instrutor fará modificações no código, adicionará mais propriedades e tudo mais.
Por enquanto para resolve ro seu problema, você pode adicionar:
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
Em: .produtos li. Ficando assim:
.produtos li {
display: inline-block;
text-align: center;
width: 30%;
margin: 0 1.5%;
padding: 30px 20px;
box-sizing: border-box;
}
Vou explicar o impacto de cada uma dessas propriedades no código e como elas afetam o layout.
Isso define margens de 0 no topo e na parte inferior e 1,5% nas margens esquerda e direita de cada elemento dentro de .produtos li. As margens são espaços em branco ao redor do elemento.
Define um preenchimento de 30 pixels na parte superior e inferior e 20 pixels nas margens esquerda e direita de cada elemento dentro de .produtos li. O preenchimento é a área entre o conteúdo do elemento e sua borda.
Essa propriedade afeta como o tamanho total do elemento é calculado. Quando você define box-sizing como border-box, o tamanho total do elemento (largura e altura) inclui o preenchimento e a borda, em vez de adicioná-los ao tamanho do conteúdo. Isso significa que o conteúdo do elemento não se expandirá para além do tamanho definido, incluindo preenchimento e borda.
A razão para incluir essas propriedades é para criar um espaçamento uniforme e consistente entre os elementos da lista dentro de .produtos li. Isso pode ser útil para dar uma aparência mais organizada e estilizada à lista de produtos, mantendo o alinhamento das imagens em relação ao texto ou outros elementos dentro de cada item da lista.
Resultado:
Indico que você continue assistindo as aulas e sempre baixando o código do instrutor para comparar com o seu.
E também temos essa formação nova, com cursos atualizados. Indico muito que você a faça.
Um abraço e bons estudos.
Que ajuda perfeita, muitíssimo obrigado!