6

- 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:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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>

1

2 Respostas 2

3

Como o amigo disse a cima os elementos são renderizados na ordem de escrita do código HTML. Eu usei o Flexbox pra soluciona o seu "problema". O Flexbox é uma forma criar layouts que não precisam depender da marcação HTML.

Eu usei a propriedade order(do Flexbox) na classe .botão e na classe .coluna. "A propriedade order determina a ordem em que os itens são exibidos no container.", então defini order: 1 pro menu, já que vc quer eles no topo e order: 2 pra colunas para elas ficarem abaixo do menu.

Pra saber mais sobre o Flexbox de uma olhada nos links abaixo.

  1. Flexbox
  2. Guia visual para o Flexbox

/* 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;
    order: 2;
}

/* BOTÕES */
.botao {
    width: 19em;
    border-radius: 10px;
    height: 3.4em;
    margin: 0 0.25em;
    background-color: tan;
    order: 1;
}
<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>

1

Entenda o comportamento do posicionamento dos elementos, por padrão eles vão seguir as mesmas direções da escrita, da esquerda para a direita, e quando chegar no limite volta para o inicio.

Observe a ordem dos seus elementos:

#botao #coluna #botao #coluna

Deveria ser:

#botao #botao #coluna #coluna

Após isso, defina um width para seu #container de forma a comportar 3 colunas lado a lado (57em, já que cada coluna possui 19em). Você já vai alcançar o resultado esperado assim.

#cabecalho {
    background-color: white;
    height: 11em;
    width: 100%;
}
#cabecalho > p {
    text-align: center;
    padding-top: 5em;
}
#container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    background: red;
    width: 57em;
}
.coluna {
    width: 19em;
    height: 33em;
    background-color: lightblue;
    border-radius: 10px;
}
.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="botao centralbotao">Menu</section>
        <section class="botao direitabotao">Menu</section>

        <section class="coluna esquerdacoluna">
            <p>Olá, aqui será feito os testes de escritas para o layout</p>
        </section>

        <section class="coluna centralcoluna">
            <p>Olá, aqui será feito os testes de escritas para o layout</p>
        </section>

        <section class="coluna direitacoluna">
            <p>Olá, aqui será feito os testes de escritas para o layout</p>
        </section>
    </div>
</body>
</html>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .