Esses dias instalei aqui em casa um plugin novo para o Firefox.

Trata-se de um dicionário em português.

Não sabia muito bem para que “servia” (é um dicionário oras) mas acabei instalando assim mesmo.

E hoje ao responder uma mensagem no Orkut, vi que todas as palavras escritas erradas, ou simplesmente abreviadas (internetês), estavam sublinhadas. Como o verificador ortográfico do Microsoft Office.

Achei até que poderia ser mais uma inovação da Google. Mas continuando a escrever textos em inputs navegando pelo Firefox, notei que o mesmo continuava a acontecer. Então, puta merda! A parada funciona melhor do que eu imaginava. É um corretor ortográfico embutido no browser. Muito bom para quem digita rápido e/ou tem alguma dúvida de como se escreve a determinada palavra.

E enquanto digito esse texto, acabei de me surpreender mais. Só de sacanagem apertei com o botão direito em cima da palavra sublinhada, e eis que aparece sugestões e uma opção para adicionar ao dicionário.

Carai, tô feitu ! (essa exclamação por exemplo abriu até um popup me xingando, hehehe, sacanagem). Para quem quiser fazer download do plugin, segue o link:

https://addons.mozilla.org/firefox/3257/

[update]

inglês aqui

[/update]

São duas funções interessantes do Javascript, com elas podemos definir um intervalo de tempo que um evento irá acontecer.

A sintaxe das duas funções é praticamente idêntica. O que muda é como agem.

Sintaxe:

window.setTimeout('funcao()', intervalo_em_milisegundos);
window.setInterval('funcao()', intervalo_em_milisegundos);

As duas funções irão chamar uma segunda função passada por parâmetro no intervalo determinado também por parâmetro.

Sendo a setTimeout() chamando a função uma única vez. Enquanto a setInterval() chama a função “infinitamente” sempre no mesmo intervalo de tempo.

Para pausar a função usa-se clearInterval(). Passando como parâmetro o nome do seu intervalo.

Ex:

var intervalo = window.setInterval(lerolero, 1000);
function lerolero() {
    window.alert("Popup");
}
clearInterval(intervalo);

Juntando as duas funções podemos “brincar” fazendo por exemplo um script que simula um sorteio.

Ex:

var intervalo = window.setInterval(function() {
    // corpo da funcao
}, 50);

window.setTimeout(function() {
    clearInterval(intervalo);
}, 3000);

Explicando: A setInterval() vai executar o que for definido dentro de uma função passada como parâmetro em 50 em 50 milisegundos. Isso durante 3000 milisegundos (3 segundos), que é o tempo definido na setTimeout() para entrar na função que pausa a setInterval.

Deu pra entender né? Veja o script um pouco mais incrementado em funcionamento aqui.

Você pode usar setInterval() para fazer um relógio também. Agora é só deixar com a criatividade de cada um.

mais sobre:

http://javascript.about.com/library/blstvsi.htm

http://www.w3schools.com/js/js_timing.asp

Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui: link.

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag blockquote:

Texto aqui dentro

No CSS definimos o tamanho (largura) da caixa, uma borda em cima e em baixo, texto alinhado ao centro. E pronto.

blockquote.pull {
    width: 170px;
    border-top: 3px solid #CC0099;
    border-bottom: 3px solid #CC0099;
    text-align: center;
    float: right;
    margin: 0px 20px;
    padding: 15px;
}

Aí como podemos ver a caixa irá flutuar para a direita, podendo ser alterado como prefirir (left/right).

O exemplo final desse tutorial você confere aqui: pullquote.

Veja mais sobre:

Pullquote apenas com CSS:

[http://www.sitepoint.com/test/pullquote.htm](http://www.sitepoint.com/test/pullquote.htm) (inglês) [ http://www.brpoint.net/arquivo/css/pull-quotes.html](http://www.brpoint.net/arquivo/css/pull-quotes.html) (português)

Pullquote com Javascript:

[http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/](http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/) (inglês)

Esses dias no Fórum do Flashmasters perguntaram como poderia fazer um campo de texto que não pudesse ser alterado, modificado. Mas que tivesse uma barra de rolagem. A minha sugestão foi que ao invez de usar um textArea como ele queria, usa-se uma div mesmo, com overflow auto.

[UPDATE date=“2012-11-08”] Atualizando em 08/11/2012, exemplo funcional utilizando textarea. No qual o seu conteúdo pode ser importado de um arquivo txt. Foi utilizado javascript apenas para habilitar e desabilitar o botão “Next”.

Clique aqui para ver a nova versão [/UPDATE]

Exemplo:

CSS

  #license-box {
    font-family: Verdana, Arial, Sans-Serif;
    width: 600px;
    padding: 20px 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #999;
    margin: auto;

    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }

  #license-box h1 {
    font-size: 20px;
    color: #333333;
    text-transform: uppercase;
    text-align: center;
  }

  #license-box .text textarea {
    width: 100%;
    height: 400px;
    border-color: #f1f1f1;
    background-color: #fff;
  }

  #license-box .next {
    padding: 15px 0 0 0;
    float: right;
  }

  #license-box .next input {
    padding: 5px 20px;
    color: #fff;
    font-weight: bold;
    border-width: 0;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #666;
    cursor: pointer;
    background: #b4e391; /* Old browsers */
    background: -moz-linear-gradient(top,  #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
  }

  #license-box .next input:disabled {
    background: #e2e2e2; /* Old browsers */
    background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
  }

  #license-box .checkbox {
    padding: 20px 0;
  }

  #license-box .checkbox input {
    margin-right: 5px;
  }

  #license-box .checkbox label {
    font-size: 12px;
    font-weight: bold;
  }

Você pode alterar o estilo da borda: estilos de borda css.

HTML

    <div id="license-box">
        <h1>Terms and Conditions</h1>
        <div class="text">
            <textarea disabled="true">
                    }
            </textarea>
        </div>
        <div>
            <div class="next">
                <input id="btn-next" class="btn" type="submit" value="Next" disabled="true" />
            </div>
            <div class="checkbox">
                <input id="license-check" type="checkbox" value="" onclick="setTimeout(function() { document.getElementById('btn-next').disabled = !document.getElementById('license-check').checked; }, 100)" />
                <label for="license-check">I accept</label>
            </div>
        </div>
    </div>

Uma encheção de lingüiça aí. E com apenas algumas linhas no CSS você tem sua caixa de contrato personalizada.

Clique aqui para ver o exemplo.

A Programação Orientada a Objetos (POO) tem grande vantagem diantes as demais, como por exemplo o reuso de código, organização lógica dos programas e estruturação do código produzido.

Abaixo alguns conceitos de POO.

Classe É na classe que definimos as propriedades e os métodos dos objetos.

Objeto: É a instância de uma classe, é o elemento criado a partir da classe, segundo o molde definido nela.

Herança: É a característica da Orientação a Objetos que permite derivar uma classe de outra já existente. Herdando seus métodos e tudo que contém nela.

Polimorfismo: É a alteração da funcionalidade de um método em diferentes níveis de classe, sem alterar o formato do mesmo. Permite a Classe derivada alterar a funcionalidade de algo feito pela mãe, aproveitando ou não o que a mãe fazia. Ou seja, é o fato de objetos diferentes responderem a uma mesma chamada de método de maneiras diferentes.

Exemplo (Java):

class FormaGeometrica {

    public void introduz() {
        System.out.println("Sou uma forma geométrica");</p>
    }

}

class Retangulo extends FormaGeometrica {

    public void introduz() {
        System.out.println("Sou um retângulo");
    }

}

class Circulo extends FormaGeometrica {

    public void introduz() {
        System.out.println("Sou um círculo");
    }

}

