Main da página criada fica dentro do header | HTML5 e CSS3 parte 4: avançando no CSS

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Próximos passos

por Anderson Ferreira Pinto

| 91.9k xp | 62 posts

PROGRAMADOR JUNIOR

Olá. Como primeiro projeto, estou recriando uma página que havia feito no wix.

Consegui ir bem, porém, depois de criar o header e o footer, o main não fica no meio e eu acabei me perdendo com a movimentação dos elementos. Alguém pode me ajudar?

https://github.com/andmennos/Projeto-Alura-html.git

Vou deixar o código abaixo:

<!DOCTYPE html>

<html lang="pt-br">

    <head>

        <meta charset="UTF-8">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style_andsburguer.css">
        <link href="https://fonts.googleapis.com/css2?family=Corben&display=swap" rel="stylesheet">
        <title>AND'S | Hamburgueria Delivery</title>

    </head>

    <body>

        <header>

            <div class="cabecalho">

                <h1>Faça seu Pedido</h1>

                    <div class="borda-linha">

                    </div>

                <h2>And's</h2>

            </div>

            <img class="banner" src="banner.png" alt="Banner imagem de 3 hambúrgueres">

            <div class="linha-pontilhada">
            </div>

            <div class="caixa-menu">

                <nav class="menu">

                    <ul>

                        <li><a id="hamburguer-menu" href="index_andsburguer.html">HAMBÚRGUERES</a></li>
                        <li><a id="pedido-menu" href="realizar_pedido.html">FAZER PEDIDO</a></li>
                        <li><a id="contato-menu" href="contato.html">CONTATO</a></li>

                    </ul>

                </nav>

            </div>

        </header>

        <main>

            <div class="cardapio">

                <nav>

                    <ul>

                        <li><a href="honesto-burguer.html">HONESTO BURGUER</a></li>
                        <li><a href="melaco-burger.html">MELAÇO BURGUER</a></li>
                        <li><a href="veggie-burguer.html">VEGGIE BURGUER</a></li>

                    </ul>

                </nav>

            </div>


        </main>

        <footer>

            <div class="endereco">

                <p>Endereço</p>
                <p>Rua Manoel Ramos Paiva, São Paulo-SP</p>
                <p>CEP: 03021-060</p>
                <p>Cel.: 11 9 6204-3385</p>

            </div>

            <div class ="tabela-horario">

                <table>

                    <thead>

                        <tr>
                            <th colspan="3">Horário de funcionamento</th>
                        </tr>

                        <tr>
                            <th colspan="3">Quinta a Domingo</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr>
                            <td>Dia</td>
                            <td>Noite</td>
                        </tr>

                        <tr>
                            <td>10h00 ~ 14h00</td>
                            <td>17h00 ~ 00h00</td>
                        </tr>

                    </tbody>

                </table>

            </div>

            <div class="copyright">

                <p>© Copyright - AND'S | since 2020.</p>
                <p>CNPJ: 37.655.582/0001-54</p>
                <p>Tempo estimado de entrega: 40 minutos.</p>

            </div>

        </footer>

    </body>

</html>

2 respostas

por Anderson Ferreira Pinto

| 91.9k xp | 62 posts

PROGRAMADOR JUNIOR

13/05/2021

css:

body {
    width:100%;
    background-image:url("backgroundEditado.jpg");

}

header {
    padding:20px 0;
}

.cabecalho {
    z-index:1;
    position:relative;
    width:100%;
    margin:0 auto;
}

h1 {
    text-align: center;
    font-family: "Corben", cursive;
    color: #9AAFAF;
    font-size:22px;
    letter-spacing: 0.7em;
    margin:80px 0 10px 0;

}

.borda-linha {    
    display:block;
    margin: 0 auto;
    border-bottom:solid;
    border-bottom-width:1px;
    width:50%;
    border-color: #9AAFAF;

}

h2 {
    text-align: center;
    font-size: 60px;
    font-weight:bold;
    letter-spacing: 0.4em;
    font-family: "lucida sans unicode", cursive;
    text-transform:uppercase;
    color:#9AAFAF;
    margin: 60px auto;
}

.banner {
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    top: 15%;
}

.linha-pontilhada {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:52%;
    border-bottom:dashed;
    border-bottom-width:1px;
    width:70%;
    border-color: #9AAFAF;
}

.caixa-menu {
    position:relative;
    width:100%;
    margin:0 auto;
}

.menu {
    position:absolute;
    right:50%;
    transform:translateX(45%);
    top: 4.5em;

}

.menu li {
    display:inline;
    margin:0 0 0 20px;
}

.menu a {
    color:#F7F7F7;
    font-size:16px;
    background:#808080;
    padding:3px 20px 3px 20px;
    border-color:#A2A2A2;
    border-style: solid;
    border-bottom-width:3px;
    border-left:none;
    border-right:none;
    border-radius:0 50px 50px 0;
    text-decoration:none;
}

#contato-menu {
    padding:3px 50.5px 3px 50.5px;
}

#pedido-menu {
    padding:3px 30.5px 3px 30.5px;
}

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

.cardapio li {
    display:inline;

}



footer {
    width:100%;
    position:absolute;
    bottom:0;
    background-color: rgba(255, 255, 255, 0.2);
    color:#C5D7D7;
    padding: 40px;

}

.endereco > p:first-child {
    text-transform: uppercase;
}

.endereco {
    line-height: 1.2;
    padding:10px 0 10px 0;
    width:13%;
    border-right-style:solid;
    border-right-color:#C5D7D7;
    border-right-width:1.5px;
    color:#C5D7D7;

}

.tabela-horario {
    position:absolute;
    left:15%;
    bottom:20%;
    margin:0 0 0 30px;
    line-height: 1.1;
    padding:8px 4px 8px 0;
    border-right-style:solid;
    border-right-color:#C5D7D7;
    border-right-width:1.5px;
    color:#C5D7D7;
    text-align:center;

}

tr > th {

    padding-bottom:5px;
    text-transform:uppercase;
}


td:first-child {
    padding:5px;
    border-right: 1px solid #C5D7D7;
}

.copyright {
    position:absolute;
    right:10%;
    bottom:22%;
    line-height: 1.5;
}

solução!

por Anderson Ferreira Pinto

| 91.9k xp | 62 posts

PROGRAMADOR JUNIOR

13/05/2021

Boa tarde!

Consegui arrumar!

O problema estava acontecendo, pois eu havia deixado o footer e alguns outros elementos como absolute e me embananei com as posições.

Também estava com problema na imagem de fundo, que não estava se adaptando.

As alterações que fiz foram todas no css, deixarei o post aberto caso tenham alguma dica de melhoria, ou solução de outros possíveis problemas que já estou enfrentando (resolve um aparece outro rs).

Segue abaixo novo código:

body {
    background-image: url("backgroundEditado.jpg");
    background-size: 100%;

}

header {
    height:400px;
    padding:20px 0;
}

.cabecalho {
    position:relative;
    width:100%;
    margin:0 auto;
    z-index:1;
}

h1 {
    text-align: center;
    font-family: "Corben", cursive;
    color: #9AAFAF;
    font-size:22px;
    letter-spacing: 0.7em;
    margin:80px 0 10px 0;

}

.borda-linha {    
    display:block;
    margin: 0 auto;
    border-bottom:solid;
    border-bottom-width:1px;
    width:50%;
    border-color: #9AAFAF;

}

h2 {
    text-align: center;
    font-size: 60px;
    font-weight:bold;
    letter-spacing: 0.4em;
    font-family: "lucida sans unicode", cursive;
    text-transform:uppercase;
    color:#9AAFAF;
    margin: 60px auto;
}

.banner {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:20%;    
}

.linha-pontilhada {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:52%;
    border-bottom:dashed;
    border-bottom-width:1px;
    width:70%;
    border-color: #9AAFAF;
}

.caixa-menu {
    position:relative;
    width: 100%;
    text-align: center;
    top:80px;
}

.menu li {
    display:inline;
    margin:0 0 0 20px;
}

.menu a {
    color:#F7F7F7;
    font-size:16px;
    background:#808080;
    padding:3px 20px 3px 20px;
    border-color:#A2A2A2;
    border-style: solid;
    border-bottom-width:3px;
    border-left:none;
    border-right:none;
    border-radius:0 50px 50px 0;
    text-decoration:none;
}

#contato-menu {
    padding:3px 50.5px 3px 50.5px;
}

#pedido-menu {
    padding:3px 30.5px 3px 30.5px;
}

.cardapio li {
    margin: 20px;
}

footer {
    height:100%;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    color:#C5D7D7;
}

.endereco > p:first-child {
    text-transform: uppercase;
}

.endereco {
    display:inline-block;
    width:190px;
    vertical-align: top;
    line-height: 1.2;
    border-right-style:solid;
    border-right-color:#C5D7D7;
    border-right-width:1.5px;

}

.tabela-horario {
    width:260px;
    display:inline-block;
    vertical-align: top;
    margin-left:30px;
    line-height: 1;
    border-right-style:solid;
    border-right-color:#C5D7D7;
    border-right-width:1.5px;
    color:#C5D7D7;
    text-align:center;

}

tr > th {

    padding-bottom:5px;
    text-transform:uppercase;
}


td:first-child {
    padding:5px;
    border-right: 1px solid #C5D7D7;
}

.copyright {
    display:inline-block;
    position:absolute;
    right:0;
    margin:0 20px 0 20px;
    line-height: 1.5;
}

Mergulhe em programação