Tableless Avançado PDF

TABLELESS II
Técnicas avançadas
O QUE É TABLELESS?!
DESDE O PRINCÍPIO…
Muitas pessoas que estão entrando em contato agora com os Web Standards perguntam o que é exatamente
Tableless. Simplificando, eu diria que é uma metodologia que abre mão das tabelas de HTML para fazer a
construção do layout do site em CSS. Desta forma, é possível separar em camadas a informação, a
programação e a formatação ou layout do site. Para entender melhor esse conceito, precisamos rever
rapidamente a história da web.
A Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas
informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C
(World Wide Web Consortium): um consórcio internacional, onde são desenvolvidas os padrões para a web
(Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros.
Diga-se de passagem, o Internet Explorer foi o primeiro browser a abordar os padrões,

implementando na sua versão 3.0, os Cascading Style Sheets (CSS).
Naquela época, no mercado de browsers, as opções ainda eram poucas: consistiam apenas em Lynx, Mozaic e
Netscape Navigator, da Netscape Communications, então liderada por Jim Clark. A Microsoft, de Bill Gates,
resolveu entrar nesse mercado com lançamento do Internet Explorer. A concorrência entre os dois browsers é
chamada até hoje de Guerra dos Browsers. Durante essa “guerra”, os padrões do W3C ainda eram meros
rascunhos. As duas empresas não podia esperar que esses rascunhos ficassem prontos para poderem lançar
seus browser, e criaram seus próprios padrões.
Agora o impasse: Os browsers tinham seus próprios padrões… Os desenvolvedores não conseguiam criar um
único código que funcionasse nos dois navegadores. Por este motivo, eles foram obrigados a escolher para qual
browser desenvolver.
Isso trouxe mais um problema, agora para os usuários. O usuário que usava Netscape, não conseguia acessar
sites que eram feitos para Internet Explorer, e vice-versa.
A Microsoft tinha 2 vantagens na época: Ela usou o monopolio que tinha sobre o
Sistema Operacional Windows para poder popularizar mais o Internet Explorer.
A outra vantagem era que a Netscape era uma empresa relativamente pequena, logo
mais vulnerável.
PDF created with pdfFactory Pro trial version www.pdffactory.com

Como a web não tinha sido projetada para desenvolver os criativos ambientes gráficos que temos atualmente,
naturalmente, os recursos de desenvolvimento eram limitados e os criadores faziam das tripas coração para
criar seus sites. Entre as muitas idéias que surgiram para transigir ao ambiente de “apenas texto” da internet,
estava aquela de utilizar tabelas de HTML para posicionar os elementos no layout, utilizando slices de imagem,
gifs transparentes e a técnica de aninhamento de tabelas para contornar os problemas que os padrões
proprietários traziam. A esse tipo de técnica, que é usada atualmente pela maior parte dos websites, chamamos
de layout com tabelas.
Embora essas soluções tivessem sido ótimas para aquele tempo, hoje em dia, trazem mais problemas do que
vantagens:
Há uma diversidade muito maior de dispositivos que podem ser usados para acessar a web (telefones celulares,
smartphones, handhelds, webTV’s, leitores de tela, sem falar dos modernos eletro-domésticos que acessam à internet);
Diferentes tipos de conexão à internet com características bem peculiares (dial-up, ADSL, Cable-modem, ISDN, Wireless
etc.);
Há uma quantidade maior de navegadores acessando à internet (FireFox, Opera, Netscape, Safari, Konqueror, Internet
Explorer, entre outres menos usados);
Com tantos determinantes, o desenvolvimento de versões diferentes para os vários ambientes é muito demorado,
complicado e custoso, tornando uma simples manutenção uma enorme dor de cabeça;
Além disso, o desenvolvimento de websites usando o método tradicional não permite que programadores e designers
trabalhem simultaneamente.
Fazer sites tableless é muito mais do que não usar tabelas para a estruturação dos
layouts. É usar de forma correta os padrões que o W3C criou. Hoje, os Padrões Web
(Web Standards) estão bem mais maduros e já se pode utiliza-los com bem menos
dificuldades do que anteriormente.
O que você tem a lucrar
A seguir, uma lista dos benefícios de se adotar os Padrões Web e Tableless:
Redução de custos
Ao contrário do método tradicional, que quase sempre é linear, utilizando Web Standards a equipe de negócio,
design e programação podem atuar simultânea e independentemente. Isso acelera bastante a produção e torna
a manutenção de um projeto web muito simples. Além da economia de tempo, há redução de custos na compra
de licenças de software.
Desenvolvimento mais ágil
Significativa parte do tempo no processo de desenvolvimento da maioria dos websites é desperdiçada em

retrabalho de design para que o HTML fique com aparência profissional. O desenvolvimento Web Standards
corta o retrabalho praticamente a zero.
Tecnologia acessível
Um designer treinado em Web Standards não depende de um programador para saber o que pode ou não ser
implementado em um projeto web; e vice-versa.
Facilidade para criar versões de layout
Uma vez que conteúdo, programação e design estão em camadas separadas, é incomparavelmente mais
rápido desenvolver versões de layout para uma mesma tela.
Veja o exemplo do site CSS Zen Garden. Com apenas a mudança do CSS, o site é totalmente transformado.
Não é modificado uma só linha de HTML. Interessante, não?
Paz entre designers e programadores
Com a separação entre conteúdo e layout promovida pelos Web Standards, designers e programadores podem
trabalhar simultaneamente e de maneira independente.
Perfeita integração com .NET, Java, PHP, ASP etc.;
Web Standards e Tableless têm total integração com as principais tecnologias de mercado. Pequenas
mudanças precisam ser feitas em uma ou outra plataforma.
Lembrando sempre, que cada caso é um caso.

Por exemplo: se você tem um grande portal, provavelmente a maior vantagem que
você vai obter, será a economia de banda.
Controle sobre o projeto
Com a metodologia Web Standards, evita-se que apenas um membro da equipe tenha domínio exclusivo sobre
o desenvolvimento, assegurando que qualquer desenvolvedor poderá dar continuidade ou realizar futuras
manutenções.
Melhor visibilidade no Google
Optar pelos Web Standards significa valer-se da estrutura semântica simples e coerente do HTML, fator
primordial para ter um melhor posicionamento nas ferramentas de busca.
Velocidade do website
O código HTML se torna muito mais compacto ao se separar conteúdo, design e programação, conforme os
Web Standards. Além disso, a tecnologia Tableless permite que o navegador interprete as informações de
layout (em um arquivo CSS) de 30% a 70% mais rapidamente.
Acessibilidade
O uso de Web Standards facilita muito a aplicação de normas de acessibilidade. Isso garante o acesso ao
website, não importando que combinação de navegador e plataforma o usuário possua.
Cabe agora aos desenvolvedores atualizarem seus conhecimentos e revolucionar a Internet. Como nós
dizemos: primeiro, a internet mudou a vida das pessoas; agora, são as pessoas que vão mudar a internet.
Para mais informações
Web Browser usage share

Browser War
Sobre o Internet Explorer
Sobre o Netscape Navigator
Jim Clark
Bill Gates
UMA BREVE HISTÓRIA DO CSS
E aqui começou a revolução
Formatar informação dos sites não é algo novo. Por volta de 1970, no começo da tragetória do SGML, vários
browsers já personalizavam as aparência dos documentos, cada um com seu estilo próprio.
Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação. A medida que o HTML foi
se popularizando e evoluindo, foram incluídas em suas qualidades, o domínio de controlar algumas aparências
para o documento. Isso fez com que a linguagem ficasse muito complexa, mais dificil para entender e manter.
Outro problema era que os browsers tinham diferenças de implementações, o que dificultava a visualização dos
sites, trazendo menos controle na navegação pela web.
Por esse tempo apareceu o salvador da pátria. Håkon Wium Lie, vendo toda essa dificuldade, resolveu criar um
jeito mais fácil para formatar a informação. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets…
Esse era o ano de 1994.
Aceitando o convite feito pelo próprio Håkon, Bert Bos - que naquele tempo estava trabalhando em um browser
chamado Argo - começou a trabalhar no projeto. Logo, os dois começaram a trabalhar juntamente no
desenvolvimento do CSS.
Em 1995 eles apresentaram sua proposta e finalmente, o W3C - World Wide Web Consortium - que estava
acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Håkon e
Bert Bos.
O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1).
Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda
versão das Folhas de Estilo para web.
O nível 3 do CSS ainda está em desenvolvimento. Mas, sabemos que as facilidades serão muitas, como por
exemplo, criar bordas arredondadas sem o uso de imagens, ou definir duas imagens como background de um
mesmo objeto.
Compatibilidade
Embora a especificação do CSS fosse lançada em 1996, os browsers levariam mais três anos para ter suporte
completo ao CSS de nível 1.
Uma curiosidade interessante, é que o primeiro browser a ter suporte completo de CSS 1 foi o Internet Explorer
para Mac. Ultrapassando o Opera que naquele tempo era o mais complacente.
Atualmente (Janeiro de 2006) nenhum browser tem completo suporte ao CSS 2. Propriedades de CSS Aural,
por exemplo, ainda não estão totalmente implementadas.
Outro ponto que dificul um bocado a vida dos desenvolvedores, é a falta de compatibilidade de alguns browsers,
como por exemplo o Internet Explorer versões 5.+ e 6. Não tem suporte total ao CSS 2, e como se não
bastasse, há bugs em algumas propriedades que ele suporta.
Entretanto, conseguimos criar um site sem problemas e que seja compatível com todos os browsers atuaiz
(Firefox, Opera, Internet Explorer, Safari, Konqueror, Camino, etc).
O W3C, lançou o CSS 2.1. Que são resoluções de bugs que haviam nas especificações do CSS. Isso melhorou
o suporte dos browsers, ampliando a compatibilidade entre eles.

