Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
21
respostas

minha página está diferente!

olá, no curso HTML e CSS parte 3, na aula "começando a página de contato", ao copiar o início do código até o fechamento do header, e copiando do footer até o final na página de produtos para colar na página contatos, quando o professor faz isso, o cabeçalho e o rodapé dele se ajustam dividindo a página de cima a baixo, como mostra no minuto 2:00 https://cursos.alura.com.br/course/html5-css3-formularios-tabelas/task/60669 , mas no meu fica sobrando um espaço em baixo, como se fosse o espaço do rodapé, como mostro na imagem em anexo.!!página diferente(https://cdn1.gnarususercontent.com.br/1/866165/212abc0b-94aa-4da0-9dd0-4541034db859.png)

21 respostas
solução!

Alexandre, Creio que essa diferença entre o que você vê em sua tela e o que aparece na tela do professor é devido a resolução das telas serem diferentes. A sua tela está utilizando uma resolução maior que a tela do professor, consequentemente há mais espaço disponível em sua tela que na dele, e esse espaço a mais, como não está sendo ocupado pela página HTML, aparece na parte inferior da janela do seu navegador, logo após a exibição de todo conteúdo HTML. À medida que novos conteúdos forem sendo introduzidos no arquivo HTML, esse espaço disponível irá sendo reduzido (ocupado) e o rodapé irá se aproximar cada vez mais do final da janela do seu navegador, até alcançá-lo ou ultrapassá-lo (ocasião em que será necessário rolar a tela para chegar ao final da página HTML). Na sequência do vídeo, quando o professor cria a tag "main" e insere o texto "Teste", o comportamento que você obtém é semelhante ao dele? Se sim, então está tudo correto, siga com a implementação e esse espaço será ocupado pelos novos conteúdos . Se não, então, poste o código HTML para análise.

Oi Alexandre. Tudo bem? Você conseguiu resolver? Manda o código que damos uma olhadinha.

Olha, realmente não consegui identificar e isso está me impedindo de continuar o curso, se puder me ajudar... desde já agradeço muito!segue o html e o Css da página de produtos, e por último o html dos contatos. Outra coisa que estranhei até aqui é que não tem uma página Css pros contatos,assim como tem pros produtos, não sei se é por isso.

produtos html

