Layouts de site de coluna única simples em CSS

Nesta lição, vamos praticar a criação de layouts de site de coluna única simples. Vamos, por exemplo, fazer um layout como este:

Vamos começar a implementação. Cada layout geralmente começa com uma div geral chamada wrapper, contendo todo o resto do site:

html<div id="wrapper">
  
</div>

No nosso caso, o wrapper será centralizado na tela:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

Ele também terá uma borda:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

Agora vamos fazer a estrutura principal da página. Ela consistirá em um menu e o conteúdo principal:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

Vamos adicionar o conteúdo dos nossos blocos:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

Agora podemos adicionar estilos aos nossos blocos. Vamos adicionar estilo ao menu:

css#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

E agora vamos adicionar estilos aos elementos de conteúdo:

css#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Agora podemos juntar todo o código:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Dica 1

É mais conveniente definir margens de cima para baixo. Por exemplo, temos um menu e um conteúdo, e entre eles - um espaço vazio. Obviamente, esse espaço pode ser feito pela margem inferior do menu, pela margem superior do conteúdo, ou pela influência simultânea de ambos. Neste caso, é melhor definir a margem inferior para o menu, e remover o padding e margin superior padrão do h1 no conteúdo.

Dica 2

Elementos filhos não devem formar margem entre os pais. Por exemplo, temos um menu. A margem inferior deste menu pode ser formada ou pelo margin da div do menu, ou pelo margin dos links. É melhor escolher a primeira opção, pois os links não devem agir "por cima da cabeça" do elemento pai.

Dica 3

Suponha que haja um espaço entre dois elementos e, neste caso, visualmente não há diferença no que escolher para o espaço - margin ou padding. Neste caso, escolha margin, pois é ele que deve criar espaços entre elementos.

Exercícios Práticos