Hoje em dia, o nível de compatibilidade entre os browsers é muito parecido, de forma que se você implementar
algo específico em um browser, é muito provável que em outro browser esteja igual.
Portanto, o desenvolvedor pode ficar tranqüilo quanto a maioria dos problemas causados por diferenças entre
browsers.
Não estou dizendo que é 100% de certeza. Vai haver alguns problemas que você terá que resolver, mas nada
que te faça desisitir de um layout ou algo parecido.
O uso do CSS e suas qualidades
O uso do CSS trás muitas facilidades, como já vistas no primeiro capítulo deste curso. Seu uso é muito
abrangente. Por exemplo, toda a interface do browser Firefox é baseada em XUL e CSS. Posicionamento e
etc…
Os Widgets do Dashboard do Mac OS X também é baseade em CSS, bem como os Widgets do
ex-Konfabulator, agora chamado Yahoo! Widget Engine.
Perceba então que o CSS não está restritro a páginas de internet. Ele vai além.
Hoje em dia, CSS pode ser usado até mesmo para diagramar Livros ou outros serviços de impressão.
O CSS então, se transforma em uma ferramenta não só de formatação de informação pra sites, mas também
formatação e diagramação de qualquer aplicação. Basta que o autor da aplicação, queria esse suporte.
Com a popularização das aplicações baseadas em XML - como o Firefox que usa seu próprio padrão de XML
chamado XUL - a diagramação visual feitas com CSS será normal, e acima de tudo, útil.
PROPRIEDADE DISPLAY
Objetos inline
No código XHTML há dois tipos de objetos: O objeto de linha, conhecido como “inline” e o objeto de bloco,
conhecido também como “block”.
O objeto inline são aqueles objetos que são utilizados em linhas de texto… por exemplo a tags de formatação
como “b” ou “i”. Elas formatam uma linha de texto, sem quebras de linhas, servem para marcar uma parte do
texto. Precisamos chamar a atenção para uma pequena regra: Nenhum objeto de linha, pode conter um objeto
de bloco. Portanto é extremamente errado, escrever código como:
<b><div>Um "b" não pode conter um "div".</div></b>
Ou qualquer código parecido. Por isso, lembre-se: Nenhum objeto de linha, pode conter um objeto de bloco.
Objetos de bloco
Os objetos de bloco são aqueles guardam vários outros objetos. Ou seja, são objetos que funcionam como
caixas, containers. Você pode colocar outros objetos dentro deles, para dividi-los e organizá-los.
Um objeto de bloco largamente usado é o “div”. O “div” serve para conter outros objetos. Principalmente outros
objetos de bloco. Ele é uma caixa, e seu conteúdo são outros objetos. Objetos como “form”, “p”, “ul” e etc, são
objetos de block.
Uma característica dos objetos de bloco é que quando usados, eles causam quebra de linha, antes e depois.
Todo e qualquer objeto de bloco pode conter qualquer objeto de linha.
Dentro dos objetos de bloco, existe o grupo dos objetos de texto, que são aqueles que só podem conter texto (e
claro objetos inline), proibidos de conter outros objetos de bloco.
Objetos de texto são por exemplo o “p” e o “blockquote”.
Eles não podem conter nada além de texto e tags inline.
Já o objeto “div” por exemplo, pode conter todo e qualquer objeto. O formulário também pode conter todo e
qualquer objeto. Objetos assim, não tem restrição, mas cada um com sua funcionalidade.
Mudando essas condições
Agora que já sabemos como as tags funcionam, podemos começar a brincar com a propriedade display. A
propriedade display serve para controlar a visualização das tags. Ela controla se uma tag aparecerá como inline
ou block. Então, você pode simplesmente mudar a visualização de um “b” por exemplo, fazendo-o aparecer no
browser como uma tag de bloco. Veja este exemplo.
Você faz o “b”, que é uma tag inline, “emular” uma tag de bloco. E agora, você pode controlar fatores, que em
tags inline não são permitidas, como por exemplo, mudar tamanho de largura, altura, colocar margem, e etc…
Mas atenção: A propriedade não muda a função semântica da tag. A tag “b” de nosso exemplo, continua tendo
sua função, que é deixar o texto em negrito. Ela ainda é proibida de conter tags de bloco.
O valores da propriedade display
A propriedade display tem uma série de valores interessantes. Que vão desde transformar tags inline em
blocos, e vice-versa, até fazer o “div” emular uma tabela. Por isso, mãos à obra!
Explicarei a fundo, apenas as propriedades que você usará com mais freqüencia. E uma ou outra que seja
interessante você saber.
Valores Descrição Suporte

Todos os
none O elemento não será mostrado.
browser
O elemento será mostrado como um objeto em bloco, com quebras de linha antes Todos os
block
ou depois, como por exemplo a tag div, form, h1, h2, h3, etc. browser
O elemento será mostrado como um objeto em linha, sem quebra de linha antes Todos os
inline
ou depois, como por exemplo a tag B, I, etc. browser
Essa propriedade faz o objeto emular um tabela. Com uma quebra de linha antes e
table KMOS
depois.
table-columnEssa propriedade faz o objeto emular uma coluna de tabela. KMOS
* KMOS: Konqueror, Mozilla, Opera, Safari
O valor NONE
O valor none dispensa grandes explicações. Ela apenas define se o objeto aparecerá na tela ou não. Se você
definir para um objeto um display: none; esse objeto não aparecerá na tela.
Muito útil para o pessoal que gosta de fazer coisas aparecerem e desaparecerem DHTML. Fazer submenus e
outras brincadeiras que todos conhecem.
Os valores INLINE e BLOCK
Os valores inline e block servem para controlar como um objeto será exibido na tela. Se ele será exibido como
uma tag de linha (inline) ou se será exibido como uma tag de bloco (block).
Analisemos o seguinte código:

