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:
<div id="wrapper">
</div>
No nosso caso, o wrapper será centralizado na tela:
#wrapper {
width: 800px;
margin: 50px auto;
}
Ele também terá uma borda:
#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:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Vamos adicionar o conteúdo dos nossos blocos:
<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:
#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:
#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:
<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>
#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.