public class Uso {

    public static void main (String[] args) {
        FormaGeometrica g1, g2, g3;
        g1 =  new FormaGeometrica();
        g2 = new Retangulo();
        g3 = new Circulo();
        g1.introduz(); // Sou uma forma geométrica
        g2.introduz(); // Sou um retângulo
        g3.introduz(); // Sou um círculo
    }

}

mais sobre:

http://pt.wikipedia.org/wiki/Orientado_a_objeto http://www.vivaolinux.com.br/artigos/verArtigo.php?codigo=2365

Vamos agora no blog começar a estudar sobre o software Macromedia Flash, que agora pertence à Adobe. No mesmo site pode-se fazer o download da versão Trial do programa.

Para melhor se familiarizar com o Flash vamos dividir esse tópico em algumas partes, sendo esta primeira voltada para a apresentação das ferramentas.

Com o Flash já instalado abra um novo arquivo: file > new… ou CTRL+N. Pode-se também clicar em Create New > Flash Document no splash que aparece ao iniciar o programa. Escolha o que melhor lhe agrade.

Ao abrir o documento novo repare que no lado esquerdo habilita um menu de ferramentas. Que é justamente o menu que iremos estudar agora. Vamos ver os botões nele contido e suas respectivas funcionalidades.

O menu é dividido em 4 (quatro) partes como pode ver na figura ao lado.

A primeira (de cima para baixo), com as ferramentas de criação.

Na segunda ficam as ferramentas de visualização.

Com a terceira aparecem as ferramentas para setar as cores, as paletas.

E na quarta e última, as opções de uso das ferramentas da primeira parte.

Vamos conhecer agora cada uma dessas ferramentas e suas utilidades.

Tools (Ferramentas)

- Selection Tool (Ferramenta de Seleção), com ela você seleciona, manipula, arrasta os objetos no palco. Pode selecionar só uma parte do objecto para quaso queira recortar ou editar. Tecla de atalho (V). - Subselection Tool (Ferramenta de Subseleção) ao selecionar o objeto inteiro você pode editar os pontos de contorno, esticando ou diminuindo só um canto (ponto) do objeto. Tecla de atalho (A). - Free Transform Tool (Ferramenta de Transformações Livres) com o objeto selecionado permite que você altere sua forma, tanto tamanho quanto aparência. Serve também para girar o objeto no palco. Tecla de atalho (Q).

- Gradient Transform Tool (Ferramenta de Transformação do Gradiente) com ela você pode ajustar o tamanho, o espaçamento, ou mudar a direção do gradiente aplicado ao objeto. Tecla de Atalho (F). - Line Tool (Ferramenta de Linha) desenhe linhas no palco. Com o shift apertado fixa a direção da reta em 45 em 45 graus. Tecla de atalho (N).

- Lasso Tool (Ferramenta de Laço) seleciona com movimentos do mouse uma parte da figura. Bom para quando quizer selecionar uma área que não seja quadrada ou retangular. Tecla de atalho (L).

- Pen Tool (Ferramenta Caneta) para criar formas livres. Com os cliques você marca os pontos e arrastando o mouse defini a curva da linha entre esses pontos. Tecla de atalho (P).

- Text Tool (Ferramenta de Texto) para adicionar algum texto ao palco. Tecla de Atalho (T).

- Oval Tool (Ferramenta para Formas Ovais) desenhe formas ovais no palco, para desenhar um círculo segure o shift enquanto arrasta o mouse. Tecla de atalho (O).

- Rectangle Tool (Ferramenta de Retângulo) desenhe formas retangulares no palco, para desenhar um quadrado segure o shift enquanto arrasta o mouse. Tecla de atalho ®.

 - **Polystar Tool** (Ferramenta de Polígono) embora esta ferramenta não esteje inicialmente visível no menu, ao pressionar o mouse por alguns instantes sobre a **Rectangle Tool** aparecerá um submenu para que você escolha uma das duas ferramentas. Sem tecla de atalho.