<html>
<head>
<title>Teste</title>
<style>
b {
display:block; /* Faz com que a tag B apareça como um bloco */
background: red; /* só para gente visualizar melhor */
}
</style>
</head>
<body>
<b>Veja, se parece com DIV, mas na verdade é o um B!</b>
</body>
</html>
Veja o resultado.O que aconteceu? Simples. A tag “b” é uma tag de linha. Ou seja, ela serve apenas para
marcar texto, ela serve para marcar uma LINHA de texto.
No código acima, nós mudamos isso. Definimos para ela um “display:block;”. Isso fez com que ela se
comportasse no browser como um objeto de bloco, exatamente igual a uma tag “div” por exemplo. Mas, a
função semântica da tag “b” continua a mesma. Ela não se transformou em um div, e agora pode conter
qualquer objeto. Ela ainda serve apenas para marcar uma linha de texto.
Podemos fazer a mesma coisa com um “div”. O “div” é uma tag de bloco. Então, podemos inverter isso,
transformando-o em uma tag de linha. Usando o valor inline, desta forma:
<html>
<head>
<style>
div {
display:inline; /* Faz com que a tag DIV apareça como um objeto de linha */
background: red; /* só para gente visualizar melhor */
}
</style>
</head>
<body>
<div>Veja, se parece com B, mas na verdade é o um DIV!</div>
</body>
</html>
Veja o resultado.
Muito simples não é?
Esses dois valores serão os mais usados por você em seu desenvolvimento. Por exemplo, você irá transformar
freqüentemente links (”a”) em tags de bloco. Para por exemplo, fazer um mapa de imagens, um botão, etc…
Veja esse exemplo:
<html>
<head>
<style>
a {
display:block; /* Faz com que o LINK, normalmente um objeto de linha, apareça como um BLOCO*/
width:200px;
height:200px;
border:1px solid black;
}
</style>
</head>
<body>
<a href="http://www.visie.com.br/" mce_href="http://www.visie.com.br/" >
Este é um link quadrado! <br />
Perceba que a área clicável se extende por todo o quadrado.
</a>
</body>
</html>
Veja o resultado – Um link quadrado!.
Conseguiu entender os dois valores? O valor “inline” faz objetos de bloco transformarem-se em objetos de linha.
Por exemplo, um “div” pode ficar como um “b” ou “i”.
O valor “block” faz objetos de de linha, transformarem-se em objetos de bloco. Por exemplo um “div”
transforma-se em um “b”.
A propriedade display não muda o valor semântico da tag. Um “div”, mesmo com diplay:inline; continua sendo
um “div”, um “b”, mesmo com display:block; continua sendo um “b”.
A propriedade display não muda a função da tag.
PROPRIEDADES: FLOAT E CLEAR
PROPRIEDADE FLOAT
A propriedade float é muito importante para a construção de layouts sem tabelas. Ele é extremamente simples
de se compreender e usar; Seus valores são: none, left e right, sendo none o default.
Veja o código HTML e CSS abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">
<head>
<title>Layout Fixo de 3 Colunas (modo 1)</title>
<style>
div {
width:300px;
float:left; /* Faz o elemento flutuar a esquerda */
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia.
Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper,
ligula felis tincidunt dui, at pretium eros velit vitae augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque elit nulla,...
</div>
<p>
ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem
ipsum dolor sit amet...
</p>
<p>
Curabitur aliquam. Morbi scelerisque, mauris id placerat
ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque elit
nulla, tempus eu, nonummy a, facilisis non, diam. Nullam lectus lorem,
elementum nec, suscipit et, suscipit vel, sem. Pellentesque elit nulla,
empus eu, nonummy a, facilisis non, diam. Nullam lectus lorem, elementum
nec, suscipit et, suscipit vel, sem. Pellentesque elit nulla, tempus eu,
nonummy a, facilisis non, diam. Nullam lectus lorem, elementum nec,
suscipit et, suscipit vel, sem. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque,
mauris id placerat...
</p>
</body>
</html>
Veja resultado desse primeiro passo.
Perceba que o texto está fluindo em volta do objeto que está com float.
Veja, abaixo, o que acontece colocarmos 2 objetos consecutivos flutuando a esquerda.

.... <div>
ligula felis tincidunt dui, at pretium eros velit vitae augue.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque elit nulla, tempus eu, nonummy a, facilisis non, diam.
Nullam lectus lorem, elementum nec, suscipit et, suscipit vel, sem.
Pellentesque elit nulla, tempus eu, nonummy a, facilisis non, diam. Nullam
lectus lorem, elementum nec, suscipit et, suscipit vel, sem. Pellentesque
elit nulla, tempus eu, nonummy a, facilisis non, diam. Nullam lectus lorem,
elementum nec, suscipit et, suscipit vel, sem.
</div>
<div>
elementum nec, suscipit et, suscipit vel, sem.
</div> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisq
Veja o resultado desse passo aqui.
Agora, veja se vários objetos estiverem flutuando a esquerda.
Perceba que se um objeto não cabe na tela, ele automáticamente ocupa o espaço disponível abaixo do outros
objetos.
Se você quiser que um objeto flutue a esquerda e o outro a direita, também pode.
Veja o exemplo.
Propriedade Clear
A propriedade clear é usada quando você está utilizando float em seu layout.
A propriedade clear pode ter os valores: none, right, left e both, sendo none o padrão.
O atributo clear provoca uma quebra no float fazendo com que, se houver um elemento com float antes do que
recebe o clear, o elemento com clear aparecerá depois dele, ignorando o float.
OS VALORES RIGHT, LEFT E BOTH

Como vimos acima, existem 3 valores para a propriedade “clear”: BOTH, RIGHT ou LEFT. (sem contar com o
none que é o valor padrão). Vamos ver com mais detalhes o que esses valores fazem.
Quando atribuímos o valor BOTH na propriedade CLEAR (clear:both;), definimos que o elemento não sofrerá
influência alguma de nenhum objeto com float, tanto com float:left; quanto com float:right;.
Você pode entender melhor, vendo um exemplo prático..
Perceba que o objeto está ignorando o float das duas caixas cinzas.
Atribuindo o valor LEFT, o elemento ignora apenas o os objetos com float:left;, ainda sofrendo influência dos
objetos com float:right;.
Você pode ver o resultado disso neste exemplo.
Já o valor RIGHT atribuído para a propriedade CLEAR (clear:right;), o elemento passará a ignorar os objetos
quem estão flutuando a direita, ou seja, com float:right;
Para entender melhor, veja este exemplo.
Agora, o mesmo objeto ignorou apenas o objeto com float:right;.

PROPRIEDADES: MARGIN E PADDING
Como o CSS é uma linguagem de formatação, não poderia faltar propriedades que controlassem medidas e
distâncias como Margem. Então, as propriedades MARGIN e PADDING são de extrema importância, tanto para
diagramar de forma flexivel grandes blocos de texto, quanto para controlar medidas dos objetos do layout.
Como as duas propriedades são bastante parecidas, não precisamos estuda-las separadamente.
A propriedade Margin é responsável pelo espaço que fica para fora do objeto. Ou seja, o espaço que começa da
borda para fora do objeto. Já o padding, é responsável pelo espaço que fica da borda até o conteúdo do objeto.
Veja a imagem abaixo para esclarecer essa idéia:
Sem complicação, não é?

A sintaxe das duas também é muito parecida. Você pode definir margin/padding diferentes para cada lado do
objeto, tendo assim mais flexibilidade na hora da cosntrução do seu layout.
O seletores da propriedade “margin” correspondentes para cada lado são:
padding-top
Define o espaçamento para o lado superior do objeto
margin-right
Define o espaçamento para o lado direito do objeto
margin-bottom
Define o espaçamento para o lado inferior
margin-left
Define o espaçamento para o lado esquerdo
Lembrando sempre que o MARGIN é o espaço de margem… Ou seja, da borda para fora.
Os seletores para a propriedade “padding” são os seguintes:
padding-top
Define o espaçamento para o lado superior do objeto
padding-right
Define o espaçamento para o lado direito do objeto
padding-bottom
Define o espaçamento para o lado inferior
padding-left
Define o espaçamento para o lado esquerdo
Lembrando sempre que o PADDING é o espaço de interno… Ou seja, da borda para dentro.
Existe uma forma muito fácil de escrever os valores de todos os lados, usando apenas uma linha:
Você define no seletor o nome da propriedade, no nosso caso, margin ou padding, e depois define todos os
valores, seguindo a seqüencia: TOPO, DIREITO, BAIXO, ESQUERDA. Assim:

margin: 15px 30px 5px 25px;
padding: 30px 15px 25px 5px;
O primeiro valor dos seletores acima são destinados ao lado SUPERIOR (15px de margin e 30px de padding), o
segundo valor é destinado ao lado DIREITO (30px de margin e 15px de padding), o terceiro valor define para o
lado INFERIOR (5px de margin e 25px de padding) e por último, os valores são para o lado ESQUERDO (25px
de margin e 5px de padding).
Um jeito fácil de guardar a seqüencia, é lembrando do Relógio! Veja a imagem:
Sempre em sentido horário!
O Valor AUTO da propriedade MARGIN
A propriedade Margin tem um valor que não existe na propriedade Padding. Essa propriedade é muito, muito útil
e é usada para centralizar objetos horizontalmente.
Ela funciona da seguinte maneira. Imagine que você tem um objeto de 200px de largura, e queira centraliza-lo
horizontalmente na tela, e que fique sempre centralizado, não importando a resolução do usuário. Você usaria o
valor AUTO nos dois lados da extremidade do objeto (direita e esquerda), o browser iria calcular a área útil
nesses lados e dividi-la por igual. Veja a imagem:

Infelizmente, o valor AUTO não é reconhecido pelo Internet Explorer. O que dificulta só um pouquinho a
centralização do objeto/layout no Internet Explorer. Mas não se preocupe, tem jeito de fazer sim, teremos que
colocar mais algumas linhas de código CSS, mas nada que comprometa o bom andamento do seu projeto.
Veja como você pode centralizar o objeto/layout na etapa abaixo.
Centralizando Horizontalmente
Centralizar um objeto hotizontalmente seria facílimo se não houvesse um pequeno bug no Internet Explorer.
Por sorte, é fácil de resolver.
Considere o seguinte código HTML:

<head>
</head>
<body>
<div>
Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula
felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Pellentesque elit nulla,
tempus eu, nonummy a, facilisis non, diam. Nullam lectus lorem, elementum
nec, suscipit et, suscipit vel, sem.
</div>
</body>
</html>
Agora, vamos começar a fazer o CSS.
div {
width:300px;
background:#FFF9D7;
font:80% Verdana;
}
Ficará mais ou menos assim: Exemplo 1
O atributo Margin, suporta um valor chamado AUTO.
Se esse valor for atribuído aos lados direito e esquerdo, uma margem automática será feita, resultando na
centralização do objeto.
div {
width:300px;
background:#FFF9D7;
font:80% Verdana;
margin:0px auto; /* Aqui está a mágica */ }
Veja o resultado deste passo.
Se você não estiver usando o Prolog XML no começo de seu documento, o Internet Explorer 6, funcionará
perfeitamente. Caso contrário, ele se comportará do mesmo jeito que o Internet Explorer 5.
Esse assunto é visto com mais detalhes no capítulo de Modes, Doctypes e Hacks
Estaria tudo bem se o Internet Explorer não ignorasse o valor AUTO.
Felizmente há uma solução. Teremos que usar mais código CSS para consertar, mas não muito.
Veja abaixo:
body {
text-align:center; /* Isso fará a centralização no Internet Explorer */
} div { width:300px; border:1px solid black; background:#FFF9D7; font:80% Verdana; margin:0px auto; /* Aqui está a má
Veja o resultado desse passo.
Perceba que o texto do box ficou centralizado. Esse não era o nosso propósito. Gostariamos de colocar o texto
do box alinhado a esquerda.
Isso se resolve colocando um text-align:left; no box.

body {
text-align:center; /* Isso fará a centralização no Internet Explorer */
}
div {
width:300px;
background:#FFF9D7;
font:80% Verdana;
margin:0px auto; /* Aqui está a mágica */
text-align:left; /* Isso resolve o problema do texto centralizado */ }
Veja o resultado final.
LAYOUT FIXO DE 3 COLUNAS (MODO 1)
PRIMEIRO MODO
É muito, muito fácil fazer um layout com 3 colunas usando float.
Vamos fazer passo a passo para que fique mais fácil de entender.
Veja o código HTML abaixo:

<head>
</head>
<body>
<div id="esquerda">
nonummy a, facilisis non, diam. Nullam lectus lorem, elementum nec, suscipit
et, suscipit vel, sem.
</div>
<div id="meio">
</div>
<div id="direita">
</div>
</body>
</html>
Veja o resultado desse passo.
Agora, vamos colocar a fazer o CSS.
div {
}
div#esquerda, div#direita {
width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */
}
div#meio {
width:400px; /* Faz o div do MEIO ficar com 400px de largura */
}
Não fizemos nada de mais.
Apenas colocamos borda em todos os DIVS, para podermos visualizar melhor o layout. E também definimos
uma largura para os divs.
Veja o resultado.
Agora, vamos começar a mágica.
div {
}
float:left; /* Faz todos os divs flutuarem a esquerda */
}
div#meio {
}
Veja Já temos 3 colunas.
Fácil, não é?!
Agora, se você quiser que nesse layout tenha um CABECALHO e um RODAPE, como fazer?
Precisamos acrescentar primeiramente um CABECALHO e um RODAPE para depois podermos formatá-los

