Você está na página 1de 37

Aprenda Layout com CSS

A propriedade "display"

display a propriedade mais importante do CSS para


controlar o layout. Cada elemento tem um valor
padro para o display dependendo de seu tipo. O
valor padro na maioria dos elementos
normalmente block ou inline.
Um elemento com valor block chamado de
elemento de nvel de bloco ou apenas elemento de
bloco.
Um elemento com valor inline sempre chamado de
elemento de linha.

display: block
<div>

div o exemplo de bloco mais comum. O elemento de


bloco sempre comea em uma nova linha e se expande
pra esquerda e direita o tanto quanto for possvel. Outros
elementos de bloco comuns so p e form, e agora no
HTML5 temos: header, footer, section e outros.
</div>

display: inline

span o elemento de linha padro.


Um elemento de linha pode preencher algum
texto dentro de um pargrafo <span>como
esse</span> sem quebrar o fluxo daquele
pargrafo.
O elemento a o elemento de linha mais
comum, j que ele utilizado para links.

display: none

Outro valor comum do display o none. Alguns


elementos especficos como o script utilizam este
valor por padro. Ele normalmente utilizado atravs
do JavaScript para esconder e exibir elementos sem
realmente os remover nem recriar.
Ele bem diferente de visibility. Marcando o display
com o valor none vai exibir a pgina como se o
elemento no existisse. Com visibility:hidden o
elemento fica invisvel, porm ele permanece
ocupando o espao em que estaria totalmente visvel.

display

Cada elemento possui um tipo padro de display.

No entanto, voc sempre poder substitu-los!

Embora no faa sentido uma div no modo de


linha, voc pode fazer isso para personalizar a
visualizao de elementos com semnticas
particulares.
Um exemplo comum aplicar display:inline no
elemento li para menus horizontais.

Criando um layout com CSS a partir do zero

Objetivo:
montar um layout assim

Identificar os
elementos estruturais

Antes de tudo, temos que identificar os elementos


estruturais do design, para ento saber como
estruturar nosso documento HTML.
A web amplamente baseada em retngulos, e ns
precisamos nos lembrar disso quando estivermos
dividindo nosso design. Essas divises principais
que ns iremos fazer vo terminar em tags <div>.
Um <div> basicamente um continer retangular, o
qual podemos posicion-lo usando CSS.

Dividindo o design

5 elementos
principais:
nav (rea de navegao principal):
A navegao primria para este
website. As imagens vo mudar on
hover (quando o cursor do mouse
estiver sobre elas).
Comprimento: 760px
Altura: 50px

header (cabealho): O cabealho


do website inclui uma imagem de
fundo (puramente por esttica) e o
nome da companhia.
Comprimento: 760px
Altura: 150px

article (contedo): nesta rea


que ficar o contedo principal
do website.
Comprimento: 480px
Altura: Pode mudar,
dependendo do contedo
aside (barra lateral): Esta ter
uma camada secundria que
no to importante quanto o
contedo principal.
Comprimento: 280px
Altura: Pode mudar,
dependendo do contedo

footer (rodap): Informaes gerais: Copyright, crditos, e algum texto


alternativo para navegao.
Este site ser tambm
Comprimento: 760px
centralizado na janela do
navegador.
Altura: 66px

index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Meu Site</title>
</head>
<body>
<nav>Main Nav</nav>
<header>Header</header>
<aside>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.
</aside>
<article>
Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto.
</article>
<footer>Footer</footer>
</body>
</html>

Como voc vai notar no design, qualquer coisa


em nossa pgina da largura de 760px ou
menos, e nada flutua fora disso. O que ns
vamos fazer criar um continer para nossa
pgina que tenha 760px de largura e
posicionado no meio da pgina. Nossos 5
principais elementos sero colocados dentro
desse continer.

estilo.css

E isto todo o HTML que precisamos para


nosso continer. Vamos s CSS.
Crie um novo arquivo vazio e salve-o como
estilo.css.

ID e CLASS

O sinal # na frente da id diz ao navegador que


estamos selecionando uma id. Para uma classe, ns
usaramos um . Exemplo: .page-container { } no
caso de uma classe.
Um id um identificador nico que usamos para
coisas que somente ocorrero uma vez na pgina.
Ento para cabealhos, rodaps, navegadores, etc...,
ns usamos id's e para elementos que se repetem,
como links, ns devemos usar classes, que podem
aparecer mais vezes na mesma pgina.
Ns no estaremos habilitados a ver as modificaes
que so feitas a esta <div>, porque ela transparente
por padro.

Precisamos escrever uma regra CSS para


redefinir as margens e alinhamentos das tags
html e body para zero. Adicione essa regra
bem no topo do seu arquivo css:

html, body {
margin: 0;
padding: 0;
}

Os CINCO elementos principais

Ns precisamos adicionar 5 tags.


