Seções iMasters
HTML + Web Standards

Posicionamento e Layouts

Olá pessoal. Estou aqui com meu primeiro
artigo no iMasters. Falarei sobre webstandards, xhtml, css, a
tendência de criação, os padrões W3C,
entre outros.

Não cairei muito na parte teórica
do assunto. Abaixo listarei alguns links para estudos, consultas,
referências, etc.:

Tablelesswww.tableless.com.br
W3Cwww.w3.org
A List Apartwww.alistapart.com
CSS p/ Web Designwww.maujor.com
CSS Zen Gardenwww.csszengarden.com
Revolução do CSS
www.revolucao.etc.br/css/
XHTML.orgwww.xhtml.org
W3Schoolswww.w3schools.com

Neste artigo eu falarei sobre posicionamento de
elementos no site e falarei sobre criação e tipos
de layouts.

É muito importante o conhecimento sobre
estes temas, pois é o começo de tudo. Sem saber
como posicionar elementos, você não conseguirá,
de maneira alguma, criar seus trabalhos. E citarei alguns exemplos
de estruturas de layouts, que geralmente as pessoas têm
dúvidas de como criá-los.

O posicionamento depende de muitos fatores a serem
considerados no layout: layout fixo ou líquido? Terá
que ficar posicionado num lugar independente da resolução?
Ficar de acordo com outro elemento? Cada caso é um caso,
e você terá de identificar o seu e ver qual o melhor
método a ser aplicado.

Veremos alguns elementos de posicionamento com
seus respectivos valores logo abaixo:

Position

Static – o elemento setado recebe
uma posição estática, padrão, de acordo
com seu “pai”. Este valor não aceita os atributos
adicionais left e/ou top, pois seu posicionamento é estático
ao seu “pai”. É o valor padrão do position,
não precisando ser setado, a não ser que você
tenha setado outra vez.

Ex.:
img { position: relative; }
img.nomeClasse { position: static; }

Neste caso, todas as tags estão
setadas como relative, mudando o padrão que é static.
Mas com a classe .nomeClasse é possível retornar
ao static, podendo ser setada na tag da seguinte maneira:
””<br class=”nomeClasse” />

Desta forma, o padrão relative que foi imposto
no css seria substituído pelo static que foi setado na
classe.

Relative – semelhante com a static,
mas com uma pequena diferença, ela aceita os atributos
adicionais left /ou top como complemento.

#nomeDiv {
Position: relative; /* deixando o elemento
com uma posição relativa à seu “pai”
*/

Top: 50px; /* deixando o topo do elemento
50 pixels mais abaixo do seu “pai” */

Left: 50px; /* deixando o elemento 50 pixels
mais a direita do seu “pai” */

Background-color: #CCCCCC; /* definindo
uma cor cinza claro de background */

width: 100px; /* definindo 100px de largura
pro div */
}

conteúdo

Neste caso, o div se posicionará 50px, tanto
no topo, quanto na esquerda, de acordo com o que
é seu “pai”.

Outro exemplo (clique
aqui para ver on-line
):

body { text-align: center;
}
/* deixando o alinhamento do texto
centralizado */

#primeiro {
margin: 0 auto; /* deixando o alinhamento
do elemento de acordo com alinhamento do texto do body, que é
seu “pai” */

width: 500px; /* definindo 500px de largura
pro div */

height: 200px; /* definindo 200px de altura
pro div */

border: 1px solid #000000; /* definindo
uma borda em volta do div na cor preta com 1px e sólida,
normal */

}

#segundo {
Position: relative; /* deixando o elemento
com uma posição relativa à seu “pai”
*/

Top: 50px; /* deixando o topo do elemento
50 pixels mais abaixo do seu “pai” */

Left: 50px; /* deixando o elemento 50 pixels
mais a direita do seu “pai” */

Background-color: #CCCCCC; /* definindo
uma cor cinza claro de background */

width: 100px; /* definindo 100px de largura
pro div */

}

conteúdo

Neste segundo exemplo, o div #segundo
se posiciona de acordo com o div #primeiro, que é seu “pai”.
O div #primeiro está posicionado ao centro
da página e o div #segundo está dentro do div #primeiro,
centralizado, mas com um acréscimo de 50px tanto no topo
quanto na esquerda.

Absolute – neste valor, o elemento
ignora qualquer referência, qualquer posicionamento do seu
“pai”, caso ele não tenha o posicionamento
relativo, e se referencia apenas pelo corpo da página.
Necessita-se de muita atenção na sua utilização,
pois um pequeno erro na utilização poderá
acarretar num erro no site inteiro. Com esta propriedade você
pode posicioná-la em qualquer lugar da página.

Sua utilização é recomendada
somente para layouts alinhados nas laterais, e não centralizados,
pois como seu posicionamento é fixo, uma mudança
de resolução do monitor poderá acarretar
num posicionamento errado na página, isso logicamente feita
na div master, que engloba todo o layout. Iniciantes geralmente
possuem dificuldades em utilizar esta técnica, pois como
foi dito mais acima, se o elemento que receber o valor absoluto
não estiver dentro de um elemento com posicionamento relativo,
vai acabar referenciando-se com o .

body {
margin: 0; /* zerando as margens do body
*/

padding: 0; /* zerando os paddings do body
*/

}

#geral, #geralDois {
margin: 0; /* zerando as margens dos divs
#geral e #geralDois */

height: 100px; /* definindo 100px de altura
pro div */

background-color: #990000; /* definindo
uma cor vermelho escuro de background */

width: 500px; /* definindo 500px de largura
pro div */

}

#site, #siteDois {
margin: 0; /* zerando as margens dos divs
#site e #siteDois */

background-color: #CCCCCC; /* definindo
uma cor cinza claro de background */

width: 200px; /* definindo 200px de largura
pro div */

height: 50px; /* definindo 50px de altura
pro div */

right: 0; /* definido 0 pro canto direito
do elemento, fazendo com que ele fique colado */

top: 30px; /* definido 30px pro topo do
elemento, fazendo com que ele fique 30 pixels abaixo do seu “pai”
*/

position: absolute; /* deixando o elemento
com uma posição absoluta */

}

#geralDois {
position: relative; /* deixando o elemento
com uma posição relativa a seu “pai” */

}

conteúdo

conteúdo

conteúdo

conteúdo

No primeiro exemplo, veremos que como o div geral
está com position static (não tem nenhum valor atribuído,
então recebe o padrão). O div site cola na direita
e fica 30px abaixo do topo, de acordo com o body. No segundo,
como o div geralDois tem o position relative, o seu “filho”
siteDois fica colado na direita com 30px abaixo do topo, mas do
seu “pai”, o div geralDois.

Fixed – funciona como o absolute,
mas com uma grande diferença, além de posicionar-se
absolutamente, ele faz com que o objeto, elemento fique fixo na
tela, independente da rolagem da tela, fazendo com que o elemento
fique sempre visível.

ps.: o i.e. não oferece suporte a este valor
do position. =[

Ex. (clique
aqui para ver on-line
):

#menu {
Background-color: #FFCC33; /* definindo
cor de background */

Width: 200px; /* definindo largura do elemento
*/

Height: 300px; /* definindo altura do elemento
*/

Position: fixed; /* deixando o elemento
com uma posição fixa ao corpo da página */

Right: 0; /* definido 0 pro canto direito
do elemento, fazendo com que ele fique colado */

Top: 0; /* definido 0 pro topo do elemento,
fazendo com que ele fique colado */

}

#conteudo {
Background-color: #FF6600; /* definindo
cor de background */

Border: 2px solid #000000; /* definindo
uma borda para o elemento */

Color: #FFFFFF; /* definindo a cor do texto
do elemento */

Padding: 15px; /* o padding serve para que
o conteúdo do elemento fique menos colado, mais no interior
do seu conteúdo. Coloquei 15px, desta forma, tanto no topo,
quanto na esquerda, base e topo recebem 15px, fazendo com que
o conteúdo fique 15px mais distante do limite da página.
*/

Margin-right: 210px; /* aqui temos o mesmo
caso do exemplo anterior, mas com 210px de tamanho, pois a largura
do div #menu é de 200px e decidi utilizar 10px de folga.
*/

}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam vulputate velit at turpis. Sed at urna. Integer laoreet
est eu eros. Nunc ut velit vel mi gravida volutpat. Vestibulum
id augue. Morbi in odio at odio rhoncus ullamcorper. Cras egestas.
Pellentesque et nisi. Aliquam ac massa at ligula venenatis semper.
Suspendisse adipiscing erat non quam. Phasellus sollicitudin,
eros a cursus tristique, tortor neque tincidunt nibh, ac viverra
ante dolor commodo libero. Proin sed velit sit amet metus iaculis
cursus. Donec faucibus sapien id turpis. Mauris enim diam, eleifend
vitae, iaculis non, pellentesque quis, pede.

Praesent tellus.
Curabitur id pede vel nisi tempus imperdiet. In molestie urna.
Sed pellentesque, augue et tincidunt cursus, massa magna suscipit
ipsum, vitae rhoncus metus ante at mi. In magna ipsum, sollicitudin
commodo, aliquet ut, tempor dapibus, pede. Quisque euismod cursus
ante. Etiam vehicula erat eget lorem. Suspendisse sed lectus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sodales
condimentum nunc. Vestibulum ligula dui, scelerisque et, tempus
ac, sodales quis, arcu. Fusce in eros. Nunc pellentesque tincidunt
magna. Mauris facilisis pharetra magna. In hac habitasse platea
dictumst. Ut sagittis ornare
pede.

Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam vulputate velit
at turpis. Sed at urna. Integer laoreet est eu eros. Nunc ut velit
vel mi gravida volutpat. Vestibulum id augue. Morbi in odio at
odio rhoncus ullamcorper. Cras egestas. Pellentesque et nisi.
Aliquam ac massa at ligula venenatis semper. Suspendisse adipiscing
erat non quam. Phasellus sollicitudin, eros a cursus tristique,
tortor neque tincidunt nibh, ac viverra ante dolor commodo libero.
Proin sed velit sit amet metus iaculis cursus. Donec faucibus
sapien id turpis. Mauris enim diam, eleifend vitae, iaculis non,
pellentesque quis, pede.

Praesent tellus.
Curabitur id pede vel nisi tempus imperdiet. In molestie urna.
Sed pellentesque, augue et tincidunt cursus, massa magna suscipit
ipsum, vitae rhoncus metus ante at mi. In magna ipsum, sollicitudin
commodo, aliquet ut, tempor dapibus, pede. Quisque euismod cursus
ante. Etiam vehicula erat eget lorem. Suspendisse sed lectus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sodales
condimentum nunc. Vestibulum ligula dui, scelerisque et, tempus
ac, sodales quis, arcu. Fusce in eros. Nunc pellentesque tincidunt
magna. Mauris facilisis pharetra magna. In hac habitasse platea
dictumst. Ut sagittis ornare pede.

Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam vulputate velit
at turpis. Sed at urna. Integer laoreet est eu eros. Nunc ut velit
vel mi gravida volutpat. Vestibulum id augue. Morbi in odio at
odio rhoncus ullamcorper. Cras egestas. Pellentesque et nisi.
Aliquam ac massa at ligula venenatis semper. Suspendisse adipiscing
erat non quam. Phasellus sollicitudin, eros a cursus tristique,
tortor neque tincidunt nibh, ac viverra ante dolor commodo libero.
Proin sed velit sit amet metus iaculis cursus. Donec faucibus
sapien id turpis. Mauris enim diam, eleifend vitae, iaculis non,
pellentesque quis, pede.

Praesent tellus.
Curabitur id pede vel nisi tempus imperdiet. In molestie urna.
Sed pellentesque, augue et tincidunt cursus, massa magna suscipit
ipsum, vitae rhoncus metus ante at mi. In magna ipsum, sollicitudin
commodo, aliquet ut, tempor dapibus, pede. Quisque euismod cursus
ante. Etiam vehicula erat eget lorem. Suspendisse sed lectus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sodales
condimentum nunc. Vestibulum ligula dui, scelerisque et, tempus
ac, sodales quis, arcu. Fusce in eros. Nunc pellentesque tincidunt
magna. Mauris facilisis pharetra magna. In hac habitasse platea
dictumst. Ut sagittis ornare pede.

Neste exemplo temos um div #menu que
fica fixo na direita, independente da resolução,
da rolagem, etc.

Com isso, finalizo o atributo Position e seus valores.

Bottom, left, right e top

Estes quatro atributos são os que realmente
posicionam o elemento setado na tela. Representa respectivamente
os valores de base, esquerda, direita e topo.

Ex. (clique
aqui para ver online
):

body {
margin: 0; /* zerando as margens do body
*/

padding: 0; /* zerando os paddings do body
*/

font: 10px arial; /* definindo 10px pro
tamanho dos textos do site e a fonte Arial como padrão
*/

}

#base {
position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

bottom: 0; /* definido 0 pra base do elemento,
fazendo com que ele fique colado */

width: 50px; /* definindo largura do elemento
*/

height: 50px; /* definindo altura do elemento
*/

background-color: #CCCCCC; /* definindo
cor de background */

}

#esquerda {
position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

left: 0; /* definido 0 pro lado esquerdo
do elemento, fazendo com que ele fique colado */

width: 50px; /* definindo largura do elemento
*/

height: 50px; /* definindo altura do elemento
*/

background-color: #CCCCCC; /* definindo
cor de background */

}

#direita {
position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

right: 0; /* definido 0 pro lado direito
do elemento, fazendo com que ele fique colado */

width: 50px; /* definindo largura do elemento
*/

height: 50px; /* definindo altura do elemento
*/

background-color: #CCCCCC; /* definindo
cor de background */

}

#topo {
position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

top: 0; /* definido 0 pro topo do elemento,
fazendo com que ele fique colado */

left: 100px; /* definido 100 pixels pro
lado esquerdo do elemento, fazendo com que ele fique 100 pixels
à direita do body, para que não sobreponha o div
esquerda */

width: 50px; /* definindo largura do elemento
*/

height: 50px; /* definindo altura do elemento
*/

background-color: #CCCCCC; /* definindo
cor de background */

}

base

esquerda

direita

topo

z-index

Muitas pessoas possuem dúvidas sobre este
atributo. Ele ordena a prioridade de visualização
dos elementos setados com este atributo. Mas o que muitos desconhecem,
é que este atributo só funciona com elementos setados
com valor absolute no atributo position. Por isso que muitos desenvolvedores
não conseguiam utilizá-lo com sucesso.

A prioridade é setada para o elemento que
possuir o maior valor, ou seja, o elemento que possuir um z-index:
2 terá prioridade de visualização que outro
que possuir z-index: 1 e assim por diante.

Ex. (clique
aqui para ver online
):

#geral {
margin: 0; /* zerando as margens do elemento
*/

height: 100px; /* definindo altura do elemento
*/

background-color: #990000; /* definindo
cor de background */

width: 100%; /* definindo largura do elemento
*/

position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

z-index: 1; /* seto o valor 1 para o z-index,
fazendo com que ele fique com prioridades de visualização
em relação ao outro elemento, que não possui
este atributo ou pode ter um valor menor. */

}

#site {
margin: 0; /* zerando as margens do elemento
*/

background-color: #CCCCCC; /* definindo
cor de background */

width: 200px; /* definindo largura do elemento
*/

height: 150px; /* definindo altura do elemento
*/

right: 0; /* definido 0 pro lado direito
do elemento, fazendo com que ele fique colado */

top: 0; /* definido 0 pro topo do elemento,
fazendo com que ele fique colado */

position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

}

conteudo

conteúdo

Ex. 02 (clique
aqui para ver online
):

#geral {
margin: 0; /* zerando as margens do elemento
*/

height: 100px; /* definindo altura do elemento
*/

background-color: #990000; /* definindo
cor de background */

width: 100%; /* definindo largura do elemento
*/

position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

}

#site {
margin: 0; /* zerando as margens do elemento
*/

background-color: #CCCCCC; /* definindo
cor de background */

width: 200px; /* definindo largura do elemento
*/

height: 150px; /* definindo altura do elemento
*/

right: 0; /* definido 0 pro lado direito
do elemento, fazendo com que ele fique colado */

top: 0; /* definido 0 pro topo do elemento,
fazendo com que ele fique colado */

position: absolute; /* deixando o elemento
com uma posição absoluta ao corpo da página
*/

z-index: 1; /* seto o valor 1 para o z-index,
fazendo com que ele fique com prioridades de visualização
em relação ao outro elemento, que não possui
este atributo ou pode ter um valor menor. */

}

conteudo

conteúdo

No primeiro exemplo, a div #geral tem prioridade
por receber o z-index: 1, portanto aparece na frente da div #site.

No segundo exemplo a coisa se inverte, pois o z-index:
1 está no div #site, fazendo com que fique na frente do
div #geral.

Finalizo aqui esta primeira parte do artigo. No
próximo falarei sobre tipos de layouts, layouts líquidos,
fixos, layouts com cantos arredondados, entre outros.

Até lá.

Mensagem do anunciante:

Em apoio à evangelização do WordPress, os cursos da Apiki são gratuitos para que você possa se especializar na plataforma que mais cresce no mundo. Vagas limitadas, Inscreva-se agora.

Comente também

11 Comentários

João Ricardo de Albuquerque Si

Bacana o artigo Bruno. Aqui vão duas ótimas referências também para o assunto: http://www.brunotorres.net/2005/09/27/posicionamento-com-css (português) e http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute (inglês). Este útlimo e um excelente artigo.

Um abraço.

Bruno

Fala Leandro. O artigo do Bruno foi postado exatamente quando enviei o artigo pro iMasters… Fiquei até recioso que pessoas ficassem pensando que retirei algo de lah. Jah tinha visto esse segundo também, bem lembrado ;) Espero que seja de grande ajuda. Abraços.

bruno

tenho algumas duvida em relação a isso.. e o seguinte nao é mais dificil vc montar um site com curvas, com efeitos em div do q vc ir la no dreamweaver e montar por la… nunca mexi em div, mais gostaria de aprender tem coisa

carlendario

Jà faz algum tempo que venho migrando webstandards, e já estava entrando em contato com o pessoal da imasters sobre abordagem do assunto.

Glauber Matos

Bruno! A próxima fale sobre a elaboração de layouts em tableless e CSS, e como economizar linhas de códigos em CSS. Será de grande colaboração para nós, pois o assunto ainda é meio “vago”. Abraços,

Júnior Silveira

Artigo muito esclarecedor ! Principiantes em CSS poderão encontrar dificuldades… então aconselho um aprendizado básico em propriedades e sintaxe CSS encontrados em links disponíveis no corpo do artigo.

Igor

tem como trabalhar com iframes com esse metodo? Achei mto interessante mas preciso saber se tem como trabalhar com iframes!?

Márcio Sampaio

Muito bom este artigo. No entanto, sempre temos o problema de compatibilidade IE x Firefox. Até um exemplo usado pelo Bruno, como http://www.brunodulcetti.com/artigos/posicionamentos/relative02.htm , fica diferente no IE e Firefox. Alguém sabe dizer por que isso ocorre em página tão simples?

Sérgio Rafael

bom cara essa eu não sabia a do z-index mais agora que sei axo que esse site tb usa http://www.tip.it é só um chute, mais pra mim usa e nem vou olhar no css deles pq tenho diguinidade hahah vlw

Marcos Oliveira

Muito útil.

VBarthem Web e Tecnologia

Artigo rico!

Qual a sua opinião?