Ir ao conteúdo
  • Cadastre-se
Rubyzinha

CSS Posicionamento de rodapé e menu (iniciante)

Posts recomendados

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?

exemplo.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;
}

Essa não é a única maneira. Existem outras. 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Usar framework é um mecanismo de fuga.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!