Olá pessoal.

As coisas na movin’ on andam muito bem e um novo cliente pediu uma funcionalidade muito peculiar. Ele queria que quando os usuários selecionassem alguma coisa no site, ele mudasse a cor de fundo e da seleção, fugindo do padrão azul e branco.

Esse cliente é muito bom e falou, tem que funcionar em browser moderno, foi o que precisava ouvir. 🙂

Alias é tudo que os desenvolvedores da nossa área querem né?!

Para fazer isso usei o pseudo-element ::selection

Só para variar um pouco, os navegadores não seguem um padrão, mas dessa vez o que foge do padrão é o Firefox.

Veja o código necessário para funcionar no IE e no Chrome.

::selection { background:#bada55; color:#ffffff; }

 

Agora veja o código para funcionar no Firefox.

::-moz-selection{ background:#bada55; color:#ffffff; }

 

Nesse elemento, você pode mudar a cor de fundo (background-color) e a cor do texto (color).

Veja o exemplo de uso do selection – CSS3

Até o próximo

Publicado por: Paulo Fernandes | 10/set/2011

Alterando a font padrão de um site com Font Face

Galera, andei meio sumido, eu sei, mas é que as coisas mudam né, prioridades vão aparecendo e se sobrepondo.
Talvez alguns de vocês saibam que comecei a minha startup movin’ on, como foco em desenvolvimento de sites e sistemas.
Também desenvolvi um produto Lembre Disso – Solução em SMS.

Mas o que isso me importa, você deve se perguntar. Aqui vai a resposta:
Os sites que minha empresa desenvolve utilizam o WordPress como base para o desenvolvimento e dessa forma o conteúdo todo pode ser gerenciado pelo usuário.
Dessa forma o que você acha de colocar os links do menu do seu site com a fonte Arial??? Simples demais né? Pois bem, no CSS2 utilizavámos a técnica de ImageReplacement. Uma técnica muito útil para ser sincero. Porém como o desenvolvimento dos sites usam como base o WordPress complicaria um pouco usar esa técnica.
Porém com a chegada do CSS3 podemos fazer de uma forma muito mais simples com o @font-face.

Veja como é simples

@font-face {
font-family: “Nome-da-Fonte”;
src: url(“http://caminhodoseusite/pasta/fontes/Nome-da-Fonte.eot“); /* para IE */
src: local(“Nome-da-Fonte”), url(“http://caminhodoseusite/pasta/fontes/Nome-da-Fonte.ttf“);
}

Sabe ali onde eu coloquei font-family: “Nome-da-Fonte”? Pois bem, é ela que usarei na declaração da minha font-family no elemento que desejo.
Para ilustrar melhor veja este código.

p { font-family: “Nome-da-Fonte”, Arial; }

Com essa declaração acima, o sistema procurará a fonte “Nome-da-Fonte” e se não achar colocará a fonte Arial.

Isso funciona em todos os browser modernos, portanto você pode usar sem medo. O único detalhe é que o IE não reconhece o formato TTF e somente o EOT, por isso que precisei declarar daquele jeito lá em cima 🙂

Veja um exemplo do uso de font-face.

Espero que usem isso e aproveitem.

Até o próximo

 

 

Publicado por: Paulo Fernandes | 27/out/2009

Cabeçalho da Tabela na Vertical (somente IE )

Olá a todos.
Eu sei que faz tempo que não posto nada, mas é que ultimamente esta tudo bem corrido para mim. Trabalhando em uma consultoria, não tenho muito tempo para escrever artigos durante o dia, porém no meu tempo vago escrevo artigos sobre outros temas e os publico no meu site http://www.phpaulo.com.br, também os público em alguns outros sites.
Chega de desculpas e vamos a parte que interessa.

Problema
Hoje devido a uma tabela ter muitas colunas, ela estourava o layout do site, sugeri sem nem saber se é possível para que colocassemos as colunas na vertical. Eu já conheço a técnica do Image-Replacement, mas não gostou muito de usar, somente em casos bem especificos, pois fico dependendo do pessoal da área de design realizar a alteração, “Odeio Esperar”.
Este sistema aqui, apesar de ser web, deve rodar da melhor forma possível no IE 7+, nos outros navegadores não tem necessidade de funcionar 100% (particularmente não concordo com isso, mas a empresa quer, então… 😀 )

Solução
Pesquisando na Google, encontrei o blog do MSDN (Microsoft Developer Network) falando como escrever na vertical, eu gostei bastante disso pois resolvia todos os meus probrlemas, já que não preciso me preocupar com outros navegadores.

<!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“>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
 <title>Escrevendo na vertical para IE – aprendacss.wordpress.com </title>
 <style type=”text/css”>

 .verticalText{
  font-family:Arial,Helvetica,sans-serif;
  color:#000000;
  font-size:12px;
  writing-mode: tb-rl; filter: flipv() fliph();
 }

 table tr th, table tr td {
  border: 1px solid #000;
 }

 table {
  border-collapse: collapse;
 }

 </style>
</head>
<body>
 <table>
  <tr>
   <th><span>Coluna 1</span></th>
   <th><span>Coluna 2</span></th>
   <th><span>Coluna 3</span></th>
   <th><span>Coluna 4</span></th>
   <th><span>Coluna 5</span></th>
  </tr>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
   <td>5</td>
  </tr>
 </table>
</body>
</html>

Conclusão
Essa técnica é muito boa se você precisa fazer algo especifico para o IE. Caso precise fazer para funcionar em todos navegadores, sugiro o Image-Replacement que é a mais segura em termos de renderização.

Publicado por: Paulo Fernandes | 30/jul/2009

Criando um menu bem simples

Olá pessoal, hoje postarei um artigo bem simples. O objetivo deste artigo é mostrar aos principiantes como criar um menu.

Na internet tem muitas ferramentas que auxiliam na criação, muitos sites que disponibilizam códigos, isso é muito bom, porém, você entende o que eles fizeram, entendem o seu código fonte?

Neste artigo tentarei explicar como criar um menu, na raça e como deixá-lo do jeito que queremos.

Vamos ao código xHTML básico do nosso menu.

<!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”&gt;

<head>

<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />

<title>..:: Criando e entendendo um menu by aprendacss.wordpress.com ::..</title>

</head>

<body>

<div>

       <div>

             <h1><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></h1>

             <ul>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

             </ul>

       </div>

       <div>

             <p>Aqui vai o conteudo da página.</p>

       </div>

       <div>

             <p>

                    Todos Direitos Reservados – <a href=”https://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2009

             </p>

       </div>

</div>

</body>

</html>

Agora vamos definir um um arquivo css para a estilização. Vamos resetar a margem e o padding de todos os elementos da página usando a técnica CSS Reset, também definiremos um layout básico para a página para vermos as separações, o layout não ficará belo, mas explicará o que desejamos mostrar.

* { margin: 0; padding: 0; }

 body {

       text-align: center;

}

 #tudo {

       margin: 0 auto;

       text-align: left;

       width: 1000px;

}

 #cabecalho {

       height: 150px;

}

 #cabecalho h1{

       height: 100px;

       line-height: 100px;

       background-color: #ABC;

       text-align: center;

}

 #conteudo {

       height: 300px;

       background-color: #DEF;

}

 #rodape {

       height: 50px;

       background-color: #AAA;

       text-align: center;

}

 #rodape p {

       line-height: 50px;

}

 /********** AQUI COMEÇA O MENU ********************/

