Quando é tirado as propriedades width e margin do main, as outras páginas (Produtos e Contato), ficam diferentes.
Qual solução é recomendada? criar classes para cada main? CSS in-line?
Solucionado
Quando é tirado as propriedades width e margin do main, as outras páginas (Produtos e Contato), ficam diferentes.
Qual solução é recomendada? criar classes para cada main? CSS in-line?
Boa tarde Edson. Você poderia passar o seu código HTML e CSS para analisá-los e te dar uma resposta mais completa sobre o caso?
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="caixa">
<h1>
<img src="Imagens/logo.png">
</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<img class = "banner" src = "Imagens/banner.jpg">
<main>
<section class="principal"> <!--Serve para um campo mais complexo na Página-->
<h2 class="titulo_principal">Sobre a Barbearia Alura</h2>
<img class="img_utensilios" src="Imagens/utensilios.jpg" alt="Utensilios de Barbeiro">
<p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba.
Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>
<p id = "missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em> </p>
<p>profissionais experientes e antenados às mudanças no mundo da moda.
O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</section>
<section class="mapa">
<h3 class="titulo_principal">Nosso Estabelecimento</h3>
<p>A Barberaia Alura se encontra no coração da cidade</p>
<div class="mapa_conteudo">
<!--Link do Google maps Loalização-->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d331061.
43963805883!2d-46.88707370809266!3d-23.54161108996483!2m3!1f0!2f0!3f0!3m2!
1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum
%20-%20Escola%20de%20Tecnologia!5e0!3m2!1spt-BR!2sbr!4v1626384836842!5m2!1spt-BR!2sbr"
width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</section>
<section class="beneficios">
<h3 class="titulo_principal">Benefícios</h3>
<div class="conteudo_beneficios">
<ul class="lista_beneficios">
<li class="itens">Atendimento ao Cliente</li>
<li class="itens">Espaço Diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
<li class="itens">Pontualidade</li>
<li class="itens">Limpeza</li>
</ul><img src="Imagens/beneficios.jpg" class="img_beneficios">
</div>
<div class="video">
<!--Link para Video-->
<iframe width="560" height="315" src="https://www.youtube.com/embed/wcVVXUV0YUY"
title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</section>
</main>
<footer>
<img src="Imagens/logo-branco.png">
<p class= "copyright">© Copyright Barbearia Alura - 2021</p>
</footer>
</body>main {
} eu deixei o main vazio igual na aula
Consegui resolver, minha solução para quem interessar, foi criar um arquivo CSS para cada página. Antes tudo estava dentro de um "style.css", agora tenho style_contato.css e style_produtos.css.
Olá, Felipe.
Também notei que após a alteração para responsivo, a página de Contato mudou a margem esquerda do formulário - main. Sua solução resolve, mas procurei manter um CSS no style.css, como o instrutor indicou e acabei acrescentando uma classe no
e alterando a margem esquerda da tabela e funcionou também. Assim, minha solução foi:I) acrescentei no contato.html;
<form class="formulario-contato">
II) No style.css acrescentei: 1) .formulario-contato { width: 940px; margin: 30px auto ; } 2) margem esquerda da tabela 160px: table { margin: 20px 160px 40px; }
Não consegui alterar incluindo uma classe da tabela, pois alterou a configuração da mesma.
Boa noite, amigo. A minha solução foi criar uma class para os main das outras páginas e adicionar no style css.
Por exemplo, criei a class <main class="main"> e adicionei ao style.css assim:
.main {
width: 940px;
margin: 0 auto;
}