pelo CSS. Veja nesse passo, que adicionei um div com o ID CABECALHO e no final de todo o código adicionei
um div com ID RODAPE.
Confira.
Como todos os divs estão com float left, mais do que normal os objetos aparecerem um ao lado do outro.
Para resolver isso, temos que colocar o float:left; apenas para os objetos que queremos que apareçam um ao
lado do outro. Logo, deixaremos o float:left; apenas nas colunas da esquerda, direita e meio.
Confira o resultado desse passo.
Você deve ter percebido que o div RODAPE ainda continua ao lado dos divs de coluna. Isso aconteceu por que
ele está sofrendo influência do float dos outros divs. Temos que remediar isso usando a propriedade CLEAR.
Definiremos então um clear:both; para o RODAPE.
Agora, confira o RODAPE com CLEAR.
Agora já estamos terminando.
Para ficar um pouco mais bonito, vamos colocar uma largura e uma altura para o div de CABECALHO e
RODAPE.
Confira.
CENTRALIZANDO O LAYOUT
Primeiramente você deve colocar todo esse layout, dentro de um div principal. Eu costumo por o nome desse
div de GERAL. Depois, eu definirei uma largura para ele.
Ficando desse jeito.
Agora, para centralizar em qualquer browser que não seja Internet Explorer, basta colocar um margin: 0 auto;
no div GERAL.
O valor auto faz o seguinte: ele calcula o espaço que sobra do lado direito da página, divide por dois e então,
centraliza o layout. O resultado voccê pode conferir aqui.
Se você perceber, no Internet Explorer, isso não funcionou, teremos que contornar isso.
Bem, teremos que colocar algumas linhas a mais no código, mas nada muito dificil.

Coloque a propriedade “text-align” com o valor “center” no BODY. Isso fara que com que o layout centralize no
Internet Explorer. Mas, perceba que o texto também ficou centralizado, e não queremos que isso aconteça. Para
remediar, coloque a propriedade “text-align” com o valor “left” no div GERAL.
Pronto, está feito nosso layout de 3 colunas, centralizado.
Agora é com você. Veja que o que falta é apenas um trato visual. Mas, isso é um layout de três colunas, feio,
mas é.
LAYOUT FIXO DE 3 COLUNAS (MODO 2)
SEGUNDO MODO
A estrutura que iremos utilizar para fazer esse layout, nos permitirá, apenas modificando algumas linhas no
CSS, criar um layout fluido.
Então, é muito importante que você aprenda e leia atentamente essa etapa.
A estrutra XHTML será muito diferente da que utilizamos no Modo 1, mudaremos apenas o div#meio de lugar,
colocando ele logo abaixo do div#direita.
O resultado, ficará assim:
<div id="geral"><br /> <div id="cabecalho">CABECALHO</div><br /> <div id="esquerda">Lorem ipsum dolor sit amet, consec
Tendo a estrutura XHTML construída, vamos agora para o CSS.

Nosso CSS também não mudará muito do CSS usado no Modo 1
Nesse primeiro código, vamos apenas definir tamanhos e bordas para podermos visualizar melhor os objetos
da página. O código CSS fica assim:
div { border:1px solid black; }

#geral {width:700px;}
div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ }
Resultado.
Agora, vamos organizar as partes.

Os únicos objetos que usarão float, serão as colunas. A coluna da esquerda, usará float:left; e a coluna da direita
usará float:right;
Esse é o segredo. Como as duas colunas estão flutuando em lados opostos, e o div#meio não está usando float
algum, ele encaixa automáticamente no meio das duas colunas…
div {border:1px solid black; }