#cabecalho ul#menu {

       height: 50px;

       background-color: #123;

       list-style: none;

}

 #cabecalho ul#menu li{

       float: left;

       line-height: 50px;

       width: 200px;

       text-align: center;

}

 #cabecalho ul#menu li a{

       display: block;

       margin: 0 20px;

       text-decoration: none;

}

 #cabecalho ul#menu li a:hover {

       background-color: #456;

       text-decoration: none;

       color: #FFF;

}

Vamos explicar os códigos no menu:

Primeiramente, removemos aqueles “bullets” da lista, usando a propriedade list-style: none;, depois colocamos cada elemento da lista para flutuar do lado esquerdo, usando float: left;, definimos um tamanho e a altura da linha para ele ficar alinhado no centro.

Para cada link colocamos um display: block; para ele ocupar todo o espaço, e para um link na ficar colado no outro colocamos uma margem à direita e a esquerda.

Todas as outras especificações são para o layout do menu.

Bom, aqui terminamos o artigo, até a próxima pessoal.

Abraço

Publicado por: Paulo Fernandes | 30/jul/2009

Não ao IE6

Olá a todos, faz muito tempo que não posto, peço desculpas, mas tudo estava muito corrido.

Por todos os lados na web, seja twitter, blog e outros, os desenvolvedores estão fazendo diversas manifestações quanto a morte do IE6.

Eu no meu blog farei uma manifestação pequena, não mais postarei nenhum artigo que dê suporte ao IE6, aqui vocês não mais verão hacks ou alternativas ao IE6.

Por favor incentivem as pessoas a atualizar seus navegadores para o IE8 ou FireFox.

Até mais pessoal.

Abraços

Publicado por: Paulo Fernandes | 17/dez/2008