Estas tags correspondem s reas do design
que ns identificamos na parte 2.
Ns vamos inserir texto dentro das tags
somente para facilitar a identificao visual
quando visualizarmos a pgina.

HTML
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>

HTML 5
<nav>Menu de Navegao</nav>
<header>Cabealho</header>
<section>
<aside>Barra Lateral</aside>
<article>Contedo</article>
</section>
<footer>Rodap</footer>

section

devemos atribuir uma largura de 760px para esta tag.


vamos centralizar esta tag. Isto feito atribuindo suas
margens para auto. Quando as margens esquerda e direita
so atribudas para auto, elas se igualam em ambos os lados
e a div fica no centro do continer.

section {
width: 760px;
margin: auto;
background: red;
}

Remova o fundo vermelho da #page-container, e adicione uma nova regra para #mainnav. Mude o fundo da #main-nav para vermelho para que possamos v-la, e atribua
sua altura para 50px:

article {
width: 760px;
margin: auto;
background: yellow;
}
nav {
background: red;
height: 50px;
}

Note que ns no especificamos a largura da div. Isto por que,


por padro, a div vai se esticar at preencher seu continer-pai,
que neste caso, nosso body que foi configurado para 760px de
largura.
Faa a mesma coisa para a div cabealho (header), utilizando a
altura que usamos no primeiro passo. Use a cor azul para o
fundo.

header {
background: blue;
height: 150px;
}

J que estamos aqui, vamos configurar o rodap (footer). Use a cor


laranja para o fundo.
Lembre-se de que quando escrever sua folha-de-estilos, voc pode
agrup-los. Ento todos os estilos do cabealho (header) poderiam vir
juntos. Todos os estilos do rodap (footer) poderiam estar juntos, e os
estilos de navegao poderiam estar juntos. Eu tambm acho que
estruturar a folha-de-estilos similar ordem do HTML ajuda bastante.
Assim sendo, header fica prximo ao topo, footer ao final.

footer {
background: orange;
height: 66px;
}

Floats

Floats

Floats (flutuadores) pode ser um conceito enganoso para fazer voc


perder a cabea.
Basicamente um float um elemento que alinhado contra os lados
esquerdo ou direito do seu continer.
No caso deste website, ns vamos fazer flutuar (float) nossa tag
aside direita, com a largura de 280px.

aside {
float: right;
width: 280px;
background: darkgreen;
}

Adicionando contedo

Somente para o propsito de testes, substitua o texto do


contedo de article para o seguinte:

<article>
Texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto texto.
</article>

Note que o contedo do aside ficou


em uma linha s.

Propriedade: CLEAR

Isso no o que queremos. Ns queremos que


o contedo da div seja distribudo atravs da div
sidebar, a qual tem seu lado direito contra o lado
esquerdo da barra lateral.
Um jeito fcil de conseguir isto num layout
flutuante como esse, colocar a propriedade
que limpa os floats, pois o o article e o aside
esto 'flutuadas', no footer coloque:
clear: both;

CLEAR: BOTH

Quando um elemento tem sua propriedade clear


atribuda, se ele entrar em contato com um
elemento flutuante, ele colocado exatamente
abaixo de onde o flutuante termina. V
oc pode especificar se ele afetado somente
por flutuadores esquerdos ou direitos, neste caso
ns poderamos utilizar tanto right ou both. Ns
vamos utilizar clear: both somente por
segurana.

Menu <nav>

Trocar o texto para:

<nav>
<a href="#">Principal</a>
<a href="#">Sobre</a>
<a href="#">Servios</a>
<a href="#">Portflio</a>
<a href="#">Contato</a>
</nav>

<nav> CSS

Com CSS:
http://www.universogeek.blog.br/2012/10/tutorialaprenda-a-criar-um-menu-dropdown-com-html5-e-css3/

http://www.siteparaempresas.com.br/blog/?p=3408

http://www.betomarques.com/artigos/artigo_021.php

http://msdn.microsoft.com/pt-br/library/jj160310(v=vs.85
).aspx
Com Jquery:
http://www.webmaster.pt/76-menu-jquery-14624.html

Mais menus em CSS3:


http://lllmenu.blogspot.com.br/2010/11/30-pure
-css-horizontal-tutoriais-menus.html#.U1kbHd_7
Fz8

Footer

Alterar o rodap:

<nav id=navFooter>
<a href="#">Principal</a> <a href="#">Sobre</a> <a href="#">Servios</a> <a href="#">Portflio</a> <a href="#">Contato</a>
</nav>
Copyright &copy IF.Com Solues. <br>
Powered by IF.Com Solues.

FRAMEWORKS CSS

http://pt-br.learnlayout.com/frameworks.html

Referncias Bibliogrficas

http://pt-br.learnlayout.com/
http://www.hpmachado.com.br/tutorial-de-css/cr
iando-um-layout-com-css-a-partir-do-zero-parte
-6-12.html