CSS Folha de Estilo em Cascata

Unidade 6 Posicionamento e Layout

Curso: Auxiliar de Web Design
Carga horria: 30h/a
Professor Regis Pires Magalhes
regis@ifpi.edu.br
http://sites.google.com/site/ifpiregis
A disciplina
Unidades
1. Fundamentos de CSS
2. Textos, Fontes e Espaamentos
3. Cores e background
4. Listas, Menus e Links
5. Tabelas e Formulrios
6. Posicionamento e Layout
Crditos
Grande parte desta apresentao baseou-se nas
vdeo-aulas de CSS da Universidade XTI.
O livro Use a Cabea! HTML com CSS e
XHTML tambm serviu de embasamento para
a construo desta apresentao:
FREEMAN Eric & FREEMAN Elisabeth. Use a
Cabea! HTML com CSS e XHTML. Alta Books, 1
Edio, 2006.

Fluxos
Fluxo
Forma como so dispostos na pgina os elementos em
bloco ou inline.
Fluxo Normal
Elementos em bloco
Fluem de cima para baixo, com uma quebra de linha entre os
elementos.
Por padro, cada elemento em bloco ocupa a largura inteira da
janela do navegador.
Elementos em linha
Fluem dentro do elemento de bloco do topo esqueda at o
fundo direita da pgina.
Se mais de uma linha for necessria, o navegador cria uma
nova linha e expande o elemento em bloco verticalmente para
conter os elementos inline.
Fluxos
Fluxo Float
Elementos saem do fluxo normal e podem ser
dispostos esquerda ou direita.
Elementos em linha respeitam os limites de um
elemento float e fluem ao redor dele.
Posicionamento absoluto
Os elementos assim definidos saem do fluxo
normal e so posicionados de acordo com os
valores definidos.

Dica
Colocar uma borda ao redor dos elementos facilita a
observao de como funciona o posicionamento.

position - propriedades
static (padro)
Posiciona o elemento no fluxo normal da pgina e no permite ajustes
externos.
absolute
Posiciona o elemento em qualquer local da pgina.
Posio relativa s laterais da pgina ou ao primeiro elemento posicionado
(no static) no qual esteja contido.
O espao original do elemento liberado para ocupao dos demais elementos.
fixed
Posiciona o elemento relativo janela do navegador e no move quando ocorre
rolagem da pgina.
relative
O elemento colocado em sua posio normal na pgina e, depois, deslocado
de acordo com os valores definidos, deixando vazio o espao onde ele ficaria.
Esse espao passa a ser ocupado pelos demais elementos.
inherit
Valor da posio herdado do elemento pai.
position
As propriedades top, left, bottom e right so usadas para
posicionar elementos nas posies absolute, fixed e
relative.
top e left so mais usadas.
position
absolute
Corre com os elementos da pgina em caso de
rolagem de tela.


position
fixed
Semelhante ao absolute.
A diferena que ele fica fixo, mesmo em caso de
rolagem de tela.


position
fixed
position
fixed
z-index
Elementos posicionados (absolute, relative ou
fixed) podem ser colocados em camadas
sobrepostas umas sobre as outras atravs da
propriedade z-index.
Permite definir a ordem de posicionamento dos
elementos em uma pilha.
Assim possvel definir que um elemento fique na
frente ou atrs de outro.
O elemento que usa z-index no pode estar usando
o posicionamento padro (static).
Quando maior o valor, mas frente o elemento
fica (mais prximo da tela).
z-index
Valores possveis:
auto (padro)
Valor igual ao dos elementos pais.
valor
Ordem do elemento na pilha.
Nmeros negativos so permitidos.
inherit
z-index herdado do elemento pai.
z-index
Exemplo:
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
float
Faz com que os elementos flutuem na pgina de acordo
com determinada poltica
O mesmo design pode ser obtido usando elementos
posicionados de forma absoluta ou float.
Posicionamento float uma soluo flexvel para layouts
multi-colunas e permite que elementos limpem elementos
ao seu lado.
Funciona para o elemento onde for declarada.
Box retirado da sua posio normal do fluxo do
documento.
O elemento seguinte ocupa a vaga onde estava o
elemento que est usando float.
float
Um elemento float normalmente deve ter uma largura
(width) especfica declarada com um valor diferente de
auto.
Valores possveis:
left
O elemento flutua para a esquerda.
right
O elemento flutua para a direita
none (padro)
O elemento no flutua e ser exibido de acordo com o fluxo
normal do navegador.
inherit
O valor deve ser herdado do elemento pai.
float
Exemplo:

p {
float: left;
}

Flutuar para a esquerda.
Deixa elementos um ao lado do outro.

float
Exemplo:

img {
float: right;
}

Flutuar a imagem para a direita dentro do elemento
onde ela est inserida.
float
Exemplo:

span.destaque {
width: 40%;
float: right;
background-color: #888;
border: 1px solid black;
}

clear
Especifica que nenhum elemento float possa
ficar esquerda ou direita (ou ambos) de um
elemento em bloco.
O elemento com essa propriedade ser movido
para baixo at se livrar do elemento em bloco ao
seu lado.
clear
Valores possveis:
left
No permite elementos float do lado esquerdo.
right
No permite elementos float do lado direito.
both
No permite elementos float em nenhum lado
(esquerdo ou direito).
none (padro)
permite elementos float em ambos os lados
(esquerdo e direito)
inherit
Valor herdado do elemento pai.
Layout
Dividir a pgina em reas usando o elemento div
do HTML.
Cada rea deve ter um nome bem representativo
e no vinculado a informaes sobre o estilo ou
posicionamento a ser aplicado.
O estilo e o posicionamento podem ser
modificados e o nome dado pode perder o sentido
original.
Exemplos de bons nomes:
geral, container, menu, conteudo, destaque, rodape,
footer, blogs, topo, centro, center, etc.
Layout
Estruturar as reas que esperamos no nosso
layout.
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
Classificao dos layouts
Nmero de colunas
Largura da pgina
Fixa
A largura fixa e no se expande ou se encolhe de acordo com
a janela do navegador.
Melhor controle do design.
Lquida
O contedo da pgina se expande para se ajustar pagina de
acordo com as dimenses da janela do navegador.
Elstica
A largura fixa, mas as margens se expandem ou se encolhem
de acordo com a janela do navegador.
Normalmente posiciona o contedo no centro da pgina.
Layout de largura fixa
#container {
border: 1 px solid black;
width: 500px;
}
Layout de largura lquida
#container {
border: 1 px solid black;
width: 80%;
min-width: 300px;
}
Layout de largura lquida
* {
font-size: 14px;
}

#container {
border: 1 px solid black;
width: 40em;
}
Centralizao do layout
#container {
border: 1 px solid black;
width: 80%;
margin: 0 auto;
}
#container {
border: 1 px solid black;
width: 500px;
margin: 0 auto;
}
Exerccio
Exerccio
Construo de layouts
Construa cada passo por etapas bem definidas e
ao concluir, teste em diferentes navegadores.
Desenvolva para os navegadores modernos e
depois adapte para os antigos.
Na fase de desenvolvimento e testes coloque a
folha de estilos na seo HEAD da pgina.
Valide seu cdigo HTML e CSS.
Construo de layouts
Construo de layouts
Passos:
1. Escolher os containers de layout

Construo de layouts
Passos:
2. Nomear os containers

Construo de layouts
Passos:
3. Criar a marcao

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav"></div>
<div id="menu"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
</body>
</html>
Construo de layouts
Passos:
4. Inserir contedo
5. Posicionar os containers

body {
margin: 0;
padding: 0;
background: #ddd;
}
#container {
margin: 1em auto;
width: 650px;
background: #fff;
}
#header {background: #CF3;}
#mainnav {background: #9F3; }
#menu {
float: right;
width: 165px;
background: #6F9;
}
#contents {
float: left;
width: 440px;
background: #9FC;
margin: 0 0 0 20px;
}
#footer {
clear: both;
background: #FF9;
}
Construo de layouts
Construo de layouts
Passos:
6. Folha de estilo para impresso

<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
Construo de layouts
body {
margin: 0;
padding: 0;
font: 100% arial, hevetica, sans-serif;
color: #000;
background-color: #fff;
}
a {
color: #000;
text-decoration: none;
}
#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu {
display: none; }
#menu ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}
#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px
solid #999; }
.blogentry ul {
list-style-type: none;
text-align: right;
margin: 1em 0;
padding: 0;
font-size: 95%;
}
.blogentry li {
display: inline;
padding: 0 0 0 7px;
}
#footer {
clear: both;
color: #000;
text-align: right;
padding: 5px;
font-size: 90%;
border-top: 1px solid #999;
margin-top: 2em;
}
6. Folha de estilo para impresso

Layout de 2 colunas
Layout de 2 colunas - HTML
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Layout de 2 colunas - CSS
div {
border: 1px solid black;
}

#container {
width: 600px;
margin: 0 auto;
}

#header {
height: 80px;
background: #DDD;
}

#left {
float: left;
width: 130px;
background: #666;
}
#content {
float:right;
width: 450px;
}

#footer {
clear:both;
background: #DDD;
}
Layout de 3 colunas
Layout de 3 colunas - HTML
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="content">
<div id="principal"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
Layout de 3 colunas - CSS
div {
border: 1px solid black;
}

#container {
width: 600px;
margin: 0 auto;
}

#header {
height: 80px;
background: #DDD;
}

#left {
float: left;
width: 130px;
background: #666;
}
#content {
float:right;
width: 450px;
}

#principal {
float: left;
width: 340px;
}

#right {
float: right;
width: 100px;
}

#footer {
clear:both;
background: #DDD;
}
Bordas arredondadas e sombra
com CSS3
Bordas arredondadas e sombra com
CSS3
#container {
border: 2px solid;
width: 200px;
padding: 10px;

border-radius: 10px;
box-shadow: 10px 10px 5px #888;
}