Firefox utilizando muita memória????

Opa!

Galera não sei se acontece com todos, mas o meu firefox fica ocupando muita memória.

Achei neste blog aqui http://rafaelsteil.com a solução para os meus problemas, [ ainda estou testando, mas já vi melhoras ].

Aqui estão as modificações que o post diz e o que significa, no blog de Rafael tem muito mais explicado, para quem quiser ver, o link é este aqui: contornando-consumo-excessivo-de-memoria-do-firefox

#1 browser.cache.memory.capacity
Controla quanto de memória é utlizado para cachear as páginas. No campo “Filter“, digite “browser.cache.memory.capacity“. Caso nada seja retornado, você deverá criar este valor. Para tanto, clique com o botão direito do mouse, e selecione New -> Integer. O campo “New Integer value”, digite “browser.cache.memory.capacity”, e no próximo diálogo informe o valor em KB do cache. Eu utilizei 1024 (1 MB).

Caso a chave já exista, mude-a para o valor que desejar.

#2: browser.cache.disk.capacity
Determina quanto de espaço em disco é utlizado para cachear as páginas. Defina para o valor que desejar. Eu utilizei 5000.

#3: config.trim_on_minimize
Esta opção, que parece funcionar apenas em Windows (utilzo Mac), informa ao Firefox para liberar memória quando for minimizado para a barra de tarefas. Para criar esta chave, caso não exista, clique com o botão direito e escolha New -> Boolean, definindo seu valor para “true”.

#4: network.prefetch-next
Quando definido para “true” (New -> Boolean), informa ao Firefox para fazer “pre fetching” (”busca em background”) de todos os links definidos com o atributo “rel=prefetch”. Eu deixei essa opção para “false”, pois não quero que páginas que muito provavelmente não acessarei fiquem consumindo minha banda e memória RAM.

#5: browser.sessionhistory.max_total_viewers
Controla quantas páginas ficarão no histórico dos botões “Voltar” (Back) e “Avançar” (Forward) do browser. Eu deixe essa opção (New -> Integer) para um valor baixo, como 5.

Rafael, se ficar ofendido com a cópia que fiz, me informe que eu removerei-a.

até mais galera

abraços

Publicado por: Paulo Fernandes | 26/nov/2008

img ou background – Qual Devo Usar???

Opa!

Faz tempo que não posta né galera. Fim de ano as coisas são corridas aqui na empresa, ainda mais com mudança.

Este artigo deverá ser bem rápido, mas espero que ajude muitos a escolher a melhor forma de usar as imagens.

Uma dúvida que apareceu há algum tempo, creio que seja no Fórum Imasters, ou em algum outro lugar é a seguinte:

Quando devo usar a tag img ou a propriedade do CSS background?

Na minha opinião, a tag img deve ser usada quando queremos de fato inserir uma imagem na página HTML.

Já o background deve ser usado quando queremos colocar um fundo em algum elemento da página ou usar o IR ( Image Replacement ).

Isso é uma coisa muito óbvia.

Mas o que devemos fazer quando a empresa não tem um logo bem definido, o logo da empresa é escrito no Photoshop com uma fonte bonita?

Nesse caso se você usar apenas a imagem, não é muito recomendavel, pois se o cliente estiver com um navegador modo texto ou algum programa leitor de tela não conseguirá ler a imagem( eu sei que é até possível ler pelo atributo alt, mas não vamos entrar em detalhes ). E usar via CSS com a propriedade background, também não é muito legal, pois vai que o CSS não é carregado? ( não estou levando em contato as técnicas de IR  – Image Replacement em consideração OK? )

Nesta situação recomendo que seja utilizado as duas coisas dá seguinte forma.

HTML

<h1>Texto <img src=”imagem.jpg” alt=”Texto” /></h1>

e no CSS

h1 {
background:#FFFFFF url(imagem.jpg) no-repeat scroll left center;
color:#FFFFFF;
font-size:1px;
text-indent:-99999px;
}

Bom por hoje é somente isso!

Caso tenha algum erro ou problema.

Pode postar um comentário que lhe ajudarei.

Abraço e até o próximo.

Publicado por: Paulo Fernandes | 13/out/2008

Rodapé no Final da Página – Independente da Resolução

Opa!

Fazia tempo que eu não postava não é. Bem aqui vai um rápido post para demonstrar a técnica do “Rodapé no Final da Página – Independente da Resolução”.

Devemos criar um código da seguinte forma:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”https://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>

Após ter o código base, devemos criar um arquivo css que informe que o corpo do documento tem o height de 100%.

html, body {
height: 100%;
}

* html #tudo {height: 100%;}