- Pencil Tool (Ferramenta Lápis) desenhe a mão livre no palco. Tecla de atalho (Y).

- Brush Tool (Ferramenta Pincel) desenhe a mão livre no palco. Sua diferença entre a Pencil Tool é que o resultado é um preenchimento e não uma linha. Tecla de atalho (B).

- Ink Bottle Tool (Ferramenta Frasco de Tinta) ao clicar em cima de um objeto não agrupado adiona-se uma linha em volta do objeto, borda. Tecla de atalho (S).

- Paint Bucket Tool (Ferramenta Balde de Tinta) adiciona um preenchimento à uma linha. Mesmo que não esteje completamente fechada. Tecla de atalho (K).

- Eyedropper Tool (Ferramenta Conta-gotas) captura o cor em hexadecimal de qualquer parte do palco e do programa. Tecla de atalho (S).

- Eraser Tool (Ferramenta Borracha) como qualquer outra borracha sua funcionalidade é apagar. Tecla de atalho (E).

View (Visualização)

- Hand Tool (Ferramenta Mão) para movimentar o palco mais rápido sem precisar usar as barras de rolagem. Enquanto segura a barra de espaço ela é habilitada. Tecla de atalho (H).

- Zoom Tool (Ferramenta de Zoom) aumente ou diminua o Zoom do palco. Tecla de atalho (Z) ou (M).

Colors (Cores)

- Stroke Color (Cor da Linha) com ele selecionado você escolhe a cor da linha.

- Fill Color (Cor do Preenchimento) altere a cor do preenchimento da imagem.

- Color Options (Opções de Cor) algumas mudanças rápidas que podem ser feitas nos itens acima. Da esquerda pra direita:

**Black and White** - deixa a linha na cor preta e o preenchimento branco. **No Color** - o que estiver selecionado ficará sem cor, transparente. **Swap Color **- inverta as cores da linha pro preenchimento e vice-versa. Todas sem teclas de atalho.

Options (Opções)

- Object Drawing (Desenho do Objeto) serve para agrupar as formas ao serem desenhadas no palco. Tecla de atalho (J).

- Snap to Objects (Pressão aos Objetos) com esta opção marcada adiciona uma atração entre os objetos. Muito utilizado para alinhar, ou mesmo unir objetos. Sem tecla de atalho. As demais opções variam conforme qual ferramenta foi selecionada. Servindo para configurar o uso de cada uma. Como por exemplo formato do pincel, suavizar linha

Esse post será voltado para ensinar fazer um menu estilo navbar. Para ser mais específico será esse o menu.

Vejamos as principais características do menu: imagem de fundo, inline e efeito over.

Primeiramente vamos desenhar os botôes do menu, feito isso vamos exportar como gif, para que o fundo fique transparente.

Você deve estar se perguntando por que exportar numa única imagem, sendo que os botões irão estar separados e ter links diferentes. Logo você irá entender o porquê disso.

Depois de desenhado e exportado vamos à linguagem de marcação para estrutura-lo:

<ul id="nav">
    <li id="home"><a href="index.html">home</a></li>
    <li id="sobre"><a href="sobre.html">sobre</a></li>
    <li id="contato"><a href="contato.html">contato</a></li>
</ul>

Escrevemos uma lista não ordenada simples, com os links. Para cada item da lista definimos um nome de identificação, o que vai fazer que cada um receba sua respectiva imagem.

Para “economizar” uma div identificamos também a lista toda - nav - para formatá-la.

A parte da marcação pronta, vamos então ao CSS. Para realmente dar vida ao menu:

ul#nav {
    width: 324px;
    height: 35px;
    _padding-right: 1px;
    list-style-type: none;
    float: right;
}

ul#nav li {
    display: inline;
}

