Tableless AvanÃ Ado

TABLELESS II
Tcnicas avanadas
O QUE TABLELESS?!
DESDE O PRINCPIO
Muitas pessoas que esto entrando em contato agora com os Web Standards perguntam o que exatamente Tableless. Simplificando, eu diria que uma metodologia que abre mo das tabelas de HTML para fazer a construo do layout do site em CSS. Desta forma, possvel separar em camadas a informao, a programao e a formatao ou layout do site. Para entender melhor esse conceito, precisamos rever rapidamente a histria da web. A Web foi criada para ser um ambiente onde fosse possvel trocar informaes livremente, e que essas informaes pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consrcio internacional, onde so desenvolvidas os padres 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 padres, implementando na sua verso 3.0, os Cascading Style Sheets (CSS).
Naquela poca, no mercado de browsers, as opes ainda eram poucas: consistiam apenas em Lynx, Mozaic e Netscape Navigator, da Netscape Communications, ento liderada por Jim Clark. A Microsoft, de Bill Gates, resolveu entrar nesse mercado com lanamento do Internet Explorer. A concorrncia entre os dois browsers chamada at hoje de Guerra dos Browsers. Durante essa guerra, os padres do W3C ainda eram meros rascunhos. As duas empresas no podia esperar que esses rascunhos ficassem prontos para poderem lanar seus browser, e criaram seus prprios padres. Agora o impasse: Os browsers tinham seus prprios padres Os desenvolvedores no conseguiam criar um nico cdigo 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 usurios. O usurio que usava Netscape, no 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 vulnervel.
PDF created with pdfFactory Pro trial version www.pdffactory.com
Como a web no tinha sido projetada para desenvolver os criativos ambientes grficos que temos atualmente, naturalmente, os recursos de desenvolvimento eram limitados e os criadores faziam das tripas corao para criar seus sites. Entre as muitas idias 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 tcnica de aninhamento de tabelas para contornar os problemas que os padres proprietrios traziam. A esse tipo de tcnica, que usada atualmente pela maior parte dos websites, chamamos de layout com tabelas. Embora essas solues 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, webTVs, leitores de tela, sem falar dos modernos eletro-domsticos que acessam internet); Diferentes tipos de conexo internet com caractersticas 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 verses diferentes para os vrios ambientes muito demorado, complicado e custoso, tornando uma simples manuteno uma enorme dor de cabea; Alm disso, o desenvolvimento de websites usando o mtodo tradicional no permite que programadores e designers trabalhem simultaneamente.
Fazer sites tableless muito mais do que no usar tabelas para a estruturao dos layouts. usar de forma correta os padres que o W3C criou. Hoje, os Padres Web (Web Standards) esto 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 benefcios de se adotar os Padres Web e Tableless:
Reduo de custos
Ao contrrio do mtodo tradicional, que quase sempre linear, utilizando Web Standards a equipe de negcio, design e programao podem atuar simultnea e independentemente. Isso acelera bastante a produo e torna a manuteno de um projeto web muito simples. Alm da economia de tempo, h reduo de custos na compra de licenas de software.
Desenvolvimento mais gil

Significativa parte do tempo no processo de desenvolvimento da maioria dos websites desperdiada em retrabalho de design para que o HTML fique com aparncia profissional. O desenvolvimento Web Standards corta o retrabalho praticamente a zero.
Tecnologia acessvel
Um designer treinado em Web Standards no depende de um programador para saber o que pode ou no ser implementado em um projeto web; e vice-versa.
Facilidade para criar verses de layout

Uma vez que contedo, programao e design esto em camadas separadas, incomparavelmente mais
rpido desenvolver verses de layout para uma mesma tela. Veja o exemplo do site CSS Zen Garden. Com apenas a mudana do CSS, o site totalmente transformado. No modificado uma s linha de HTML. Interessante, no?
Paz entre designers e programadores

Com a separao entre contedo e layout promovida pelos Web Standards, designers e programadores podem trabalhar simultaneamente e de maneira independente.
Perfeita integrao com .NET, Java, PHP, ASP etc.;

Web Standards e Tableless tm total integrao com as principais tecnologias de mercado. Pequenas mudanas 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 domnio exclusivo sobre o desenvolvimento, assegurando que qualquer desenvolvedor poder dar continuidade ou realizar futuras manutenes.
Melhor visibilidade no Google

Optar pelos Web Standards significa valer-se da estrutura semntica simples e coerente do HTML, fator primordial para ter um melhor posicionamento nas ferramentas de busca.
Velocidade do website
O cdigo HTML se torna muito mais compacto ao se separar contedo, design e programao, conforme os Web Standards. Alm disso, a tecnologia Tableless permite que o navegador interprete as informaes de layout (em um arquivo CSS) de 30% a 70% mais rapidamente.
Acessibilidade
O uso de Web Standards facilita muito a aplicao de normas de acessibilidade. Isso garante o acesso ao website, no importando que combinao de navegador e plataforma o usurio possua. Cabe agora aos desenvolvedores atualizarem seus conhecimentos e revolucionar a Internet. Como ns dizemos: primeiro, a internet mudou a vida das pessoas; agora, so as pessoas que vo mudar a internet.
Para mais informaes

