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 (ver solução)
Solucionado
(ver solução)
6
respostas
respostas
O main das outras páginas ficou afetado.
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
solução!
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;
}