ul#nav li a {
    width: 98px;
    height: 35px;
    margin-left: 5px;
    margin-right: 5px;
    background: url(imgs/nav.gif) no-repeat;
    float: left;
    text-indent: -5000px;
    overflow: hidden;
}

ul#nav li#home a { background-position: 0px 5px; }
ul#nav li#sobre a { background-position: -99px 5px; }
ul#nav li#contato a { background-position: -198px 5px; }

ul#nav li#home a:hover { background-position: 0px 0px; }
ul#nav li#sobre a:hover { background-position: -99px 0px; }
ul#nav li#contato a:hover { background-position: -198px 0px; }

Defindo primeiro o tamanho da lista - ul -, removendo as marcações da lista - list-style-type - e flutuando para a direita, o que não irá interfirir no resultado. Já que foi usado exclusivamente para o site.

Antes tem um CSS hack - _padding-right - devido ao nosso amigo Internet Explorer.

Colocando os itens da lista inline - ul#nav li { display: inline; }.

Agora na tag a vamos definir o tamanho de cada botão, altura, espaçamento e a imagem de fundo. Repare que todos os links do menu irão receber aquela imagem de fundo que foi exportada.

Para a tag a ficar com o tamanho especificado - aceitar essas propriedades - deve-se coloca-la para flutuar, de preferência para a esquerda, senão irá inverter a ordem da lista.

Faça o teste, vendo o menu sem o float.

O identamento negativo juntamente com o overflow setado para hidden é justamente para fazer sumir o texto do botão colocado no HTML. Essa técnica chama-se image-replacement.

Agora que vem a parte legal, definir a posição da imagem de fundo para cada botão. Aproveitando o id de cada li mudamos a posição da tag a do respectivo item.

Como a largura do botão é de 99px, essa será a diferença de cada x, sendo decrementado, já que para cada botão que passa a imagem tem que ser “rolada” para trás.

No y foi coloca 5px para dar a impressão que o botão fica maior - sobe - ao passar o mouse sobre. Começando com 5px o botão ficará mais baixo. Usando a pseudo-classe hover vamos setar o y da posição da imagem para 0px para fazer o efeito descrito anteriormente. Repare que o x permanece o mesmo.

Agora é só salvar e testar o menu.

ps: A utilização de uma única imagem de fundo não quer dizer que todos os demais exemplos serão assim. Como esse exemplo só tem três botões prefiri fazer assim. Para que ao carregar a imagem todos os menus aparecerão ao mesmo tempo.

mais sobre:

Maujor - Barra de Navegação **

Nessa segunda estrutura vamos ver um exemplo de site “tipo portal”. Sem largura fixa, se estendendo na tela e mudando o tamanho (largura) dependendo da resolução do usuário (fluido).

Dividido em 5 partes - topo, coluna esquerda, coluna central, coluna direita e rodapé.

Você pode ver um exemplo desse layout aqui.

Estruturando o XHTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!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>CSS Layout</title>
        <style type="text/css"></style>
    </head>
