Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Ao excluir a tag "main" a pagina de contato fica deslocada para a esquerda.

Notei que ao excluir a tag main a pagina do contato fica deslocada para a esquerda, percebi que no arquivo do css, ambas , a pagina do index(principal) e a pagina de contato usam a tag main .

Fiz o seguinte para resolver, como não sera aplicado Css na pagina principal , mas ela precisa da tag main , criei uma classe na pagina de contato e alterei no css, assim o problema foi resolvido.

Minha alteração na tag main do contato:

<main class="main-contato"> (tem muitos códigos...) </main>

Alteração no arquivo css:

.main-contato { 
    width: 940px;
    margin: 0 auto;
}

obs: parece que esse problema e comum , pesquisei o site barbearia alura no google e achei um site do projeto que na pagina de contato esta com o mesmo problema.

link do site: http://punkito.xyz/contato.html

Caso seja possível adicionar uma nota ou pop-up no vídeo para avisar aos alunos sobre esse detalhe (da tag main) , eu agradeceria muito.

3 respostas

Oi, Lucas, tudo bem?

Mas qual a intenção de retirar a tag main? ela é uma das tags mais importantes do projeto, ela define o conteúdo principal da pagina, sendo a única tag main do arquivo html. Desculpa se não consegui compreender bem a intenção da exclusão da tag.

Desculpa, acho que foi erro meu de comunicação .

Acho que caso a tag main tenha algum estilo no css , esse estilo sera aplicado para todas as paginas e tudo que tiver dentro da tag main , certo?

Então na aula o professor retira os valores da tag main pois parece que entrariam em conflito com o que ele estava fazendo, e deixa ela sem valores/codigos

No arquivo css , antes :

main { width: 940px;
    margin: 0 auto; }

depois:

main {  }

A tag "main" estava sendo usado para a pagina contato, mas ao mesmo tempo estava sendo usado na pagina inicial , durante a aula o professor retira os valores de dentro da tag main (deixando ela vazia) e redistribui eles em outras classes como .

principal {
    padding: 3em 0 ;
    background: #FEFEFE;
    width: 940px;
    margin: 0 auto;}
.mapa-conteudo {
    width: 940px;
    margin: 0 auto;}

Caso ele tenha corrigido isso nos videos depois dessa aula , me desculpe , eu ainda não assisti eles , so queria fazer essa sugestão de como corrigir o problema da pagina de contato que fica deslocada para a esquerda.

solução!

Também reparei esse detalhe quando naveguei nas outras paginas e percebi que na pagina principal, a section principal não estava ocupando 100% da largura da página, seguindo os modelos das sections mapa e beneficios.

Para padronizar e seguindo o que foi feito na aula, criei a classe no css:

.principal-conteudo {
    width: 940px;
    margin: 0 auto;
}

E na section principal da index.html, criei uma div usando a classe:

<section class="principal">
    <h2 class="titulo-principal">Sobre a Barbearia Alura</h2>

    <div class="principal-conteudo">
        <img src="img/utensilios.jpg" alt="utensilios" class="utensilios" />

        <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>Oferecemos 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>
    </div>
</section>

Agora sim, as 3 sections ocupam 100% da largura da página, com divs centralizadas de 940px para os seus conteúdos respectivos.

Valeu!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software