Web Browser usage share Browser War Sobre o Internet Explorer
Sobre o Netscape Navigator Jim Clark Bill Gates
UMA BREVE HISTRIA DO CSS

E aqui comeou a revoluo
Formatar informao dos sites no algo novo. Por volta de 1970, no comeo da tragetria do SGML, vrios browsers j personalizavam as aparncia dos documentos, cada um com seu estilo prprio. Quando o HTML foi criado, a inteno no era de forma alguma, formatar informao. A medida que o HTML foi se popularizando e evoluindo, foram includas em suas qualidades, o domnio de controlar algumas aparncias 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 diferenas de implementaes, o que dificultava a visualizao dos sites, trazendo menos controle na navegao pela web. Por esse tempo apareceu o salvador da ptria. Hkon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fcil para formatar a informao. Foi a que ele props a criao do CSS ou Cascading Style Sheets Esse era o ano de 1994. Aceitando o convite feito pelo prprio Hkon, Bert Bos - que naquele tempo estava trabalhando em um browser chamado Argo - comeou a trabalhar no projeto. Logo, os dois comearam 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 Hkon e Bert Bos. O resultado apareceu logo, em 1996, eles lanaram a recomendao oficial pelo W3C do CSS Level 1 (CSS 1). Dois anos depois, no dia 12 de Maio de 1998, eles lanaram a recomendao do CSS de nvel 2. A segunda verso das Folhas de Estilo para web. O nvel 3 do CSS ainda est em desenvolvimento. Mas, sabemos que as facilidades sero 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 especificao do CSS fosse lanada em 1996, os browsers levariam mais trs anos para ter suporte completo ao CSS de nvel 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 no esto 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 verses 5.+ e 6. No tem suporte total ao CSS 2, e como se no bastasse, h bugs em algumas propriedades que ele suporta. Entretanto, conseguimos criar um site sem problemas e que seja compatvel com todos os browsers atuaiz (Firefox, Opera, Internet Explorer, Safari, Konqueror, Camino, etc). O W3C, lanou o CSS 2.1. Que so resolues de bugs que haviam nas especificaes do CSS. Isso melhorou o suporte dos browsers, ampliando a compatibilidade entre eles.
Hoje em dia, o nvel de compatibilidade entre os browsers muito parecido, de forma que se voc implementar algo especfico em um browser, muito provvel que em outro browser esteja igual. Portanto, o desenvolvedor pode ficar tranqilo quanto a maioria dos problemas causados por diferenas entre browsers. No estou dizendo que 100% de certeza. Vai haver alguns problemas que voc ter que resolver, mas nada que te faa desisitir de um layout ou algo parecido.
O uso do CSS e suas qualidades

O uso do CSS trs muitas facilidades, como j vistas no primeiro captulo 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 tambm baseade em CSS, bem como os Widgets do ex-Konfabulator, agora chamado Yahoo! Widget Engine. Perceba ento que o CSS no est restritro a pginas de internet. Ele vai alm. Hoje em dia, CSS pode ser usado at mesmo para diagramar Livros ou outros servios de impresso. O CSS ento, se transforma em uma ferramenta no s de formatao de informao pra sites, mas tambm formatao e diagramao de qualquer aplicao. Basta que o autor da aplicao, queria esse suporte. Com a popularizao das aplicaes baseadas em XML - como o Firefox que usa seu prprio padro de XML chamado XUL - a diagramao visual feitas com CSS ser normal, e acima de tudo, til.
PROPRIEDADE DISPLAY
Objetos inline
No cdigo XHTML h dois tipos de objetos: O objeto de linha, conhecido como inline e o objeto de bloco, conhecido tambm como block. O objeto inline so aqueles objetos que so utilizados em linhas de texto por exemplo a tags de formatao como b ou i. Elas formatam uma linha de texto, sem quebras de linhas, servem para marcar uma parte do texto. Precisamos chamar a ateno para uma pequena regra: Nenhum objeto de linha, pode conter um objeto de bloco. Portanto extremamente errado, escrever cdigo como:
<b><div>Um "b" no pode conter um "div".</div></b>
Ou qualquer cdigo parecido. Por isso, lembre-se: Nenhum objeto de linha, pode conter um objeto de bloco.
Objetos de bloco
Os objetos de bloco so aqueles guardam vrios outros objetos. Ou seja, so 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 contedo so outros objetos. Objetos como form, p, ul e etc, so objetos de block. Uma caracterstica 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 so aqueles que s podem conter texto (e claro objetos inline), proibidos de conter outros objetos de bloco. Objetos de texto so por exemplo o p e o blockquote. Eles no podem conter nada alm de texto e tags inline.
J o objeto div por exemplo, pode conter todo e qualquer objeto. O formulrio tambm pode conter todo e qualquer objeto. Objetos assim, no tem restrio, mas cada um com sua funcionalidade.
Mudando essas condies