No trecho acima, informo para o html e body ter um height de 100%. E informo que a div#tudo deve ter um height de 100% também.

#tudo {

width: 790px;

margin: 0 auto;

text-align: left;

position: relative;

min-height: 100%;

}

Aqui está um ponto importante. Explicarei linha a linha deste trecho acima.

  1. Largura fixa de 790px;
  2. Centralizo o layout ao centro;
  3. Alinha o texto do layout a esquerda;
  4. Posiciono o container relativamente.
  5. Defino que a altura minima será de 100% [ para navegadores mais recentes – FireFox por exemplo ]

#conteudo {
padding-bottom:    50px;
}

Acima foi definido um padding-bottom, apenas para o texto não ficar colado no rodapé.

#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
}

Explicarei linha a linha para ficar bem claro.

  1. Posiciono ele absolutamente;
  2. Coloca ele na posição 0 do rodapé;
  3. Digo que terá uma altura de 35px;
  4. Informo que a altura da linha será de 35px;
  5. Alinho o texto ao centro;
  6. Digo que a largura será de 100%;

Pronto temos o nosso layout completo. Abaixo está o código completo para quem quiser ver! Coloquei no código abaixo algumas cores, para vocês verem a diferença. Esqueci de comentar que para um melhor resultado sempre é bom utilizar a técnica de CSS Reset.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Rodapé no Final da Página – Independente da Resolução by aprendacss.wordpress.com ::..</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

* html #tudo {height: 100%;}

body {
background-color: #CCC;
}

#tudo {
width: 790px;

margin: 0 auto;

text-align: left;

position: relative;

min-height: 100%;

background-color: #FFF;
}

#conteudo {
padding-bottom: 50px;
}

#rodape {
position: absolute;
bottom: 0;
height: 35px;
line-height: 35px;
text-align: center;
width: 100%;
background-color: #0FF;
}

#cabecalho {
background-color: #FF0;
}
</style>
</head>
<body>
<div id=”tudo”>
<div id=”cabecalho”>
<h1><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
</div>
<div id=”conteudo”>
<p>Aqui vai o conteudo da página.</p>
</div>
<div id=”rodape”>
<p>
Todos Direitos Reservados – <a href=”https://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2008
</p>
</div>
</div>
</body>
</html>

Até o próximo galera.

Fonte base: http://themaninblue.com/writing/perspective/2005/08/29/

Editado em 21/10/2008:

Substituição de

height: auto !important;
height: 100%;

por

* html #tudo {height: 100%;}

Publicado por: Paulo Fernandes | 10/set/2008

Alterando a largura de um elemento via Javascript

Bom galera.

Resolvi criar este post aqui por uma dúvida em um dos forúns que participo http://forum.imasters.com.br.

A dúvida está neste post aqui. Abaixo está a solução para o problema. Este será um dos post que não terá imagem, por se tratar de uma coisa simples, devem existir outras formas para se fazer isto, mas essa é a mais ditádica que eu consegui.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”pt-br” lang=”pt-br”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Alterando a largura de um elemento via Javascript by AprendaCSS.wordpress.com</title>
<style type=”text/css”>
#esquerda {
width: 20%;
background-color: #CCC;
height: 500px;
float:left;
}
#direita {
width: 80%;
background-color: #AFA;
height: 500px;
float: left;
}