<body>
  <div id="geral">
      <div id="topo">
          <h2>CSS Layout</h2>
      </div>
      <div id="meio">
          <div id="menu">
              <ul>
                  <li><a href="#">Link 1</a></li>
                  <li><a href="#">Link 2</a></li>
                  <li><a href="#">Link 3</a></li>
                  <li><a href="#">Link 4</a></li>
              </ul>
          </div>
          <div id="banners">
              <p>Nulla nulla. Donec sit amet augue et risus tincidunt eleifend. Vestibulum quis pede. Aliquam erat volutpat. Morbi consequat dignissim dolor. Quisque felis erat, elementum at, aliquet non, bibendum at, nibh. Integer ut nibh imperdiet purus commodo posuere. Sed eget nisl vitae lectus accumsan rhoncus. Nulla semper euismod neque. Nullam gravida. Donec porta dictum arcu. Proin nisl. </p>
          </div>
          <div id="conteudo">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut dapibus neque et felis. Proin nonummy. Suspendisse fermentum lobortis libero. Nam imperdiet imperdiet ipsum. Phasellus laoreet lectus ut neque. Nam tempus vestibulum leo. In posuere adipiscing metus. Sed tincidunt quam non arcu. Suspendisse nibh ante, consectetuer et, dapibus a, semper a, purus. Integer augue. Vestibulum bibendum. Duis sit amet enim vel leo dapibus fermentum. Phasellus sem. Phasellus dapibus, lectus sit amet malesuada tempus, augue elit tempor nisi, ut lacinia est sapien ac nisl. Duis velit eros, laoreet sed, pretium quis, dignissim in, quam. Pellentesque posuere, lectus nec euismod molestie, felis eros mattis orci, eget sollicitudin nisi sapien vel dolor.</p>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque imperdiet, mauris ac volutpat accumsan, tellus nisi tincidunt turpis, non semper lectus orci quis magna. Fusce consectetuer. Integer in nisi et orci rhoncus ornare. Aliquam sit amet quam sit amet nisi elementum cursus. Sed ipsum. Mauris quis velit eu magna iaculis vulputate. Cras vel sem sit amet turpis consequat feugiat. Curabitur sapien lectus, bibendum eu, tincidunt eget, laoreet et, urna. Quisque eget orci. Curabitur a felis nec leo elementum commodo.</p>
              <p>Quisque turpis eros, pulvinar id, pharetra id, sagittis ac, velit. Aenean nec eros ac magna molestie gravida. Nulla nibh diam, condimentum quis, gravida vel, sodales rhoncus, lectus. Mauris nunc ipsum, viverra in, cursus nec, sagittis a, augue. In libero. Donec eget urna. Nam tempus vehicula orci. Praesent lobortis, dolor a feugiat fermentum, orci libero ullamcorper purus, id mattis est nisi sit amet est. Morbi sed arcu tempus felis mattis pretium. Suspendisse nec risus. Sed a neque.</p>
              <p>In hac habitasse platea dictumst. Sed faucibus, quam sed sodales lacinia, dui metus placerat mi, eget dictum eros tortor et nunc. Ut mauris felis, volutpat nec, consectetuer sit amet, semper eu, odio. Sed volutpat mattis ipsum. Etiam dictum congue augue. Cras tristique eros lacinia sem. Cras est. Cras velit orci, placerat eu, tempor eget, dictum et, urna. Aenean varius viverra metus. Suspendisse aliquam, massa sit amet vehicula consequat, magna risus fringilla arcu, ut cursus ipsum odio id diam. Cras ac ipsum. Aliquam vitae enim. Nulla lacus sapien, adipiscing a, venenatis sed, interdum vel, velit. In est neque, posuere sed, elementum sed, elementum ac, nulla. Suspendisse potenti. Aenean lorem. Sed nisi mauris, facilisis sit amet, congue vel, fermentum sed, nibh. Suspendisse consequat, tortor at mattis rutrum, orci diam commodo ligula, congue lacinia sem leo quis ligula.</p>
              <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras mi ipsum, scelerisque vitae, mollis non, molestie non, odio. Curabitur erat. Praesent fermentum. Curabitur vel lacus vitae metus vehicula mollis. Curabitur ipsum nibh, tempor eu, gravida vel, ultrices vitae, leo. Duis ac lacus. Donec tincidunt scelerisque libero. Suspendisse accumsan. Nullam lorem augue, pellentesque sed, lobortis eget, fermentum vitae, mauris. Aenean bibendum fermentum nulla. Aenean bibendum adipiscing diam. Etiam ipsum velit, tempus a, porta a, sollicitudin non, turpis. Etiam tincidunt odio ac quam.</p>
              <p>Vivamus vel dolor in lectus imperdiet accumsan. Cras et libero nec augue tristique aliquet. Donec tempus. Aenean malesuada, orci et iaculis tristique, metus tellus consequat augue, et dictum nisi magna quis augue. Vivamus ligula leo, faucibus et, auctor vel, molestie vitae, elit. Nam tempus pellentesque sem. Curabitur aliquam hendrerit est. Sed non massa non ante scelerisque tincidunt. In aliquet scelerisque nibh. Phasellus ante risus, vehicula blandit, ultrices ut, scelerisque sed, felis. Nulla sit amet eros id dolor fermentum condimentum. Ut purus velit, ullamcorper sit amet, egestas a, sodales vel, ligula.</p>
          </div>
      </div>
      <div id="rodape">
          <h2>CSS Layout - <a href="http://rogeriolino.wordpress.com/">rogeriolino.wordpress.com</a></h2>
      </div>
  </div>