div#esquerda, div#direita {width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ }
Resultado.
Ótimo!
Agora, nos resta apenas colocar o div#meio no centro das colunas… Isso, se resolve definindo uma margin para
a esquerda e para a direita.
Como a largura das colunas é de 150px, vamos colocar margens de 160px, para dar um espaço confortável
para o texto.

div#esquerda {float:left; /* Faz a coluna da esquerda flutuar para esquerda */ }
div#direita {float:right; /* Faz a coluna da direita flutuar para direita */ }
div#meio {margin:0 160px; /* Define uma margem lateral para o div#meio */ }

Resultado.
Voalá! Temos um layout de 3 Colunas!

Se você quiser centraliza-lo, bastar fazer da mesma maneira que fez no Modo 1.

body {text-align:center;} /* Faz todo conteúdo centralizar - PRO IE */ #geral { width:700px; margin:0 auto; /* Faz o l
text-align:left; /* faz o texto ficar alinhado a esquerda */ } div#esquerda, div#direita {width:150px; /* Faz os divs
Resultado.
Para terminar, definiremos uma altura para o #cabecalho e para o #rodape.

body {text-align:center;} /* Faz todo conteúdo centralizar - PRO IE */
#geral {
width:700px;
margin:0 auto; /* Faz o layout GERAL centralizar */
text-align:left; /* faz o texto ficar alinhado a esquerda */
}
div#esquerda {float:left; /* Faz a coluna da esquerda flutuar para esquerda */ }
div#direita {float:right; /* Faz a coluna da direita flutuar para direita */ }
div#meio {margin:0 160px; /* Define uma margem lateral para o div#meio */ }
div#cabecalho, div#rodape {height:50px;} /* Define uma altura pros divs #cabecalho e #rodape */
Layout Fixo de 3 Colunas.
LAYOUT FLUIDO DE 3 COLUNAS
CRIANDO UM LAYOUT FLUIDO RAPIDAMENTE

Layout Fluido, é aquele layout que se adapta a janela do browser.
Normalmente, apenas sites de e-commerce usam esse tipo de layout, por exemplo: Submarino,
Americanas.com, RicardoEletro etc.
Iremos aproveitar a mesma estrutura XHTML que usamos para fazer o Layout Fixo de 3 Colunas do Modo 2.
Portanto, se você não o leu ainda, leia. Isso é preciso para que você possa obsorver o máximo desse estudo.
Abaixo, segue o código XHTML que usamos para fazer o layout fixo, e que usaremos agora para fazer o fluido.

<head>
<title>Layout com 3 colunas</title>
</head>
<body>
<div id="geral">
<div id="cabecalho">
CABECALHO
</div>
<div id="esquerda">
ipsum dolor sit amet,
....
</div>
<div id="direita">
...
</div>
<div id="meio">
...
</div>
<div id="rodape">
RODAPE
</div>
</div>
</body>
</html>
Agora, confira o CSS.
div {
}
#geral {
width:700px;
text-align:left; /* faz o texto ficar alinhado a esquerda */
}
}
div#esquerda {
float:left; /* Faz a coluna da esquerda flutuar para esquerda */
}
div#direita {
float:right; /* Faz a coluna da direita flutuar para direita */
}
div#meio {
margin:0 160px; /* Define uma margem lateral para o div#meio */
}
Resultado.

Mudaremos poucas linhas de CSS para transformar esse layout.
Primeiramente, vamos retirar a largura do #geral. Isso fará com que o layout tome conta da área livre da janela.
div {
}
#geral {
text-align:left; /* Faz o texto ficar alinhado a esquerda */
}
}
div#esquerda {
}
div#direita {
}
div#meio {
}
Resultado.
Agora temos um problema. O #geral não está contendo todos os elementos do Site. Esse problema acontece
por causa das colunas que estão com float.
Para resolver esse problema, definiremos um clear:both; para o #rodape. Assim, o Rodapé do nosso site não
será influênciado pelo float das colunas.
div {
}
#geral {
text-align:left; /* Faz o texto ficar alinhado a esquerda */
}
}
div#esquerda {
}
div#direita {
}
div#meio {
}
#rodape {clear:both;} /* Faz o Rodapé ignorar os floats das colunas, ficando sempre abaixo delas */
Resultado.
PROPRIEDADE POSITION
Posicionando objetos

A propriedade “position” do CSS, especifica se a posição do elemento será estática, relativa, absoluta ou fixa.
Vejamos abaixo os valores possíveis dessa propriedade:
Valores Descrição Suporte

Mantém a posição normal do elemento no documento. Não suporta propriedades left, Todos os
static
top, right, e botom. É o valor padrão da propriedade. Browsers
O elemento com valor absoluto pode ser posicionado em qualquer lugar da página. As
coordenadas são relativas ao elemento-pai que possua também um atributo position. Se Todos os
absolute
não houver nenhum elemento-pai com position, as coordenadas são em relação ao stage browser
do navegador.
KMOS: Konqueror, Mozilla, Opera, Safari
A propriedade position trabalha em conjunto com 4 outras propriedades: left, bottom, right, top.
Um objeto com position: absolute; deve ficar a 30 pixels de distância da esquerda, e 50 pixels do topo, faríamos
dessa forma:
div {
position:absolute;
left:30px;
top:50px;
}
position: relative;
Um objeto com a propriedade position: relative; é aquele objeto que sua posição é referêciada pela sua posição
atual.
Ou seja, se você definir top: 20px; e left:20px;, ele ficará a 20 pixels de distância do topo e da esquerda, o ponto
“0″ será referência do ao extremo esquerdo superior do objeto.
Ufa!
De uma olhada neste exemplo para entender melhor.
Se você apenas definir position: relative; e não colocar valores para top nem left, o objeto continuará no mesmo
lugar.
position: absolute;
Exemplo: Se um <p></p> está dentro de um <div></div>, então, o pai do <p> será o

<div>.
A posição absolute é um pouco diferente da relativa.
Em vez o objeto se posicionar tomando como referência, sua posição, ele toma como referência o objeto pai.
Então, em vez de o ponto “0″ ser o lado superior esquerdo do objeto, ele é o lado superior esquerdo do objeto
pai.
Para entender melhor a propriedade position: absolute;, veja esse exemplo.
Atenção: O objeto com position: absolute; só será referênciado pelo pai, se o pai tiver um position absolute ou
relative.
position: fixed;
O valor Fixed é muito interessante. Acho que dispensa explicações… Vendo o exemplo, você saberá o que ele
faz.
Detalhe: Essa propriedade não funciona no Internet Explorer.
MANIPULANDO LISTAS (UL, OL, DL)
CONHECENDO AS LISTAS, SEUS OBJETIVOS E SUAS POSSIBILIDADES
Listas Ordenadas
Como o nome já diz, as listas ordenadas são listas organizadas de alguma forma. Os ítens dessa lista são
acompanhados por números,
<ol>
<li>Zézinho</li>
<li>Huguinho</li>
<li>Luizinho</li>
</ol>
Resultado:
1. Zézinho
2. Huguinho
3. Luizinho
Dentro da explicação do termo (LI), podemos colocar colocar parágrafos, imagens, quebra de linhas, e também
outras listas.
Listas Não Ordenadas
Listas não ordenadas, é uma lista de ítens aleatórios, que não necessitam de uma organização especifica.
<ul>
<li>Luizinho</li>
<li>Huguinho</li>
<li>Zézinho</li>
</ul>
Ficando assim:
Luizinho
Huguinho
Zézinho
Dentro da explicação do termo (LI), podemos colocar colocar parágrafos, imagens, quebra de linhas, e também
outras listas.
Listas de Descrição
As listas de descrição são um pouco diferentes dos outros dois tipos de listas.
Ela serve para descrever um determinado ítem.

