Trataremos nesse primeiro artigo como fazer uma Estrutura para um site de Três colunas. Esta estrutura inicial é o inicio de um web site, onde a estrutura inicial é definida, com esta estrutura criada pode-se visualizar como ficará o site nos variados browsers, nesta primeira parte nos preocuparemos com a Estrutura , não vamos nos preocupar com as cores e detalhes para deixar o site bonito, apenas queremos garantir que o site vai abri sem quebras nos navegadores mais usados. Quando estamos fazendo um site temos que garantir que este site não vai ficar quebrado em alguns browsers, sabemos que Internet Explorer se comporta diferente do Firefox e Google Crome, nesta primeira etapa pode garantir que o “Esqueleto do site” abrirá sem quebras.
CSS
Teremos dois arquivos que vão compor nosso site, a marcação HTML o CSS que fará a estrutura HTML ganhar forma. A nossa estrutura do CSS terá algumas parte que fixarão nosso HTML no lugar correto.
Container
Header
Menu
Menu
Lateral
Content
SideBar
Footer
Esta é uma estrutura básica que a maioria dos sites tem que desenvolver, basicamente com isto podemos fazer um site simples e funcional. Falaremos das principais partes do site: Começaremos nossa estrutura com o Container ele e quem ira envolver toda nossa estrutura, o container é quem centralizará nosso layout no centro da pagina
Container
Este container terá uma largura de 1000px, assim o site não terá barra de rolagem na Horizontal em monitores de 15 polegadas a propriedade margin: 0 auto , deixa o site alinhado no centro da pagina.
1
2
3
4
5
6
|
#container
{
margin: 0 auto;
width: 1000px;
background: #fff;
}
|
Header
O header fica Topo da página, neste local normalmente inserimos o logo do site e as principais informações referentes ao site.
1
2
3
4
5
6
7
8
9
|
#header
{
background: #ccc;
padding: 20px;
}
#header h1 {
margin: 0;
}
|
Menu
O menu superior é onde fica os principais links para navegação do site, através do menu é possível chegar em todas as seções do site, menus poder ser dos mais variado tipos, neste exemplo teremos um menu na posição horizontal.
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
|
#menuSuperior
{
float: left;
width: 1000px;
background: #333;
}
#menuSuperior ul
{
margin: 0;
padding: 0;
}
#menuSuperior ul li
{
list-style-type: none;
display: inline;
}
#menuSuperior li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#menuSuperior li a:hover
{
background: #383]
}
#content-container
{
float: left;
width: 1000px;
background: #fff ;
}
#section-menuSuperior
{
float: left;
width: 160px;
padding: 20px 0;
margin: 0 20px;
display: inline;
}
#section-menuSuperior ul
{
margin: 0;
padding: 0;
}
#section-menuSuperior ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
|
Leia mais em: Criando Site: Layout com HTML e CSS - Parte 1 http://www.devmedia.com.br/criando-site-layout-com-html-e-css-parte-1/22207#ixzz2KnvVleiw