Agora que j sabemos como as tags funcionam, podemos comear a brincar com a propriedade display. A propriedade display serve para controlar a visualizao das tags. Ela controla se uma tag aparecer como inline ou block. Ento, voc pode simplesmente mudar a visualizao 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 no so permitidas, como por exemplo, mudar tamanho de largura, altura, colocar margem, e etc Mas ateno: A propriedade no muda a funo semntica da tag. A tag b de nosso exemplo, continua tendo sua funo, que deixar o texto em negrito. Ela ainda proibida de conter tags de bloco.
O valores da propriedade display

A propriedade display tem uma srie de valores interessantes. Que vo desde transformar tags inline em blocos, e vice-versa, at fazer o div emular uma tabela. Por isso, mos obra! Explicarei a fundo, apenas as propriedades que voc usar com mais freqencia. E uma ou outra que seja interessante voc saber.
Valores
Suporte Todos os O elemento no ser mostrado. none 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 KMOS table depois. KMOS table-column Essa propriedade faz o objeto emular uma coluna de tabela.
* KMOS: Konqueror, Mozilla, Opera, Safari
Descrio
O valor NONE
O valor none dispensa grandes explicaes. Ela apenas define se o objeto aparecer na tela ou no. Se voc definir para um objeto um display: none; esse objeto no 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 cdigo:
<html> <head> <title>Teste</title> <style> b { display:block; /* Faz com que a tag B aparea 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 cdigo acima, ns 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 funo semntica da tag b continua a mesma. Ela no 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. Ento, podemos inverter isso, transformando-o em uma tag de linha. Usando o valor inline, desta forma:
<html> <head> <title>Teste</title> <style> div { display:inline; /* Faz com que a tag DIV aparea 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 no ?
Esses dois valores sero os mais usados por voc em seu desenvolvimento. Por exemplo, voc ir transformar freqentemente links (a) em tags de bloco. Para por exemplo, fazer um mapa de imagens, um boto, etc Veja esse exemplo:
<html> <head> <title>Teste</title> <style> a { display:block; /* Faz com que o LINK, normalmente um objeto de linha, aparea 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 clicvel 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 no muda o valor semntico 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 no muda a funo da tag.
PROPRIEDADES: FLOAT E CLEAR

PROPRIEDADE FLOAT
A propriedade float muito importante para a construo de layouts sem tabelas. Ele extremamente simples de se compreender e usar; Seus valores so: none, left e right, sendo none o default. Veja o cdigo 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 { border:1px solid black; 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> 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... </p> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris id placerat 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, 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> 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, 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> 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, tempus eu, nonummy a, facilisis non, diam. Nullam lectus lorem, 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 vrios objetos estiverem flutuando a esquerda. Perceba que se um objeto no cabe na tela, ele automticamente ocupa o espao disponvel abaixo do outros objetos. Se voc quiser que um objeto flutue a esquerda e o outro a direita, tambm 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 padro. 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 padro). Vamos ver com mais detalhes o que esses valores fazem. Quando atribumos o valor BOTH na propriedade CLEAR (clear:both;), definimos que o elemento no sofrer influncia alguma de nenhum objeto com float, tanto com float:left; quanto com float:right;. Voc pode entender melhor, vendo um exemplo prtico.. 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 influncia dos objetos com float:right;. Voc pode ver o resultado disso neste exemplo. J o valor RIGHT atribudo para a propriedade CLEAR (clear:right;), o elemento passar a ignorar os objetos quem esto 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 formatao, no poderia faltar propriedades que controlassem medidas e distncias como Margem. Ento, as propriedades MARGIN e PADDING so de extrema importncia, tanto para diagramar de forma flexivel grandes blocos de texto, quanto para controlar medidas dos objetos do layout. Como as duas propriedades so bastante parecidas, no precisamos estuda-las separadamente. A propriedade Margin responsvel pelo espao que fica para fora do objeto. Ou seja, o espao que comea da borda para fora do objeto. J o padding, responsvel pelo espao que fica da borda at o contedo do objeto. Veja a imagem abaixo para esclarecer essa idia:
Sem complicao, no ? A sintaxe das duas tambm muito parecida. Voc pode definir margin/padding diferentes para cada lado do objeto, tendo assim mais flexibilidade na hora da cosntruo do seu layout. O seletores da propriedade margin correspondentes para cada lado so:
padding-top Define o espaamento para o lado superior do objeto margin-right Define o espaamento para o lado direito do objeto margin-bottom Define o espaamento para o lado inferior margin-left Define o espaamento para o lado esquerdo
Lembrando sempre que o MARGIN o espao de margem Ou seja, da borda para fora. Os seletores para a propriedade padding so os seguintes:
padding-top Define o espaamento para o lado superior do objeto padding-right Define o espaamento para o lado direito do objeto padding-bottom Define o espaamento para o lado inferior padding-left Define o espaamento para o lado esquerdo
Lembrando sempre que o PADDING o espao de interno Ou seja, da borda para dentro. Existe uma forma muito fcil 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 seqencia: TOPO, DIREITO, BAIXO, ESQUERDA. Assim:
margin: 15px 30px 5px 25px; padding: 30px 15px 25px 5px;
O primeiro valor dos seletores acima so 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 so para o lado ESQUERDO (25px de margin e 5px de padding). Um jeito fcil de guardar a seqencia, lembrando do Relgio! Veja a imagem:
Sempre em sentido horrio!
O Valor AUTO da propriedade MARGIN

A propriedade Margin tem um valor que no 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, no importando a resoluo do usurio. 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 no reconhecido pelo Internet Explorer. O que dificulta s um pouquinho a centralizao do objeto/layout no Internet Explorer. Mas no se preocupe, tem jeito de fazer sim, teremos que colocar mais algumas linhas de cdigo 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 faclimo se no houvesse um pequeno bug no Internet Explorer. Por sorte, fcil de resolver.
Considere o seguinte cdigo HTML:
<!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> </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, tempus eu, nonummy a, facilisis non, diam. Nullam lectus lorem, elementum nec, suscipit et, suscipit vel, sem. </div> </body> </html>
Agora, vamos comear a fazer o CSS.

div { width:300px; border:1px solid black; background:#FFF9D7; font:80% Verdana; }
Ficar mais ou menos assim: Exemplo 1 O atributo Margin, suporta um valor chamado AUTO. Se esse valor for atribudo aos lados direito e esquerdo, uma margem automtica ser feita, resultando na centralizao do objeto.
div { width:300px; border:1px solid black; background:#FFF9D7; font:80% Verdana; margin:0px auto; /* Aqui est a mgica */ }
Veja o resultado deste passo. Se voc no estiver usando o Prolog XML no comeo de seu documento, o Internet Explorer 6, funcionar perfeitamente. Caso contrrio, ele se comportar do mesmo jeito que o Internet Explorer 5. Esse assunto visto com mais detalhes no captulo de Modes, Doctypes e Hacks Estaria tudo bem se o Internet Explorer no ignorasse o valor AUTO. Felizmente h uma soluo. Teremos que usar mais cdigo CSS para consertar, mas no muito. Veja abaixo:
body { text-align:center; /* Isso far a centralizao 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 no era o nosso propsito. 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 centralizao no Internet Explorer */ } div { width:300px; border:1px solid black; background:#FFF9D7; font:80% Verdana; margin:0px auto; /* Aqui est a mgica */ 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 fcil fazer um layout com 3 colunas usando float. Vamos fazer passo a passo para que fique mais fcil de entender. Veja o cdigo HTML 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> </head> <body> <div id="esquerda"> 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, 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 id="meio"> 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, 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. 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, 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 id="direita"> 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, 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> </body> </html>
Veja o resultado desse passo. Agora, vamos colocar a fazer o CSS.

div { border:1px solid black; } 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 */ }
No fizemos nada de mais. Apenas colocamos borda em todos os DIVS, para podermos visualizar melhor o layout. E tambm definimos uma largura para os divs.
Veja o resultado. Agora, vamos comear a mgica.