Então, ela vem com um ítem e este ítem é acompanhado de sua descrição.
<dl>
<dt>Tio Patinhas</dt>
<dd>Tio do Huguinho, Zézinho e Luizinho.</dd>
</dl>
Resultado:
Tio Patinhas
Tio do Huguinho, Zézinho e Luizinho.
Manipulando Listas
Os ítens das listas (LI e DD) pode conter parágrafos (P), imagens, quebra de linhas ou também outras listas.
Você pode mudar também o estilo dos bullets.
Valores para
Descrição Resultado
list-style-type
Mouse
Teclado
Monitor
disc Especifica um sinal de disco
Placa de
Vídeo
Mouse
Teclado
Monitor
square Especifica um sinal de quadrado
Placa de
Vídeo
Mouse
Teclado
Números decimais começando com zeros na frente ( 01, 02, Monitor
* decimal-leading-zero
03, …, 98, 99) Placa de
Vídeo
Mouse
Teclado
Monitor
upper-roman Números romanos em maiúsculo
Placa de
Vídeo
Mouse
Teclado
Monitor
lower-alpha e lower-latin Letras do alfabeto em minúsculo
Placa de
Vídeo
* Esses estilos não funcionam no Internet Explorer 6
Você pode também colocar uma imagem como bullet.
Particularmente eu não recomendo, porque essa propriedade é muito limitada. Eu sempre aconselho, em vez de
fazer bullets com imagem usando list-style-image é mais fácil fazer usando a propriedade background-image.
Assim, você tem mais liberdade com posicionamento.
ul li {list-style-image: url(imagens/bul2.gif);}
Menu Horizontal
Agora que aprendemos como usar listas. Vamos aprender a fazer um menu horizontal.
Menus verticais são fáceis de fazer… é só formatar do jeito que você quer, usando sua criatividade.
Listas horizontais é um pouco mais complicado, mas nada de outro mundo. Vamos lá.
Vamos começar fazendo uma lista.
<ul>
<li><a href="#"" >Home</a></li>
<li><a href="#"" >Artigos</a></li>
<li><a href="#"" >Sobre</a></li>
<li><a href="#"" >Contato</a></li>
</ul>
Veja o resultado.
Feito isso, vamos agora começar a mágica.
Primeiro, vamos tirar as margens e os paddings. Tiraremos também os Bullets.
ul {
margin:0;
padding:0;
list-style:none;
}
Veja o resultado.
Agora, faremos os links flutuarem a esquerda com a propriedade FLOAT.
Isso fará com que os ítens fiquem alinhados horizontalmente.
ul li a {
float:left;
}
Veja o resultado.
Perceba que no Internet Explorer há um bug. Os links ficaram como se fosse uma escada.
Sorte a nossa que isso se resolve com um display:inline; na tag li.
ul li {
display:inline;
}
Veja o resultado final.
Pronto!
Temos - sem formatação alguma - um menu horizontal perfeito.
Você fica livre para colocar a formatação que quiser na sua lista, de acordo com suas necessidades.
Se quiser dar uma olhada nessa lista que fizemos com alguma formatação, pode conferir aqui.
Visite o site Listamatic. Aqui você terá uma série de amostras de menus horizontais e se quiser, verticais
também. Aproveite!
DOCTYPES, MODES E CSS HACKS

CADA COISA NO SEU LUGAR
Erro de Box Model
Há um detalhe na especificação de tamanhos via CSS que precisamos considerar.

Imagine o seguinte código:
#box{
width:200px;
padding:20px;
margin:20px;
border:20px solid blue;
}
Este código dimensiona o elemento box, aplicando uma largura de 200px, e colocamos 20 pixels de padding,
margin e border. Qual será a largura total desse elemento? Veja o resultado abaixo, e saiba como muitos
desenvolvedores de navegadores entendeam que isso deveria ser renderizado quando surgiram as primeiras
especificações de CSS:
Ou seja, a largura total do elemento seria de 240 pixels (200 mais 20 de margin de cada lado). Claro, o assunto
era duvidoso, e o W3C tratou de melhorar as especificações, tornando mais claros esses detalhes. Eis como o
código acima deve ser renderizado:
Percebe a complicação? O problema é que muitos sites foram construídos enquanto os navegadores se
comportavam do jeito antigo. Os desenvolvedores de browsers se encontraram numa situação difícil. Adotar o
novo padrão? Isso faria com que muitos sites antigos deixassem de funcionar corretamente. Fazer do jeito
antigo? Aí seriam os sites novos que não funcionariam. Criaram então um modo interessante de resolver o
problema. Os navegadores atuais podem funcionar tanto do jeito antigo quanto do novo. Se encontram uma
página com DOCTYPE antigo, HTML 3.0 por exemplo, funcionam do jeito antigo. Se encontram com um
DOCTYPE novo, HTML 4 ou XHTML, renderizam do jeito certo. Se não houver DOCTYPE o Internet Explorer e
o Opera renderizam do jeito antigo e o Mozilla do jeito certo.
O jeito antigo de calcular as larguras (mais alguns outros detalhes na interpretação do HTML) foi chamado de
“Quirks Mode” e o jeito novo, correto, de “Strict Mode”.
O velho Internet Explorer 5 sempre se comporta do jeito antigo. O Internet Explorer 6 chaveia o modo de acordo
com o DOCTYPE. Com um pequeno problema: se você inserir o prolog xml (<?xml version=”1.0″
encoding=”iso-8859-1″?>) misteriosamente o Internet Explorer 6 passa a ignorar o DOCTYPE e se comporta
como o antigo 5.
Na tabela abaixo, você pode conferir o comportamento dos browsers com prolog e sem:
Navegador S / DOCTYPE C / DOCTYPE C / prolog

IE 6 Quirks Strict Quirks
IE 5 Quirks Quirks Quirks
Opera Quirks Strict Strict
Mozilla Quirks Strict Strict
IE 5 Mac Quirks Strict Strict
Muitas pessoas recomendam que você não use o prolog xml, assim você não precisa se preocupar com o
Internet Explorer 6 e vai ter que tratar apenas os defeitos do Internet Explorer 5. Assim você escreve um “hack”
de CSS para cuidar apenas do Internet Explorer 5. Um hack bastante abrangente foi escrito por Tantek Çelik, e
seu tutorial pode ser encontrado em português traduzido pelo Maurício Samy em:
http://www.maujor.com/tutorial/boxmodelhack.php
O código do Tantek não é nada simples. Nós estamos usando aqui uma outra abordagem para o problema: use
o prolog xml e o DOCTYPE. Assim os bons navegadores vão se comportar da maneira correta e o Internet
Explorer vai funcionar do jeito antigo em todas as versões. Então use um hack para todas as versões do Internet
Explorer. Em geral são mais simples de escrever que os hacks que afetam apenas a versão 5. Veja abaixo um
hack fácil de fazer:
#conteudo{
/* para os bons browsers */
width:360px;
/* para o IE*/
_width:400px;
}
O atributo precedido de um underline só é visível ao Internet Explorer. Este código é bastante simples. O único
problema é que ele não valida no validador de CSS do W3C. Se você pode conviver com isso, poupe seu
tempo e use este. Se não, use um hack mais complexo, como por exemplo:
#conteudo{
/* para o IE*/
width:400px;
}
html>body #conteudo{
/* para os bons browsers */
width:360px;
}
Como o Internet Explorer não entende o seletor “>”, vai ignorar todo o segundo bloco. Este código é mais
complexo, mas passa no validador. Fica a seu critério escolher qual vai usar.
TRUQUES (IN)COMUNS
CARTAS NA MANGA
Esses truques te ajudarão a melhorar a sua produtividade no dia a dia.
Image-Replacement
Rollovers sem Pre-Load
Colunas Terminando Junto (sem imagem e sem funcionar no IE)
Colunas Terminando Junto (com imagem e funcionando no IE)
Image-Replacement
Na técnica de Image-Replacement você substitui a imagem por outro objeto mais acessível e flexível.
Por exemplo, suponha que você você tem a seguinte imagem:
Veja que na imagem tem uma lista de ítens.
Nosso problema estaria resolvido se apenas colocássemos essa imagem…
Mas, como fazer essa imagem ficar mais acessível para leitores de tela, robôs de busca, e outros dispositivos?
Vamos descobrir.
Veja que na imagem há uma LISTA de tarefas… Logo, se fôssemos fazer a mesma lista em texto, faríamos
com o seguinte código:
<ol>
<li>Mandar email para presidente</li>
<li>Comprar um chinelo</li>
<li>Esquecer de pagar a telefonica</li>
<li>Dominar o mundo</li>
</ol>
Ótimo. Agora temos que arranjar um jeito de essa lista ficar como a imagem… apenas usando CSS.
Vamos incrementar só um pouco o nosso código HTML; vamos colocar a lista que vimos acima, dentro de um
div com o ID postit:
<div id=”postit”> <ol> <li>Mandar email para presidente</li> <li>Comprar um chinelo</li> <li>Esquecer de pagar a telef
Resultado.
Agora, vamos para o código CSS.
Primeiro, vamos colocar como background do div, aquela imagem que vimos no começo. E vamos também,
definir a largura e altura.
div#postit {
width:266px; /* Define a largura */
height:303px; /* Define a altura */
background-image:url(postit.gif); /* define o background #postit */
background-repeat:no-repeat; /* faz o background não repetir */
}
Resultado.
Perceba que o texto da nossa lista ainda está aparecendo. Esse não é nosso propósito, aquele texto deve sumir.
É o que vamos fazer agora, para isso vamos utilizar a propriedade DISPLAY.
div#postit {
width:266px; /* Define a largura */
height:303px; /* Define a altura */
background-image:url(postit.gif); /* define o background #postit */
background-repeat:no-repeat; /* faz o background não repetir */
}
div#postit ol {
display:none; /* Faz a OL desaparecer */
}
Resultado final.
Tente desabilitar o CSS de sua página… Perceba que sua lista de texto ainda continua ali.
Para quem vê o resultado final, não sente diferença entre imagem e o image-replacement.
Rollovers sem Pre-Load
Você já deve ter feito um rollover de um link que ao passar o mouse, a imagem mudava.
Claro que antes da imagem mudar, ela tinha que ser carregada, estragando um pouco do efeito.
Para resolver esse problema, você dava um jeito para que as imagens fossem pré-carregadas…
Com CSS esse problema foi resolvido… Vamos ver abaixo, uma técnica muito engenhosa para fazermos esse
efeito de rollover sem preload das imagens.
Veja como ficará o resultado final.
Uma parte do truque se resume na imagem.
Em vez de usarmos várias, usaremas apenas 1, que conterá as várias fases do link.
Veja abaixo como a imagem é formada:
Vamos continuar, e você entenderá a outra parte do truque.
Considere o código HTML abaixo…
Não há nada de outro mundo, apenas um html com um simples link.