#esq, #dir {
margin: 10px;
}
</style>
<script type=”text/javascript”>
function espande(estado){
if( estado == “normal” ) {
document.getElementById(‘esquerda’).style.width = “20%”;
document.getElementById(‘direita’).style.width = “80%”;
document.getElementById(‘dir’).href = “javascript: espande(‘diminui_esquerda’);”;
document.getElementById(‘dir’).innerHTML = “Expandir para Direita”;
document.getElementById(‘esq’).href = “javascript: espande(‘diminui_direita’);”;
document.getElementById(‘esq’).innerHTML = “Expandir para Esquerda”;
} else if ( estado == “diminui_esquerda” ) {
document.getElementById(‘esquerda’).style.width = “10%”;
document.getElementById(‘direita’).style.width = “90%”;
document.getElementById(‘dir’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(‘esq’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘esq’).innerHTML = “Voltar ao Normal”;
} else if ( estado == “diminui_direita” ) {
document.getElementById(‘esquerda’).style.width = “90%”;
document.getElementById(‘direita’).style.width = “10%”;
document.getElementById(‘dir’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘dir’).innerHTML = “Voltar ao Normal”;
document.getElementById(‘esq’).href = “javascript: espande(‘normal’);”;
document.getElementById(‘esq’).innerHTML = “Voltar ao Normal”;
}
}

</script>
</head>
<body>

<div id=”esquerda”>
<p>
<a id=”esq” href=”javascript: espande(‘diminui_direita’);”> Expandir para Esquerda </a>
</p>
</div>

<div id=”direita”>
<p>
<a id=”dir” href=”javascript: espande(‘diminui_esquerda’);”> Expandir para Direita </a>
</p>
</div>

</body>
</html>

Abaixo tem uma explicação de um bloco de código, os outros são iguais, apenas mudando os parametros.

document.getElementById(‘esquerda’).style.width = “20%”;
document.getElementById(‘direita’).style.width = “80%”;
document.getElementById(‘dir’).href = “javascript: espande(‘diminui_esquerda’);”;
document.getElementById(‘dir’).innerHTML = “Expandir para Direita”;
document.getElementById(‘esq’).href = “javascript: espande(‘diminui_direita’);”;
document.getElementById(‘esq’).innerHTML = “Expandir para Esquerda”;

document.getElementById(‘esquerda’) significa que estou percorrendo toda a página procurando por um elemento que tenha o id igual a esquerda.

Linha 1: Atribuo 20% do tamanho da tela para o elemento que tem o id igual a esquerda.

Linha 2: Atribuo 80% do tamanho da tela para o elemento que tem o id igual a direita

Linha 3: Altero o atributo href do elemento que tem o id igual a dir.

Linha 4: Substituo o conteúdo do elemento que tem o id igual a dir.

Linha 5: Altero o atributo href do elemento que tem o id igual a esq.

Linha 6: Substituo o conteúdo do elemento que tem o id igual a esq.

Bom é isso ai pessoal, caso alguém tenha dúvida, poste que responderei com o maior prazer.

Até o próximo.

Publicado por: Paulo Fernandes | 4/set/2008

Faux Columns – Simulando Colunas

Opa galera!
Hoje falarei sobre uma técnica legal, ela se chama Faux Columns(Colunas Falsas), muito legal quando queremos trabalhar com layout de duas colunas.
A técnica Faux Columns é muito utilizada. Consiste em simular a reprodução do fundo no layout da página mesmo que o espaço nem esteja sendo utilizado, dando a idéia de colunas falsas.
Vejam o código do layout sem a técnica.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Faux Columns – by aprendacss.wordpress.com</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#tudo {
width: 800px;
margin: 0 auto;
text-align: left;
}
#topo {
background-color: #AAC;
height: 200px;
}
#esq, #dir {
height: auto;
}
#esq {
float: left;
width: 200px;
background-color: #555;
}
#dir {
float: right;
width: 580px;
background-color: #F00;
}
#rodape {
clear: both;
background-color: #AAF;
height: 50px;
}
</style>
</head>

<body>
<div id=”tudo”>
<div id=”topo”> Topo </div>
<div id=”esq”>Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”dir”>Direita</div>
<div id=”rodape”>Rodape</div>
</div>
</body>
</html>

Sem a Técnica

Sem a Técnica

Para aplicar a técnica basta inserir esta parte aqui no código.

#tudo {
background: transparent url(fundo.jpg) repeat-y left center;
}

Olha como fica o código completo, agora aplicando a técnica.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta content=”text/html; charset=ISO-8859-1″ http-equiv=”Content-Type”/>
<title>Faux Columns – by aprendacss.wordpress.com</title>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
#tudo {
width: 800px;
margin: 0 auto;
text-align: left;
background: transparent url(fundo.jpg) repeat-y left center;
}
#topo {
background-color: #AAC;
height: 200px;
}
#esq, #dir {
height: auto;
}
#esq {
float: left;
width: 200px;
background-color: #555;
}
#dir {
float: right;
width: 580px;
background-color: #F00;
}
#rodape {
clear: both;
background-color: #AAF;
height: 50px;
}
</style>
</head>

<body>
<div id=”tudo”>
<div id=”topo”> Topo </div>
<div id=”esq”>Esquerda<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div id=”dir”>Direita</div>
<div id=”rodape”>Rodape</div>
</div>
</body>
</html>

Com a Técnica de Faux Columns

Com a Técnica de Faux Columns

A imagem fundo.jpg é essa imagem aqui.

Filete do Fundo

Filete do Fundo

Essa imagem é um filete que deve conter 800px de largura, tem esse valor pois é o valor que defini para o meu layout, e pode ser 1px de altura, para ficar mais leve, aqui coloquei maior apenas para vocês verem.

Pronto aqui foi aplicada e técnica de Faux Collumns, espero que gostem.

Até o próximo.

Older Posts »

Categorias

%d blogueiros gostam disto: