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

Tabela fora das margens em relação ao formulário

Bom dia. Já tentei de tudo, inclusive olhando as mesmas dúvidas no fórum. Mesmo antes de fazer o CSS na tabela, a mesma fica alinhada à esquerda ficando desalinhada em relação ao formulário. O meu reset.css vem antes do style.css. No css, tentei colocar td e th separados em tags diferentes. Tentei alterar a margem da tabela, mas não se altera. Apaguei e refiz novamente. O código está exatamente igual ao do professor. Fiz limpeza de cache. Não sei mais onde mexer. Alguma dica?

  <table>
                        <thead>
                          <tr>
                            <th>Dia</th>
                            <th>Horário</th>
                          </tr>
                        </thead>
                        <tbody> 
                          <tr>
                            <td>Segunda</td>
                            <td>8h ~ 20h</td>
                          </tr>
                          <tr>
                            <td>Quarta</td>
                            <td>8h ~ 20h</td>
                          </tr>
                          <tr>
                            <td>Sexta</td>
                            <td>8h ~ 20h</td>
                          </tr>
                        </tbody>  
                      </table>
     <head>
                    <meta charset="UTF-8" />
                    <title>Contato - Barbearia Alura</title>
                    <link rel="stylesheet" href="reset.css" />
                    <link rel="stylesheet" href="style.css" />
                  </head>
table {
  margin: 20px 0 40px;
}

thead {
  background: #555555;
  color: white;
  font-weight: bold;
}

td,
th {
  border: 1px solid #000000;
  padding: 8px 15px;
}
5 respostas

Olá Flavio, tudo bem?

Para que eu consiga visualizar melhor a sua página e te ajudar, vou pedir para que você coloque o HTML e CSS completo da página de contatos.

Além disso, peço que você também coloque aqui um print de como está sendo exibida a sua página aí.

Fico no aguardo, abraços!

solução!

Olá Flavio, tudo bem?

Obrigado pelo retorno :)

Temos dois pontos que precisamos discutir aqui, um de fato é o que está causando essa alteração na margem. Vamos lá!

Parte 1

Verificando o código disponibilizado, notei que no final do HTML as tags body e html são fechadas duas vezes, deixando o footer de fora do escopo (da linha 94 até a linha 102). Modificando, iremos excluir os dois primeiros fechamentos dessas tags.

Parte 2

Além disso, o que de fato está ocorrendo é que a margem da tabela não encontra-se alterada, mas sim a margem do form. Vamos analisar as propriedades que estão sendo aplicadas no form!

  form {
    margin: 40px;
  }

No modelo do projeto do curso, o margin do form se encontra da seguinte forma:

  form {
    margin: 40px 0;
  }

Resumo especificações dos valores do margin

  1. margin com 1 valor:

    • Aplica para todos os quatro lados.
  2. margin com 2 valores

    • 1º valor aplica no topo e inferior;
    • 2º valor aplica na direita e esquerda.
  3. margin com 3 valores:

    • 1º valor aplica no topo;
    • 2º valor aplica na direita e esquerda
    • 3º valor aplica no inferior.
  4. margin com 4 valores:

    • 1º valor aplica no topo;
    • 2º valor aplica na direita;
    • 3º valor aplica no inferior;
    • 4º valor aplica na esquerda.

Dessa forma, quando foi especificado apenas um valor no margin, foi gerado no lado esquerdo do form um espaço extra que não existe na tabela.

É possível visualizarmos melhor na imagem a seguir:

Insira aqui a descrição dessa imagem para ajudar na acessibilidadePara resolvermos isso, especificaremos assim como no curso, o margin: 40px 0; no form. A partir disso, estamos informando o navegador para criar uma margem superior e inferior de 40px e sem nenhuma margem do lado direito e esquerdo.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Abraços e bons estudos!

Bom dia Bia.

Parte 1: Fechado somente uma vez e com o footer dentro do html.

    <footer>
      <img src="logo-branco.png" />
      <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
    </footer>
  </body>
</html>

Parte 2: entendi que se não coloco nada, o padrão é zero, não havendo necessidade de colocar algum valor. De qualquer maneira, alterei e resolveu, obrigado.

Olá Flavio, tudo bem?

Fico feliz que funcionou!

Só será 0 quando não especificamos nenhum valor para o margin, a partir do momento que colocamos 1 valor, é necessário se orientar conforme o resumo da especificações que deixei acima.

Você pode sempre usar esse resumo para consulta :)

Caso queira saber um pouco mais sobre isso, segue a documentação do margin.

Caso tenha mais alguma dúvida, estou por aqui.

Espero ter ajudado, abraços!