</body>
</html></em>

Foi colocado na coluna da esquerda (id=“menu”) um menu, na coluna do meio (id=“conteudo”) um texto qualquer e na coluna da direita (id=“banners”) um pequeno parágrafo só para encher lingüiça.

Agora você deve estar se perguntando por que a coluna do meio vem depois da coluna da direita, já que na hora de ver fica ao contrário.

Resposta: Simplesmente não funciona se a coluna da direita vier primeiro da coluna do meio. Na hora de colocar para flutuar (direita), a coluna do meio não “sobe”. Fica no centro certim mas não fica alinhado acima com as demais colunas. Resumindo essa ordem realmente é importante. =]

Desenrolando com o CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

#topo {
  height: 120px;
  border: 1px solid #f1f1f1;
  text-align: center;
}

#topo h2 {
  color: #999999;
  font-family: verdana, Arial, Sans-Serifv;
}

#meio {
  margin-top: 10px;
}

#menu {
  width: 150px;
  float: left;
}

#menu ul {
  width: 150px;
  border: 1px solid #f1f1f1;
  padding: 0;
  margin: 0;
}

#menu ul li {
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu ul li a {
  width: 130px;
  _width: 150px;
  height: 20px;
  display: block;
  padding: 3px 0 0 20px;
  text-decoration: none;
  color: #999999;
  font: 12px verdana, Arial, Sans-Serif;
}

#menu ul li a:hover {
  color: #000000;
  background: #f1f1f1;
}

#conteudo {
  margin: 0 180px;
  text-align: justify;
}

#conteudo p {
  font: 12px Verdana, Arial, Sans-Serif;
}

#banners {
  width: 150px;
  float: right;
  border: 1px solid #f1f1f1;
}

#rodape {
  height: 50px;
  border: 1px solid #f1f1f1;
  clear: both;
  text-align: center;
}

#rodape h2 {
  color: #999999;
  font: 11px verdana, Arial, Sans-Serif;
}

Para quem ainda não viu ou não conhece ainda o CSS, esse código vai dentro da tag style. Que por sua vez fica dentro da tag head. Isso para adicionar o CSS no próprio arquivo, caso queira chamar um arquivo externo aqui tem um exemplo.

Bem, olhando o código não tem muito o que explicar. Primeiramente definimos os tamanhos das camadas (topo: altura=120px, rodape: altura=50px, menu: largura=150px, banners: largura=150px).

Colocando as colunas do canto para flutuar (menu: float=left, banners: float=right).

Foi criado um menu no layout também, e se você reparar tem um CSS Hack nele, para que ele funcione corretamente no Internet Explorer 6 ou anterior. Nesse post não vou explicar como e o que foi feito, para mais aqui. Na coluna do meio defini-se uma margin para ambos lados para deixá-lo com uma largura única e não deixando o texto “escapar” para os lados.

E lembrando de colocar o clear como both no rodape. Para ele ficar sempre abaixo das demais camadas.