<head>
<title>Rollover com imagem sem preload</title>
</head>
<body>
<a href="http://curso.visie.com.br/conteudo/wp-admin/post.php#" mce_href="http://curso.visie.com.br/conteudo/wp-admin/
</body>
</html>
Resultado.
Agora, vamos atacar o CSS.
Primeiramente, para manipular esse link, temos que transformá-lo em um bloco e vamos definir dimensões
para ele.
a {
display:block; /* Faz o link virar um bloco */
width:69px; /* define uma largura */
height:69px; /* define a altura */
}
Resultado do passo 2.
Ótimo!
Agora, vamos lhe atribuir um background… a imagem será aquela mesmo do smiles…
Definiremos que esse background não será repetido e também posicionaremos ele no topo e na esquerda.
a {
background-image:url(link_roll.gif); /* define a imagem de fundo */
background-repeat:no-repeat; /* faz a imagem não se repeatir */
background-position:0 0; /* posiciona a imagem de fundo */
}
Perceba que precisamos sumir com o texto do link.
Para isso, usaremos as propriedades text-indent e overflow.
a {
text-indent:-5000px; /* tira o texto para fora do bloco do link */
overflow:hidden; /* some com tudo que está para fora do bloco de link */
}
A propriedade text-indent faz uma identação do lado esquerdo no começo do texto. Ou seja, o parágrafo.
Logo, se colocarmos uma identação muito grande e negativa, o texto irá vazar para fora do box.
E para evitar qualquer tipo de problema com o texto que está para fora do box, usamos a propriedade overflow.

Agora, o passo final.
Temos que fazer a imagem mudar quando o usuário passar o mouse em cima do link. Para isso, vamos apenas
deslocar o background do link. Usando o background-position.
a {
text-indent:-5000px; /* tira o texto para fora do bloco do link */
overflow:hidden; /* some com tudo que está para fora do bloco de link */
}
a:hover {background-position:0 -71px;} /* posiciona o fundo no passar do mouse */

a:active {background-position:0 -142px;} /* posiciona o fundo quando o link recebe foco */
Resultado final.
Muito fácil não é?
Essa técnica é ótima para fazer efeitos em menus. É só usar a sua criatividade.
Colunas Terminando Junto
Infelizmente, isso não é possível fazer de um jeito prático. Não que não exista a possibilidade de se fazer com
CSS, existe sim, e seria utilíssima, se funcionasse no Internet Explorer.
Vou explicar aqui duas formas de se fazer, a primeira não funcionará no Internet Explorer, mas a segunda sim.
Essa primeira técnica usará a propriedade DISPLAY para fazer um div emular uma tabela, celulas e etc.
Como essa técnica não funcionará no Internet Explorer, aconselho que você use Firefox ou Opera para
visualizar.
Então, temos que definir a estrutura de divs que emulará as tabelas.
Se fossemos fazer em tabelas, usaríamos a seguinte estrutura.
<table>
<tr>
<td>Esquerda</td>
<td>Meio</td>
<td>Direita</td>
</tr>
</table>
Nesse caso, iremos substituir os elementos da tabela, por divs. Depois emularemos esses elementos com a
propriedade DISPLAY do CSS. Primeiro, vamos fazer a estrutura XHTML. Ela ficará desse jeito.

<head>
<title></title>
</head>
<body>
<div id="geral"> 

<div id="limite"> 
<div id="esquerda"> 
....
</div>
<div id="meio"> 
ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia.
ipsum dolor sit amet. Morbi scelerisque, mauris id placerat ullamcorper,
ipsum dolor sit amet.
....
</div>
<div id="direita"> 

....
</div>
</div>
</div>
</body>
</html>
O div #geral substituirá a tag TABLE. O div #limite substituirá a tag TR. Os divs de dentro do div #limite, será as
TD.
Com a estrutura XHTML feita, vamos aplicar o CSS.
No #geral aplicaremos display:table;, para emular uma tabela.
No #limite, aplicaremos um display:table-row;, que fará o div emular uma linha de tabela, ou seja, uma TR.
Nos dis #esquerda, #direita e #meio, aplicares display:table-cell;, que fará eles emularem uma Célula de Tabela.
Para ficar mais fácil de visualizar, colocarei um background nas colunas das extremidades.
O CSS ficará assim:

div#geral {
display:table; /* Faz o #geral emular <table> **/
}
div#limite {
display:table-row; /* Faz o div emular um <tr> */
}
div#esquerda, div#direita, div#meio {

display:table-cell; /* Faz os divs emularem um <td> */
}
background:green;
}
Veja o resultado.
Excelente!
Perceba que se colocarmos mais conteúdo no div do meio, ou em qualquer outro div, o fundo das colunas
acompanham e terminam juntas.
Agora, se você quiser, é só colocar um CABECALHO e um RODAPÉ.
Vamos definir uma largura para o div #geral e também centralizá-lo na tela. Definiremos uma largura para os
divs que fazem as colunas, #esquerda e #direita.
div#geral {
display:table; /* Faz o #geral emular <table> */
width:700px; /* Define uma largura */
margin:0 auto; /* Faz o div centralizar, não funciona no IE */ } div#limite { display:table-row; /* Faz o div emular
Veja o resultado.
Lembre-se que você está apenas emulando uma tabela. Os elementos ainda continuam sendo DIV, então, todas
as propriedades que são usadas em DIV podem ser usadas livremente.
Já imaginou que facilidade seria fazer layouts se essa propriedade funcionasse no Internet Explorer?
Infelizmente, não poderemos usa-la tão cedo. Talvez daqui uns anos quando o Internet Explorer 6 estiver saindo
de linha, e a Microsoft já tiver lançado outro browser que seja mais adequado aos Padrões.
Colunas Terminando Junto (com imagem e funcionando no IE)
Felizmente - como quase tudo na área de Desenvolvimento Web - há um jeito de tentarmos emularmos isso.
Mas, ela não é tão prática como essa, teremos que usar uma imagem de background para emular o fundo das
colunas.
Usaremos a estrutura XHTML e o CSS que fizemos no capítulo

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt” lang=”pt”>
<head>
<title></title>
<style>
body {
text-align:center; /** necessário para fazer o layout centralizar no Internet Explorer **/
}
#geral {
width:706px;
margin:0 auto; /** centraliza o layout em qualquer browser, menos Internet Explorer **/
text-align:left; /** para fazer o texto alinhara esquerda**/
}
float:left; /* faz o div flutuar a esquerda */
}
div#meio {
}
div#rodape {
clear:both; /** assim ele não sofre influência do float dos divs **/
height:70px;
width:705px;
}
div#cabecalho {
height:70px;
width:705px;
}
</style>
</head>
<body>
<div id=”geral”>
<div id=”cabecalho”>
CABECALHO! Aqui vai o cabecalho
</div>
<div id=”esquerda”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris i
</div>
<div id=”meio”>
</div>
<div id=”direita”>
</div>
<div id=”rodape”>
RODAPÉ! Aqui vai o rodapé.
</div>
</div>
</body>
</html>
Veja o resultado.
Agora vem a parte mais dificil.
Para emular as colunas, iremos fazer uma imagem de 1px de altura. Nesse caso, faremos com essa imagem.
Colocaremos essa imagem se repetindo na vertical como background do div #geral.