div { border:1px solid black; } div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ float:left; /* Faz todos os divs flutuarem a esquerda */ } div#meio { width:400px; /* Faz o div do MEIO ficar com 400px de largura */ }
Veja J temos 3 colunas. Fcil, no ?! 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 cdigo adicionei um div com ID RODAPE. Confira. Como todos os divs esto 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 apaream 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 influncia do float dos outros divs. Temos que remediar isso usando a propriedade CLEAR. Definiremos ento 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 no seja Internet Explorer, basta colocar um margin: 0 auto; no div GERAL. O valor auto faz o seguinte: ele calcula o espao que sobra do lado direito da pgina, divide por dois e ento, centraliza o layout. O resultado vocc pode conferir aqui. Se voc perceber, no Internet Explorer, isso no funcionou, teremos que contornar isso. Bem, teremos que colocar algumas linhas a mais no cdigo, 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 tambm ficou centralizado, e no queremos que isso acontea. 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 trs 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. Ento, 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 construda, vamos agora para o CSS. Nosso CSS tambm no mudar muito do CSS usado no Modo 1 Nesse primeiro cdigo, vamos apenas definir tamanhos e bordas para podermos visualizar melhor os objetos da pgina. O cdigo 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 usaro float, sero as colunas. A coluna da esquerda, usar float:left; e a coluna da direita usar float:right; Esse o segredo. Como as duas colunas esto flutuando em lados opostos, e o div#meio no est usando float algum, ele encaixa automticamente no meio das duas colunas
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. 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 espao confortvel para o texto.
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 */ } 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.
div {border:1px solid black; } body {text-align:center;} /* Faz todo contedo 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.
div {border:1px solid black; } body {text-align:center;} /* Faz todo contedo 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, div#direita {width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ } 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 no o leu ainda, leia. Isso preciso para que voc possa obsorver o mximo desse estudo. Abaixo, segue o cdigo XHTML que usamos para fazer o layout fixo, e que usaremos agora para fazer o fluido.
<!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 com 3 colunas</title> </head> <body> <div id="geral"> <div id="cabecalho"> CABECALHO </div> <div id="esquerda"> 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, .... </div> <div id="direita"> 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, ... </div> <div id="meio"> 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, ... </div> <div id="rodape"> RODAPE </div> </div> </body> </html>
Agora, confira o CSS.

div { border:1px solid black; } body {text-align:center;} /* Faz todo contedo 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, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ } 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 */
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 { border:1px solid black; } body {text-align:center;} /* Faz todo contedo centralizar - PRO IE */ #geral { margin:0 auto; /* Faz o layout GERAL centralizar */ text-align:left; /* Faz o texto ficar alinhado a esquerda */ } div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ } 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 */
Resultado. Agora temos um problema. O #geral no est contendo todos os elementos do Site. Esse problema acontece por causa das colunas que esto com float. Para resolver esse problema, definiremos um clear:both; para o #rodape. Assim, o Rodap do nosso site no ser influnciado pelo float das colunas.
div { border:1px solid black; } body {text-align:center;} /* Faz todo contedo centralizar - PRO IE */ #geral { margin:0 auto; /* Faz o layout GERAL centralizar */ text-align:left; /* Faz o texto ficar alinhado a esquerda */ } div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ } 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 */ #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 posio do elemento ser esttica, relativa, absoluta ou fixa. Vejamos abaixo os valores possveis dessa propriedade:
Valores Descrio Mantm a posio normal do elemento no documento. No suporta propriedades left, static top, right, e botom. o valor padro da propriedade. O elemento com valor absoluto pode ser posicionado em qualquer lugar da pgina. As coordenadas so relativas ao elemento-pai que possua tambm um atributo position. Se absolute no houver nenhum elemento-pai com position, as coordenadas so em relao ao stage do navegador.
KMOS: Konqueror, Mozilla, Opera, Safari
Suporte Todos os Browsers Todos os browser
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 distncia da esquerda, e 50 pixels do topo, faramos dessa forma:
div { position:absolute; left:30px; top:50px; }
position: relative;
Um objeto com a propriedade position: relative; aquele objeto que sua posio referciada pela sua posio atual. Ou seja, se voc definir top: 20px; e left:20px;, ele ficar a 20 pixels de distncia do topo e da esquerda, o ponto 0 ser referncia do ao extremo esquerdo superior do objeto. Ufa! De uma olhada neste exemplo para entender melhor. Se voc apenas definir position: relative; e no 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>, ento, o pai do <p> ser o <div>.
A posio absolute um pouco diferente da relativa. Em vez o objeto se posicionar tomando como referncia, sua posio, ele toma como referncia o objeto pai. Ento, 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. Ateno: O objeto com position: absolute; s ser refernciado pelo pai, se o pai tiver um position absolute ou
relative.
position: fixed;
O valor Fixed muito interessante. Acho que dispensa explicaes Vendo o exemplo, voc saber o que ele faz. Detalhe: Essa propriedade no 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 so listas organizadas de alguma forma. Os tens dessa lista so acompanhados por nmeros,
<ol> <li>Zzinho</li> <li>Huguinho</li> <li>Luizinho</li> </ol>
Resultado:
1. Zzinho 2. Huguinho 3. Luizinho
Dentro da explicao do termo (LI), podemos colocar colocar pargrafos, imagens, quebra de linhas, e tambm outras listas.
Listas No Ordenadas
Listas no ordenadas, uma lista de tens aleatrios, que no necessitam de uma organizao especifica.
<ul> <li>Luizinho</li> <li>Huguinho</li> <li>Zzinho</li> </ul>
Ficando assim:
Luizinho Huguinho Zzinho
Dentro da explicao do termo (LI), podemos colocar colocar pargrafos, imagens, quebra de linhas, e tambm outras listas.
Listas de Descrio
As listas de descrio so um pouco diferentes dos outros dois tipos de listas. Ela serve para descrever um determinado tem.
Ento, ela vem com um tem e este tem acompanhado de sua descrio.
<dl> <dt>Tio Patinhas</dt> <dd>Tio do Huguinho, Zzinho e Luizinho.</dd> </dl>
Resultado:
Tio Patinhas Tio do Huguinho, Zzinho e Luizinho.