`

  • cabelo

    Na tesoura ou máquina, como o cliente preferir

    R$25,00

  • Barba

    Corte e desenho profissional de barba

    R$18,00

  • cabelo+barba

    Pacote completo de barba e cabelo

    R$35,00

<footer>
    <img src="logo-branco.png">
    <p class="copyright">© Copyright Barbearia Alura - 2019
</footer>

` produtos css header { background: #BBBBBB; padding: 20px 0; }

.caixa { position: relative; width: 940px; margin: 0 auto; }

nav { position: absolute; top: 110px; right: 0 }

nav li { display: inline; margin: 0 0 0 15px; }

nav a { text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover { color: #C78C19; text-decoration: underline; }

.produtos { width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li { display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; padding: 30px 20px; box-sizing: border-box; border: 2px solid #000000; border-radius: 10px; }

.produtos li:hover { border-color: #C78C19; }

.produtos li:active { border-color: #088C19; }

.produtos li:hover h2 { font-size: 34px; }

.produtos h2 { font-size: 30px; font-weight: bold; }

.produto-descricao { font-size: 18px; }

.produto-preco { font-size: 22px; font-weight: bold; margin: 10px 0 0; }

footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }

.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }

contatos.html

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

Oi Alexandre. É o mesmo erro que persiste? Na sua primeira pergunta você dizia que o proeblema era na página de contato e os prints direcionavam para Lá. Mas nessa informação que você colocou agora tem os valores e os valores devem estar na página de produto.

Você pode verificar se está colocando as informações nas páginas certinhas? É preciso criar 3 páginas (arquivos) html, uma index, que é a principal, uma de contato e uma de produto.

O problema está na página de contato. Segue print abaixo de como está a pasta do projeto:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Abre esse arquivo do contato.html e cola o código aqui, por favor. Esse aqui é o meu código do html. Mas eu já terminei esse curso. Então, está mais completo. Manda o teu que eu comparo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contatos - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css"><!--*primeiro resetamos para depois colocar os outros 
            estilos-->
        <link rel="stylesheet" href="style.css">

    </head>
        <body>
            <header>
                <div class="caixa">
                    <h1><img src="logo.png" alt="Logo da Barbearia Alura"></h1> <!--imagem principal da página--><!--alt vem de alternativo, usamos nas imagens como informação adicional auxiliares para cegos-->

                    <nav>
                        <ul>
                            <li><a href="index.html">Home</a></li> <!--A tag <a> serve como uma âncora, um link, que leva para outro ponto na internet.-->
                            <li><a href="produtos.html">Produtos</a></li>
                            <li><a href="contato.html">Contatos</a></li>
                        </ul>
                    </nav>
                </div>
            </header>
            <main>
                <form>
                    <label for="nomesobrenome">Nome e Sobrenome</label> <!--label e input andam juntos-->
                    <input type="text" id="nomesobrenome" class="input-padrao" required><!--required para preenchimento obrigatório-->

                    <label for="email">Email</label> <!--label faz o pedido para o usuário-->
                    <input type="email" id="email" required placeholder="seuemail@dominio.com"> <!--input recebe a informação-->

                    <label for="telefone">Telefone</label> 
                    <input type="tel" id="telefone" class="input-padrao" required placeholder="(XX) XXXXX-XXXX">

                    <label for="mensagem">Mensagem</label>
                    <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required></textarea>

                    <fieldset>
                        <legend>Como prefere o nosso contato?</legend>
                        <label for="radio-email"><input type="radio" name="contato" value="email" id="radio-email">Email</label>


                        <label for="radio-telefone"><input type="radio" name="contato" value="email" id="radio-telefone">Telefone</label>


                        <label for="radio-whatsapp"><input type="radio" name="contato" value="email" id="radio-whatsapp" checked>Whatsapp</label><!--para já deixar marcado o box do zap no navegador-->

                    </fieldset>
                    <fieldset>
                        <legend>Qual horário prefere ser atendido?</legend> <!--Usamos a tag <legend> para um título de um grupo de campos em qualquer formulário.-->
                        <select> <!--A estrutura da tag <select> é composta de um ou mais <option>.-->
                            <option>Manhã</option> <!--a tag <option> serve para criarmos os itens selecionáveis de um <select>-->
                            <option>Tarde</option>
                            <option>Noite</option>
                        </select>
                    </fieldset>
                    <label class checkbox><input type="checkbox" checked>Gostaria de receber nossas novidades por email?</label>
                    <input type="submit" value="Enviar formulário" class="enviar">
                </form>
                <table> <!--a tag <table> cria uma tabela-->
                    <thead><!--para o cabeçalho da tabela-->
                        <tr> <!--a tag <tr> marca uma linha de uma tabela-->
                            <th>Dia</th> <!--a tag <td> marca uma coluna de uma tabela especifica para o <thead>-->
                            <th>Horário</th>
                        </tr>
                    </thead>
                    <tbody><!--para o corpo da tabela-->
                        <tr>
                            <td>Segunda</td><!--a tag <td> marca uma coluna de uma tabela-->
                            <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>
            </main>
            <footer>
                <img src="logo-branco.png" alt="Logo da Barbearia Alura">
                <p class="copyright">&copy; Copyright Barbearia Alura - 2019</p>
            </footer>
        </body>

</html>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Contato - Barbearia Alura</title>
    <link rel="stylesheet" href="resetCSS.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>

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

</html>

Alexandre, o seu link pro reset.css está dizendo css duas vezes: . O certo é

<link rel="stylesheet" href="reset.css">

Veja se resolve com esta alteração, por favor.

É pq realmente o nome do arquivo de reset está assim, aí eu chamei como ele está. Tanto que tentei usar sua sugestão mas ai desconfigurou ficando "bagunçado"sem o reset. :(

Falta o fechamento da tag p dentro do

`<footer>
    <img src="logo-branco.png">
    <p class="copyright">© Copyright Barbearia Alura - 2019      //AQUI
</footer>`

Verifique como está salvo o arquivo do reset.css no seu computador. Se estiver daquele jeito mesmo, não precisa mudar. Mas na aula o professor salvou como reset.css. Verifica direitinho, por favor. print arquivo reset.css

Verifique também a falta do fechamento da tag p no footer.

Alexandre, eu verifiquei que no seu código HTML ainda consta: Repare que o professor faz a alteração do nome desse arquivo para style.css Veja se o nome está certinho no computador.

Trecho da aula. [03:18] Só que nós já temos um arquivo Style que é o arquivo da página inicial. Agora, o que vamos fazer? Se eu clicar com o botão direito aqui em Style, eu posso renomear ele, e aí eu vou colocar “style-home.css”. No “produtos.css” eu, vou alterar de “produtos” para “style”. E na minha página de contato, posso chamar isso simplesmente de “style.css”.

[03:49] Só que eu preciso alterar nos meus outros HTML também. Então no “produtos” eu vou trocar para “style.css”. E na página inicial, ao invés do “style”, eu vou ter “style-home.css”. Isso é a primeira coisa que nós precisamos para ter o nosso código organizado e começar a escrever código.

renomeei o arquivo reset, alterei a forma de chamar os arquivos, também verifiquei o fechamento do parágrafo, mas não foi.

:(

pse, Gabriela, mas esse erro acontece antes, no minuto 02:00. Eu fiz esse passo do minuto 03:49, mas não alterou nada.

Alexandre, vamos pro arquivo css: falta fechar com ponto e virgula depois desse 0:

nav { position: absolute; top: 110px; right: 0 }

O seu código do css termina antes de começarmos a editar a página de contato. Insere esse código abaixo no final do seu código de css. Tenta incluir esta parte do código para ver se dá certo:

/* Página de contato */
.contato {
    width: 940px;
    margin: 40px auto;
}

.contato label, .input-group legend {
    display: block;
    margin: 0 0 5px;
    font-size: 20px;
}

.campo-padrao, textarea {
    display: block;
    margin: 0 0 30px;
    padding: 10px 20px;
    width: 50%;
    border: 1px solid #aaa;
}

.input-group {
    margin: 0 0 20px;
}

.newsletter {
    margin: 0 0 20px;
}

.botao {
    margin: 20px 0 0;
    width: 30%;
    padding: 10px 20px;
    font-size: 24px;
    display: inline-block;
    background: orange;
    color: white;
    border: none;
    border-radius: 5px;
    transition: 1s;
}

.botao:hover {
    cursor: pointer;
    transform: scale(1.2);    
}

.funcionamento {
    width: 940px;
    margin: 0 auto 40px;
}

table {
    margin: 10px 0 0;
}

th  {
    background: #777777;
    color: #FFFFFF;
}


td, th {
    border: 1px solid #000000;
    padding: 5px 20px;
}

Então, Gabriela, no caso esse passo que disse pra eu fazer está a um vídeo a frente de onde ocorre o problema. Eu copiei os códigos do projeto das aulas anteriores e não surtiu efeito em minha página, estou achando que é um problema de resolução, como um colega sugeriu nesse tópico.Irei sim seguir sua orientação anterior, mas vou assistir a aula primeiro pra não me embananar kkk , e depois informo aqui se resolveu. Desde já, muitíssimo obrigado por suas dicas e paciência.

:)

Sem problemas. Como eu já terminei o curso e não tive esse problema. Peguei o código na aula que você mandou. Fui lá e só tem esse, não há o código anterior para comparar.

O menino acima pediu para você ver o seguinte: "quando o professor cria a tag "main" e insere o texto "Teste", o comportamento que você obtém é semelhante ao dele? Se sim, então está tudo correto...."

Você chegou a ver? Deu certo? Porque haviam alguns erros nos códigos que podem influenciar.

De resto, é o que ele disse mesmo, não se prenda tanto a exatidão do que ele mostra, analisa o comportamento e se está tudo bem alinhadinho: nome dos arquivos no pc, sequencia de códigos, uma simples virgula a mais ou a menos, pode fazer dar erro.

Bons Estudos.

Sim, eu fiz o que ele disse, e aparece exatamente igual ao código do professor, com excessão de que abaixo do meu rodapé fica um espaço até o fim da página.Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Realmente o problema era na resolução. quando passei a imagem pra TV ela apareceu exatamente como a do professor. Obrigado, Kérides e Gabriela!!