Layout liquido com css e tableless

 Layout l√≠quido com css e tableless - css tableless - dicas de cssUma dos grandes problemas de Web Designers que optam em produzir layouts no padr√£o tableless √© como criar layouts l√≠quidos, j√° que com o uso de tabelas html era muito mais simples, pois os elementos de conte√ļdo das tabelas, as TDs s√£o interconectados; por√©m usando o padr√£o tableless, cada DIV √© um elemento separado e √© a√≠ onde reside a dificuldade das pessoas.

Vamos criar um layout liquido em CSS e tableless com tr√™s linhas: cabecalho, conte√ļdo e rodap√©. Duas colunas fixas (esquerda e direita) e uma coluna l√≠quida (coluna central) para o conte√ļdo. A linha do cabe√ßalho assim como a linha do rodap√© ter√£o apanas a coluna liquida.


Irei atribuir uma cor a cada c√©lula de conte√ļdo para visualizarmos melhor a estrutura do layout e de posse dessa estrutura voc√™ poder√° aplicar o layout que quiser, desde que seja no padr√£o de tr√™s colunas como foi dito.

Então vamos ao nosso código css primeiramente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<style type="text/css" id="internalStyle">

/*
ZERANDO AS PROPRIEDADES MARGIN E PADDING
PARA TODOS OS ELEMENTOS NA P√ĀGINA
*/
*{
margin:0;
padding:0;
}

body{overflow:hidden;}

/* CABECALHO */
.div_externa_cabecalho {
width:100%;
height:100px;
position:absolute;
z-index:2;
background:#cc6600;
}

/* CONTE√öDO */
.div_externa_conteudo {
position:absolute;
width:100%;
height:100%;
overflow:scroll;
z-index:1;
display: inherit;
}
.div_conteudo {
width:100%;
background-color:#cccc00;
height:100%;
display:table;
}
.margem{
margin:auto 170px;
}
.c_coluna_esquerda{
float:left;
background:#cccc99;
width:150px;
height:800px;
padding:5px;
}
.c_coluna_direita{
float:right;
background:#cccc99;
width:150px;
height:800px;
padding:5px;
}

/* RODAP√Č */
.rodape{
width:100%;
background-color:#ccccff;
text-align:center;
position:absolute;
bottom:0px;
z-index:3;
height:20px;
}
</style>

Observe que √© necess√°rio atribuir¬†posicionamento absoluto nas linhas de cabe√ßalho, conte√ļdo e rodap√© para que o efeito de fixa√ß√£o aconte√ßa.

√Ȭ†atribu√≠do¬†”overflow:hidden;” para a tag <body> para que o IE n√£o crie uma barra de rolagem¬†desabilitada¬†para o documento como um todo, j√° que o conte√ļdo ser√° rolado atrav√©s da barra de rolagem criada somente para o conte√ļdo.

Foi atribuído uma altura tanto para a coluna esquerda quanto a direita. Não é que seja exatamente necessário, mas se você usar um background para essas colunas e não definir uma altura prévia o background acompanhará a altura do texto e que poderá ser diferente de uma coluna para a outra.

Veja abaixo a estrutura do layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!-- CABECALHO -->
<div class="div_externa_cabecalho" >
<h2>Layout líquido css e tableless</h2>
<h3>Colunas esquerda e direita com tamanhos fixos e coluna central líquida, cabeçalho e rodapé fixos</h3>
</div>
<!-- FIM CABECALHO -->

<!-- CONTE√öDO -->
<div class="div_externa_conteudo">
<div class="div_conteudo">
<div style="margin-top:100p">

<!-- Coluna Esquerda -->
<div class="c_coluna_esquerda">
Blog Fazer o meu Site : dicas para desenvolvimento, otimização e monetização de blogs e sites
</div>
<!-- Fim Coluna Esquerda -->

<!-- Coluna Direita -->
<div class="c_coluna_direita">
Dicas de Javascript, css, html e php
</div>
<!-- Fim Coluna Direita -->

<!-- Coluna Central -->
<div class="c_coluna_centro">
<div class="margem">
Layout desenvolvido em CSS no padr√£o tableless com tr√™s linhas: cabecalho, conte√ļdo e rodap√©.<br />
Cabe√ßalho e rodap√© fixos e conte√ļdo com tr√™s colunas e barra de rolagem.<br />
As colunas da esquerda e direita do conte√ļdo ter√£o larguras fixas e a coluna central se expandira para assumi a largura total
da p√°gina.
</div>
</div>
<!-- Fim Coluna Central -->

</div>
</div>
</div>
<!-- FIM CONTE√öDO -->

<!-- RODAP√Č -->
<div class="rodape">
Rodapé
</div>
<!-- FIM RODAP√Č -->

Temos tr√™s blocos de DIVs ¬†separadas para cabe√ßalho, conte√ļdo, rodap√©. No bloco central onde fica o conte√ļdo temos um conjunto de tr√™s divs aninhadas e a √ļltima define uma margem superior com valor um pouco maior do que a altura do¬†cabe√ßalho. Isso √© necess√°rio porque o cabe√ßalho estando posicionado absolutamente com “z-index:2″ fica por cima do conte√ļdo e se n√£o fosse definida essa margem os textos das tr√™s colunas de conte√ļdo ficariam ocultos embaixo do cabe√ßalho.

Quer criar seu site com muita praticidade, apenas arrastando elementos e ainda saber como gerar milhares de visitas? clique aqui e saiba como.

Dentro do conte√ļdo da coluna central se fez necess√°rio colocar-se mais um conjunto de DIVs para criar-se uma margem esquerda e direita para o texto n√£o ficar muito pr√≥ximo das colunas esquerda e direita. √Ä essa div √©¬†atribu√≠da¬†a classe “margem” que √© que efetivamente cria as margens.

Agora crie um documento HTML, coloque o código CSS entre as tags <head> e <head>, e entre as tags <body> e </body> coloque o código HTML.

Aprenda também a criar um formulário com cantos arredondados: Criando um formulário com cantos arredondados usando css3

Até a próxima.

2 Respostas para Layout liquido com css e tableless

  1. Obrigado. A dica foi muito √ļtil para mim, que estou come√ßando a utilizar css e html.

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>