- Sou extremamente novato no assunto e não conheço muita coisa, estou indo a partir de pesquisas na internet, videos e leituras, digo isso pra caso houver algum código ou regra desnecessário nas minhas dúvidas
Gostaria de uma ajuda nessa situação:
Estou treinando uns layout para um website aonde esbocei no illustrator:
Quando fui começar a passar isso pra um html e css eu obtive problemas de alinhar todos os divs um em cima do outro.
Quando em tela pequena os divs se alinham, mas quando estico a tela do navegador cada um segue uma regra diferente.
Tive que juntar as duas imagens para postar, separadas pela barra vermelha:
Bom, a dúvida é a seguinte, Como faço para deixar alinhado esses divs ?
No meio do projeto fiquei me questionando se esse é o melhor caminho para desenhar esse layout. Os banners marrons são apenas para por um identificador com um icone e gerar link como por exemplo Contato, Sobre, portfólio, coisas assim.
Quando coloquei uma div dentro da outra, no caso, os botões marrons dentro da coluna azul, funcionou, mas eu realmente gostaria desse espaçado entre eles, efeito que não consegui fazer com uma div dentro da outra.
Uma pergunta bonus, tentei fazer com que o meu " Container " ficasse igual a imagem do rascunho, aonde o topo dele não fica no tamanho 100% deixando os botões acima dele. Quando fiz isso deu tudo errado, cheguei proximo utilizando as regras position mas quando eu diminuia a tela do navegador os botões entravam dentro das outras divs, tentei fazer por float e não me dei bem, as regras não respondiam nada.
Agradeço desde já!
/* Estilo das colunas */
/* CABEÇALHO */
#cabecalho {
background-color: white;
height: 11em;
width: 100%;
}
#cabecalho > p {
text-align: center;
padding-top: 5em;
}
/* CONTAINER */
#container {
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
/* COLUNAS */
.coluna {
margin: 4px;
width: 19em;
height: 33em;
background-color: lightblue;
border-radius: 10px;
}
/* BOTÕES */
.botao {
width: 19em;
border-radius: 10px;
height: 3.4em;
background-color: tan;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Layout Menu.</title>
<link rel="stylesheet" href="estilo.css">
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<header id="cabecalho">
<P> LOGO </P>
</header>
<div id="container">
<section class="botao esquerdabotao">Menu</section>
<section class="coluna esquerdacoluna">
<p> Olá, aqui será feito os testes de escritas para o layout </p>
</section>
<section class="botao centralbotao">Menu</section>
<section class="coluna centralcoluna">
<p> Olá, aqui será feito os testes de escritas para o layout </p>
</section>
<section class="botao direitabotao">Menu</section>
<section class="coluna direitacoluna">
<p> Olá, aqui será feito os testes de escritas para o layout </p>
</section>
</div>
</body>
</html>