Solucionado (ver solução)
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!!