Manipulando Listas
Os tens das listas (LI e DD) pode conter pargrafos (P), imagens, quebra de linhas ou tambm outras listas. Voc pode mudar tambm o estilo dos bullets.
Valores para list-style-type
Descrio
Resultado
Mouse Teclado Monitor Placa de Vdeo Mouse Teclado Monitor Placa de Vdeo Mouse Teclado Monitor Placa de Vdeo Mouse Teclado Monitor Placa de Vdeo Mouse Teclado Monitor Placa de Vdeo
disc
Especifica um sinal de disco
square
Especifica um sinal de quadrado
* decimal-leading-zero
Nmeros decimais comeando com zeros na frente ( 01, 02, 03, , 98, 99)
upper-roman
Nmeros romanos em maisculo
lower-alpha e lower-latin Letras do alfabeto em minsculo
* Esses estilos no funcionam no Internet Explorer 6 Voc pode tambm colocar uma imagem como bullet. Particularmente eu no recomendo, porque essa propriedade muito limitada. Eu sempre aconselho, em vez de fazer bullets com imagem usando list-style-image mais fcil 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 so fceis 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 comear fazendo uma lista.
<ul> <li><a <li><a <li><a <li><a </ul>
href="#"" href="#"" href="#"" href="#""
>Home</a></li> >Artigos</a></li> >Sobre</a></li> >Contato</a></li>
Veja o resultado. Feito isso, vamos agora comear a mgica. Primeiro, vamos tirar as margens e os paddings. Tiraremos tambm 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 formatao alguma - um menu horizontal perfeito. Voc fica livre para colocar a formatao que quiser na sua lista, de acordo com suas necessidades. Se quiser dar uma olhada nessa lista que fizemos com alguma formatao, pode conferir aqui. Visite o site Listamatic. Aqui voc ter uma srie de amostras de menus horizontais e se quiser, verticais tambm. Aproveite!
DOCTYPES, MODES E CSS HACKS

