CSS Posicionamento de rodapé e menu (iniciante)

Rubyzinha · 9 de junho de 2020

Oi pessoal,

Eu não sou programadora, comecei a ler algumas coisas sobre html e css há alguns dias e agora estou tentando mexer aos poucos para ver se consigo criar alguma coisa na prática. Então desde já me desculpem se a minha pergunta não fizer sentido, ou algo do tipo...

Eu estou tentando tentar deixar um layout do jeito que está na figura anexa, mas não estou conseguindo. Não sei se consigo explicar. Queria que a header, coluna principal e coluna auxiliar, ficassem centralizadas na página, mas queria que o menu e o rodapé ficassem do jeito que está no anexo. Não estou usando background image no menu e nem no rodapé... Alguém teria algum tutorial, ou sabe onde posso encontrar um tutorial para fazer isso?

GabrielSennaMs · 9 de junho de 2020

@Rubyzinha Bom o melhor site para apreder WEB online é o da W3Schools: https://www.w3schools.com/, o site é totalmete gratuito! Ele conta com uma página chamada de "How to(Como)" que conta com uma lista grande de tutoriais de como fazer componetes da página entre outras coisas.

https://www.w3schools.com/howto/howto_css_zig_zag_layout.asp Link do tutorial do modelo de layout zig zag.

Luís Roberto C. da Silva · 10 de junho de 2020

@Rubyzinha Para posicionar o head você escreve o css de sua div com top=0, já o rodapé faz com bottom=0.

Rubyzinha · 12 de junho de 2020

Em 09/06/2020 às 08:59, GabrielSennaMs disse:

@Rubyzinha Bom o melhor site para apreder WEB online é o da W3Schools: https://www.w3schools.com/, o site é totalmete gratuito! Ele conta com uma página chamada de "How to(Como)" que conta com uma lista grande de tutoriais de como fazer componetes da página entre outras coisas.

https://www.w3schools.com/howto/howto_css_zig_zag_layout.asp Link do tutorial do modelo de layout zig zag.

Obrigada pela dica!

Em 10/06/2020 às 10:34, Luís Roberto C. da Silva disse:

@Rubyzinha Para posicionar o head você escreve o css de sua div com top=0, já o rodapé faz com bottom=0.

Obrigada, vou tentar.

WilliamNascimento · 16 de junho de 2020

nao entendi muito bem , mas se for o que eu estou pensando crie a divisao e declare com margin 0 auto , e o conteudo ficara centralizado

Cordas · 19 de junho de 2020

Conseguiu uma solução? @Rubyzinha

Se sim, que bom. Se não, você pode tentar assim que seria uma das maneiras:

O HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Posicionamento</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <header>
        <nav>
            <ul>
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
        <a href="#">Link 4</a>
        <a href="#">Link 5</a>
        </ul>
        </nav>
        </header>
        <main>
        <div class="header">
            </div>
            <div class="meio">
            <div class="colunaprincipal"></div>
            <div class="colunaauxiliar"></div>
                </div>
        </main>
        <footer></footer>
    </body>
</html>

O CSS:

*{
    margin: 0;
    padding: 0;
}
html{
  background: none;
    overflow-x: hidden;
}
header{
    width: 100%;
    height: auto;
    border: 1px solid black;
}
nav{
    padding: 3vh;
    text-align: center;
}
nav a{
    text-decoration: none;
}
nav a~a{
    padding-left: 5vw;
}
main{
    width: 100%;
    height: auto;
}
main .header{
    margin: auto;
    width: 75%;
    height: 20vh;
    border: 1px solid black;
}
main .meio{
    display: flex;
    justify-content: center;
    widows: 75%;
}
main .colunaprincipal{
    width: 45%;
    height: 80vh;
    border: 1px solid orange;
}
main .colunaauxiliar{
    width: 30%;
    height: 80vh;
    border: 1px solid purple;
}
footer{
    width: 100%;
    height: 20vh;
    border: 1px solid green;
}