body {
}
#geral {
width:706px;
background:url(colunas.gif) repeat-Y; /** Colunas uma imagem de fundo e faz ela se repeat na vertical **/
Veja o resultado.
Você deve ter percebido o fundo aparece no CABECALHO e também no RODAPÉ.
Talvez você queira ocultar. Para resolver sem ter que mexer no código XHTML. Podemos colocar no
CABECALHO e no RODAPE um fundo branco.
body {
}
#geral {
width:706px;
background:url(colunas.gif) repeat-Y; /** Colunas uma imagem de fundo e faz ela se repeat na vertical **/
}
}
div#meio {
}
div#rodape {
clear:both; /** assim ele não sofre influência do float dos divs **/
height:70px;
width:700px;
background:white; } div#cabecalho { height:70px; width:700px; background:white; }
Veja o resultado.
Ótimo… A ilusão está feita.
Agora, é só construir seu layout, melhorar o design e etc…
LINKS RECOMENDADOS
FONTES DE INFORMAÇÕES
Esses links podem te ajudar a estudar o material desse módulo. Muitos exemplos, truques e tudo mais podem
ser encontrados nos links abaixo. Portanto, seria muito produtivo se você separasse um tempo para estudá-los.
Manipulação de listas
Listamatic - TUDO ou quase tudo sobre listas
Pequeno artigo ensinando como colocar estilo em sub-listas
Brincando com Bullets
Brincando com Bullets 2
Artigo da ALA sobre listas
Pequeno artigo em português sobre manipulação de listas
Hacks
Centricle: CSS Hacks
Explorer Exposed
CssHack
Css Filters
Dive into mark
Eric Meyer - Tricking Browsers and Hiding Styles
CaioHack
Image-Replacement
http://www.kryogenix.org/code/browser/lir/
http://www.stopdesign.com/also/articles/replace_text/
http://www.moronicbajebus.com/playground/cssplay/image-replacement/
http://www.mezzoblue.com/archives/2003/12/12/accessible_i/
http://www.digital-web.com/features/feature_2003-08.shtml
http://phark.typepad.com/phark/2003/08/accessible_imag.html
http://blog.tom.me.uk/2003/08/07/
http://www.juicystudio.com/tutorial/css/image.asp
http://www.maxdesign.com.au/presentation/headings-as-images/index.cfm
Float
Floatutorial
Floating Thumbnails
Containing Floats
Position
Css Positioning
Vertical Centering with Css
Making the Absolute and Relative
Horizontally Centered Absolute Positioning
EXERCÍCIO
HORA DE POR A MÃO NA MASSA

Você escolherá um layout, de qualquer site que você conheça, que não seja nem muito fácil nem muito dificil, e
converterá em tableless. Se você estiver trabalhando em algum projeto, e quiser aproveitar a oportunidade para
desenvolve-lo usando os Padrões, sinta-se à vontade.
Não precisa converter o site todo. Escolha apenas uma página do site, seja ela interna ou HOME.
Como você será avaliado?
Para ser aprovado, seu exercício deverá suprir os seguintes pontos, por ordem de importância:
1. Válido pelo W3C

Primeiramente seu código deverá ser válidado pelo W3C no modo Strict!Para tanto, use o validador:
validator.w3.org;
2. Semântica
Seu código deverá ser sermântico. Ou seja, usar tags para suas funções apropriadas: <p> para
parágrafos, <h1> <h2> etc, para títulos e assim por diante;
3. Compatibilidade
Deverá ser compatível com pelo menos 3 browsers atuais: Opera, Firefox, Internet Explorer 6,
Konqueror (Linux), Internet Explorer (Mac) e Safari (Mac);
4. Organizado
Seu código deverá ser organizado e identado. Um código que qualquer um consiga ler e entender;
Copyright © 2006 Visie Padrões Web. Todos os direitos reservados.

Tableless Avançado PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tableless Avançado PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

TABLELESS II

Diga-se de passagem, o Internet Explorer foi o primeiro browser a abordar os padrões,

PDF created with pdfFactory Pro trial version www.pdffactory.com

O que você tem a lucrar

A seguir, uma lista dos benefícios de se adotar os Padrões Web e Tableless:

Desenvolvimento mais ágil

Significativa parte do tempo no processo de desenvolvimento da maioria dos websites é desperdiçada em

Facilidade para criar versões de layout

Paz entre designers e programadores

Perfeita integração com .NET, Java, PHP, ASP etc.;

Lembrando sempre, que cada caso é um caso.

Controle sobre o projeto

Melhor visibilidade no Google

Para mais informações

Web Browser usage share

UMA BREVE HISTÓRIA DO CSS

E aqui começou a revolução

PDF created with pdfFactory Pro trial version www.pdffactory.com

O uso do CSS e suas qualidades

<b><div>Um "b" não pode conter um "div".</div></b>

Mudando essas condições

O valores da propriedade display

Valores Descrição Suporte

* KMOS: Konqueror, Mozilla, Opera, Safari

Os valores INLINE e BLOCK

PDF created with pdfFactory Pro trial version www.pdffactory.com

Muito simples não é?

Veja o resultado – Um link quadrado!.

PROPRIEDADES: FLOAT E CLEAR

Veja o código HTML e CSS abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">

Veja resultado desse primeiro passo.

Veja, abaixo, o que acontece colocarmos 2 objetos consecutivos flutuando a esquerda.

PDF created with pdfFactory Pro trial version www.pdffactory.com

Veja o resultado desse passo aqui.

Agora, veja se vários objetos estiverem flutuando a esquerda.

OS VALORES RIGHT, LEFT E BOTH

Você pode entender melhor, vendo um exemplo prático..

Você pode ver o resultado disso neste exemplo.

Para entender melhor, veja este exemplo.

Agora, o mesmo objeto ignorou apenas o objeto com float:right;.

PDF created with pdfFactory Pro trial version www.pdffactory.com

Veja a imagem abaixo para esclarecer essa idéia:

Sem complicação, não é?

Os seletores para a propriedade “padding” são os seguintes:

PDF created with pdfFactory Pro trial version www.pdffactory.com

Sempre em sentido horário!

O Valor AUTO da propriedade MARGIN

PDF created with pdfFactory Pro trial version www.pdffactory.com

Por sorte, é fácil de resolver.

Considere o seguinte código HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt" lang="pt">

Agora, vamos começar a fazer o CSS.

Ficará mais ou menos assim: Exemplo 1

O atributo Margin, suporta um valor chamado AUTO.

Veja o resultado deste passo.

Estaria tudo bem se o Internet Explorer não ignorasse o valor AUTO.

Veja o resultado desse passo.

Isso se resolve colocando um text-align:left; no box.

PDF created with pdfFactory Pro trial version www.pdffactory.com

Veja o resultado final.

LAYOUT FIXO DE 3 COLUNAS (MODO 1)