CADA COISA NO SEU LUGAR

Erro de Box Model
H um detalhe na especificao de tamanhos via CSS que precisamos considerar. Imagine o seguinte cdigo:
#box{ width:200px; padding:20px; margin:20px; border:20px solid blue; }
Este cdigo 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 especificaes 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 especificaes, tornando mais claros esses detalhes. Eis como o cdigo acima deve ser renderizado:
Percebe a complicao? O problema que muitos sites foram construdos enquanto os navegadores se comportavam do jeito antigo. Os desenvolvedores de browsers se encontraram numa situao difcil. Adotar o novo padro? Isso faria com que muitos sites antigos deixassem de funcionar corretamente. Fazer do jeito antigo? A seriam os sites novos que no funcionariam. Criaram ento um modo interessante de resolver o problema. Os navegadores atuais podem funcionar tanto do jeito antigo quanto do novo. Se encontram uma pgina 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 no 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 interpretao 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 IE 6 IE 5 Opera Mozilla IE 5 Mac
S / DOCTYPE Quirks Quirks Quirks Quirks Quirks
C / DOCTYPE Strict Quirks Strict Strict Strict
C / prolog Quirks Quirks Strict Strict Strict
Muitas pessoas recomendam que voc no use o prolog xml, assim voc no 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 portugus traduzido pelo Maurcio Samy em: http://www.maujor.com/tutorial/boxmodelhack.php O cdigo do Tantek no nada simples. Ns estamos usando aqui uma outra abordagem para o problema: use o prolog xml e o DOCTYPE. Assim os bons navegadores vo se comportar da maneira correta e o Internet Explorer vai funcionar do jeito antigo em todas as verses. Ento use um hack para todas as verses do Internet Explorer. Em geral so mais simples de escrever que os hacks que afetam apenas a verso 5. Veja abaixo um hack fcil de fazer:
#conteudo{ /* para os bons browsers */ width:360px; /* para o IE*/ _width:400px; }
O atributo precedido de um underline s visvel ao Internet Explorer. Este cdigo bastante simples. O nico problema que ele no valida no validador de CSS do W3C. Se voc pode conviver com isso, poupe seu tempo e use este. Se no, 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 no entende o seletor >, vai ignorar todo o segundo bloco. Este cdigo mais complexo, mas passa no validador. Fica a seu critrio escolher qual vai usar.
TRUQUES (IN)COMUNS
CARTAS NA MANGA
Esses truques te ajudaro 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 tcnica de Image-Replacement voc substitui a imagem por outro objeto mais acessvel e flexvel. 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 colocssemos essa imagem Mas, como fazer essa imagem ficar mais acessvel para leitores de tela, robs de busca, e outros dispositivos? Vamos descobrir. Veja que na imagem h uma LISTA de tarefas Logo, se fssemos fazer a mesma lista em texto, faramos com o seguinte cdigo:
<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 cdigo 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 cdigo CSS. Primeiro, vamos colocar como background do div, aquela imagem que vimos no comeo. E vamos tambm, 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 no repetir */ }
Resultado.
Perceba que o texto da nossa lista ainda est aparecendo. Esse no nosso propsito, 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 no repetir */ } div#postit ol { display:none; /* Faz a OL desaparecer */ }
Resultado final. Tente desabilitar o CSS de sua pgina Perceba que sua lista de texto ainda continua ali. Para quem v o resultado final, no sente diferena 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 tcnica 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 vrias, usaremas apenas 1, que conter as vrias fases do link. Veja abaixo como a imagem formada:
Vamos continuar, e voc entender a outra parte do truque. Considere o cdigo HTML abaixo No h nada de outro mundo, apenas um html com um simples link.
<!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>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 dimenses 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 no ser repetido e tambm posicionaremos ele no topo e na esquerda.
a { display:block; /* Faz o link virar um bloco */ width:69px; /* define uma largura */ height:69px; /* define a altura */ background-image:url(link_roll.gif); /* define a imagem de fundo */ background-repeat:no-repeat; /* faz a imagem no se repeatir */ background-position:0 0; /* posiciona a imagem de fundo */ }
Resultado do passo 3. Perceba que precisamos sumir com o texto do link. Para isso, usaremos as propriedades text-indent e overflow.
a { display:block; /* Faz o link virar um bloco */ width:69px; /* define uma largura */ height:69px; /* define a altura */ background-image:url(link_roll.gif); /* define a imagem de fundo */ background-repeat:no-repeat; /* faz a imagem no se repeatir */ background-position:0 0; /* posiciona a imagem de fundo */ 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 identao do lado esquerdo no comeo do texto. Ou seja, o pargrafo. Logo, se colocarmos uma identao 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.
Resultado do passo 4. Agora, o passo final. Temos que fazer a imagem mudar quando o usurio passar o mouse em cima do link. Para isso, vamos apenas deslocar o background do link. Usando o background-position.
a { display:block; /* Faz o link virar um bloco */ width:69px; /* define uma largura */ height:69px; /* define a altura */ background-image:url(link_roll.gif); /* define a imagem de fundo */ background-repeat:no-repeat; /* faz a imagem no se repeatir */ background-position:0 0; /* posiciona a imagem de fundo */ 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 fcil no ? Essa tcnica tima para fazer efeitos em menus. s usar a sua criatividade.
Colunas Terminando Junto

Infelizmente, isso no possvel fazer de um jeito prtico. No que no exista a possibilidade de se fazer com CSS, existe sim, e seria utilssima, se funcionasse no Internet Explorer. Vou explicar aqui duas formas de se fazer, a primeira no funcionar no Internet Explorer, mas a segunda sim. Essa primeira tcnica usar a propriedade DISPLAY para fazer um div emular uma tabela, celulas e etc. Como essa tcnica no funcionar no Internet Explorer, aconselho que voc use Firefox ou Opera para visualizar. Ento, temos que definir a estrutura de divs que emular as tabelas. Se fossemos fazer em tabelas, usaramos 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.
<!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> </head> <body> <div id="geral">  <div id="limite">  <div id="esquerda">  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, .... </div> <div id="meio">  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. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetuer adipiscing Curabitur aliquam. Morbi scelerisque, mauris id placerat ullamcorper, ligula felis tincidunt dui, at pretium eros velit vitae augue. Lorem ipsum dolor sit amet. .... </div> <div id="direita">  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, .... </div> </div> </div> </body> </html>
elit. Nunc lacinia. elit. Nunc lacinia. elit. Nunc lacinia. elit. Nunc lacinia. elit. Nunc lacinia.
elit. Nunc lacinia. elit. Nunc lacinia.
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 Clula de Tabela. Para ficar mais fcil 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> */ } div#esquerda, div#direita { background:green; }
Veja o resultado. Excelente! Perceba que se colocarmos mais contedo 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 tambm 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, no 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, ento, todas as propriedades que so usadas em DIV podem ser usadas livremente. J imaginou que facilidade seria fazer layouts se essa propriedade funcionasse no Internet Explorer? Infelizmente, no poderemos usa-la to cedo. Talvez daqui uns anos quando o Internet Explorer 6 estiver saindo de linha, e a Microsoft j tiver lanado outro browser que seja mais adequado aos Padres.
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 no to prtica 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 captulo
<!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; /** necessrio 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**/ } div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ float:left; /* faz o div flutuar a esquerda */ } div#meio { width:400px; /* Faz o div do MEIO ficar com 400px de largura */ float:left; /* faz o div flutuar a esquerda */ } div#rodape { clear:both; /** assim ele no sofre influncia 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 </div> <div id=meio> Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer </div> <div id=direita> Lorem ipsum dolor sit amet, consectetuer </div> <div id=rodape> RODAP! Aqui vai o rodap. </div> </div> </body> </html>
adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris i
adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris i adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris i adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris i
adipiscing elit. Nunc lacinia. Curabitur aliquam. Morbi scelerisque, mauris i
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 { text-align:center; /** necessrio 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**/ 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 tambm no RODAP. Talvez voc queira ocultar. Para resolver sem ter que mexer no cdigo XHTML. Podemos colocar no CABECALHO e no RODAPE um fundo branco.
body { text-align:center; /** necessrio 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**/ background:url(colunas.gif) repeat-Y; /** Colunas uma imagem de fundo e faz ela se repeat na vertical **/ } div#esquerda, div#direita { width:150px; /* Faz os divs DIRETA e ESQUERDA ficarem com a largura de 150px */ float:left; /* faz o div flutuar a esquerda */ } div#meio { width:400px; /* Faz o div do MEIO ficar com 400px de largura */ float:left; /* faz o div flutuar a esquerda */ } div#rodape { clear:both; /** assim ele no sofre influncia do float dos divs **/ height:70px; width:700px; background:white; } div#cabecalho { height:70px; width:700px; background:white; }
Veja o resultado. timo A iluso est feita. Agora, s construir seu layout, melhorar o design e etc
LINKS RECOMENDADOS
FONTES DE INFORMAES
Esses links podem te ajudar a estudar o material desse mdulo. Muitos exemplos, truques e tudo mais podem ser encontrados nos links abaixo. Portanto, seria muito produtivo se voc separasse um tempo para estud-los.
Manipulao 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 portugus sobre manipulao de listas Hacks Centricle: CSS Hacks Explorer Exposed CssHack PDF created with pdfFactory Pro trial version www.pdffactory.com
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
EXERCCIO
HORA DE POR A MO NA MASSA
Voc escolher um layout, de qualquer site que voc conhea, que no seja nem muito fcil nem muito dificil, e converter em tableless. Se voc estiver trabalhando em algum projeto, e quiser aproveitar a oportunidade para desenvolve-lo usando os Padres, sinta-se vontade. No precisa converter o site todo. Escolha apenas uma pgina do site, seja ela interna ou HOME.
Como voc ser avaliado?

Para ser aprovado, seu exerccio dever suprir os seguintes pontos, por ordem de importncia:
1. Vlido pelo W3C Primeiramente seu cdigo dever ser vlidado pelo W3C no modo Strict!Para tanto, use o validador: validator.w3.org; 2. Semntica Seu cdigo dever ser sermntico. Ou seja, usar tags para suas funes apropriadas: <p> para pargrafos, <h1> <h2> etc, para ttulos e assim por diante; 3. Compatibilidade Dever ser compatvel com pelo menos 3 browsers atuais: Opera, Firefox, Internet Explorer 6, Konqueror (Linux), Internet Explorer (Mac) e Safari (Mac); 4. Organizado Seu cdigo dever ser organizado e identado. Um cdigo que qualquer um consiga ler e entender;
Copyright 2006 Visie Padres Web. Todos os direitos reservados.

Tableless AvanÃ Ado

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tableless AvanÃ Ado

Загружено:

Авторское право:

Доступные форматы

TABLELESS II

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

O que voc tem a lucrar

Desenvolvimento mais gil

Facilidade para criar verses de layout

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

Paz entre designers e programadores

Perfeita integrao com .NET, Java, PHP, ASP etc.;

Controle sobre o projeto

Melhor visibilidade no Google

Para mais informaes

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

Sobre o Netscape Navigator Jim Clark Bill Gates

UMA BREVE HISTRIA DO CSS

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

O uso do CSS e suas qualidades

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

Mudando essas condies

O valores da propriedade display

Os valores INLINE e BLOCK

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

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

PROPRIEDADES: FLOAT E CLEAR

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

OS VALORES RIGHT, LEFT E BOTH

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

PROPRIEDADES: MARGIN E PADDING

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

Sempre em sentido horrio!

O Valor AUTO da propriedade MARGIN

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

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

Considere o seguinte cdigo HTML:

Agora, vamos comear a fazer o CSS.

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

Veja o resultado final.

LAYOUT FIXO DE 3 COLUNAS (MODO 1)

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

Veja o resultado desse passo. Agora, vamos colocar a fazer o CSS.

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

Veja o resultado. Agora, vamos comear a mgica.

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

LAYOUT FIXO DE 3 COLUNAS (MODO 2)

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

Layout Fixo de 3 Colunas.

LAYOUT FLUIDO DE 3 COLUNAS

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

Agora, confira o CSS.

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

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

Suporte Todos os Browsers Todos os browser

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

MANIPULANDO LISTAS (UL, OL, DL)

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

Tio Patinhas Tio do Huguinho, Zzinho e Luizinho.

Valores para list-style-type

Especifica um sinal de disco

Especifica um sinal de quadrado

Nmeros romanos em maisculo

lower-alpha e lower-latin Letras do alfabeto em minsculo

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

href="#"" href="#"" href="#"" href="#""

>Home</a></li> >Artigos</a></li> >Sobre</a></li> >Contato</a></li>