Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

O corpo da página esta ficando sobre o rodapé... O que estou fazendo de errado?

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title> DioMio </title>

        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" href="restaurante.css">
        <body>
            <header>
                <div>
                    <h1>Restaurante DioMio</h1>
                    <p class="subtitulo">Comida vegetariana de qualidade</p>
                    <nav>
                        <ul>
                            <li><a href="inicio.htm">Início</a></li>
                            <li><a href="contato.htm">Contato</a></li>
                            <li><a href="receitas">Receitas</a></li>
                        </ul>
                    </nav>
                </div>
                </header>
            <main>
                <div>
                    <img class="banner" src="https://media.istockphoto.com/photos/bowl-dish-with-brown-rice-cucumber-tomato-green-peas-red-cabbage-picture-id1047798504?k=20&m=1047798504&s=612x612&w=0&h=sXUN01Y_SuuTnHlgtAhnZEJmb_4blMk7bYWhyhNCNPI=">

                    <p class="nos">Fundado em 28 de setembro de 2004 o restaurante <strong>DioMio</strong> tem a missão de levar aos seus clientes muito mais do que somente uma refeição e sim uma <strong>experiencia gastronomica de qualidade</strong> com um ambiente aconchegante, perfeito para ser o palco da sua vida. 
                        <br> 
                        <br>
                        Acreditamos que podemos nos alimentar muito bem sem prejudicar nenhum ser vivo e nem o meio ambiente, por isso <strong>nosso cardápio é 100% vegetariado</strong>, cheio de sabor e sem crueldade. Também disponibilizamos algumas das nossas receitas, para que nossos clientes possam também se aventurar na cozinha com nossas melhores receitas. Confira as receitas aqui.
                        <br> 
                        <br> 
                        Com mais de 30 pratos, nosso cardápio esta repleto de refeições das mais simples até as mais sofisticadas, todas planejadas por uma equipe de nutricionistas com <strong>foco em proporcionar uma alimentação completa e deliciosa
                        </strong>.
                    </p>
                </div>
            </main>

            <footer>
                <p class="copyright"> &copy; Copyright Restaurante DioMio – 2019 </p>
            </footer>    
        </body>
        </html>

CSS:

body {
    background: #233342;
}
h1 {
    text-align: center;
    color: #FFFFFF;
    font-size: 50PX;
}
.subtitulo {
    color: #ffffff;
    text-align: center;
}
nav {
    position: absolute;
    top: 110px;
    right: 543px;
}

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

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

nav a:hover{
        color: #45a350;
}

.banner {
    display: inline-block;
    top: 200px;
    margin-left: 30px;
    width: 55%;
    height: 500px;
    position: relative;
}
.nos {
    color: #FFFFFF;
    font-style: italic;
    text-align: center;
    font-size: 22px;
    width: 35%;
    position: absolute;
    top: 300px;
    right: 65px;
}

footer {
   text-align: center;
    background: url("bg.jpg");
    padding: 40px 0;
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 20px;
}
1 resposta
solução!

Olá, Diovana. Como vai?

O footer aparenta estar no meio da tag main, porém se você conferir sua posição utilizando a ferramenta inspecionar do navegador, irá reparar que ele se encontra na realidade logo após o espaçamento da tag main e não dentro dela, a imagem e o texto ao lado que estão sobrepondo o espaço da tag main, por causa do position absolute na classe .nos, e assim ficando por cima do footer.

Se você colocar margin-top: 350px(esse espaçamento será aplicado pegando o fim do espaço da tag main como referência), ele vai ficar abaixo do texto e imagem como desejado.

Achei esse vídeo bem legal que explica sobre positions aqui e pode ajudar em sua dúvida. Ele é de nossa colega de equipe aqui da Alura.

Outro detalhe também, a tag head não foi fechada </head> antes do início do body.

Consegui ajudar em sua dúvida? Espero que sim.

Bons estudos! =D