No site do Tableless tem um vídeo tutorial muito bom, mostrando exatamente como faz um layout desse tipo, mas dando mais exemplos para deixa-lo ou não fixo. No qual eu quase que praticamente fiz igual. Só que o vídeo tutorial é bem mais explicativo e melhor montado, vale muito a pena conferir.

Terceira referência de CSS agora mostrando a propriedade Font.

FONT

font-style: define o estilo da font.

• nomal: não muda nada, a font fica na vertical.

• italic: deixa a font em itálico, inclinada.

• oblic: converte a font oblíqua.

font-variant: mostra o texto com todas as letras em maiúsculo mas mantendo o tamanho diferente entre maiúsculas e minúsculas.

• normal: não altera a font.

• small-caps: transforma em maiúscula de menor altura.

font-weight: define o quanto a font é mais pesada, mais escura.

• normal: não altera.

• _bold: negrito. _

• bolder: um pouco mais escuro que bold.

• lighter: um pouco mais claro que bold.

_Ou pode setar uma centena para definir o valor: 100, 200, 300, 400, 500, 600, 700, 800, 900. _

font-size : tamanho da font, altura. Pode tanto definir um valor numa medida aceita pelo CSS (px, em, pt, cm…), porcentagem, ou um tamanho pré-definido abaixo, do menor para o maior:

xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large

font-family: o tipo da font (o nome), podendo definir uma lista de maior prioridade dos tipo mais à esquerda separando por vírgula. Caso o usuário não tenha determinada font passa à próxima, assim sucessivamente. Para nomes complexo adicionar aspas dupla.

ex: Verdana, Arial, Tahoma, “Comic Sans MS”, Sans-Serif;

color: aplica uma cor desejada à font (Hexadecimal, RGB ou nome em inglês).

• _ ex: #FF0000;_

• _ ex: red;_

• ex: rgb(255, 0, 0);

font: jeito simplificado de escrever tudo. Ficando nessa seguinte ordem os valores: [style] [variant] [weight] [size] [line-height] [family].

Sendo os valores size e family obrigatórios os demais assumem o valor padrão.

_ex: font: italic small-caps bold 12px Arial, Tahoma, Sans-Serif; _

_ex: font: 12px Arial, Tahoma, Sans-Serif; _

mais sobre:

Maujor - A Propriedade Font

W3Schools - CSS Reference

Começando a segunda referência de CSS, vamos ver sobre: Margin & Padding.

Primeiramente uma breve descrição sobre cada. O margin como próprio nome já diz é o espaçamento da margem do elemento, da borda pra fora. Já o padding é o espaçamento da borda pra dentro do elemento. Ambas propriedades tem a sintaxe bem semelhante.

Margin

margin: seta o valor da margem para todos os lados. Podendo definir um a um, ou só um valor para todos, ou um valor para os lado e outro para cima e para baixo. Ficando a seqüência assim: top right left bottom. ex: margin: 15px 0px 20px 5px; (ficando: 15px (cima) 0px (direita) 20px (baixo) 5px (esquerda).

margin-top: define só a margem do topo. (ex: 15px;);

margin-right: define só a margem do topo. (ex: 0px;);

margin-bottom: define só a margem do topo. (ex: 20px;);

margin-left: define só a margem do topo. (ex: 5px;);

Padding

padding: seta o valor do espaçamento para todos os lados. Podendo definir um a um, ou só um valor para todos, ou um valor para os lado e outro para cima e para baixo. Ficando a seqüência assim: top right left bottom. ex: padding: 15px 0px 20px 5px; (ficando: 15px (cima) 0px (direita) 20px (baixo) 5px (esquerda).

padding-top: define só o espaçamento do topo. (ex: 15px;);

padding-right: define só o espaçamento do topo. (ex: 0px;);

padding-bottom: define só o espaçamento do topo. (ex: 20px;);

padding-left: define só o espaçamento do topo. (ex: 5px;);

mais sobre:

W3Schools - CSS Reference