Centralizando DIVs Vertical e Horizontalmente

Um amigo me lançou um desafio, se fosse possível centralizar verticalmente um menu ele abandonaria de vez o uso de tabelas para desenhar layouts HTML.

O objetivo dele era usar um menu no centro do browser independente da quantidade de opções que esse menu pudesse ter. Isso era feito facilmente com o uso de tabelas, bastava um valign=middle e estava pronto. Mas ele queria fazer usando tableless (já havia apresentado o conceito anteriormente), mas não consegui.

A princípio também achei que não fosse possível, mas não desisti e continuei a pesquisar. Em uma das listas que participo cheguei a esses artigos da hicksdesign :

- Vertical centering with CSS

- Vertical & horizontal centering 2

E ambas acabaram me levando ao Top Tip Vertical Centring with CSS do Web Page Design for Designers.

Desafio vencido, basta agora Ed cumprir a promessa e abandonar de vez o uso de tabelas para desenhar layouts de páginas.

Eu estou a cada dia mais convencido que tudo é possível com CSS!

o[>_<]o
[Lutando por WaSP]

Construindo Acessibilidade

O sitio Acessify.com oferece uma série de ferramentas para a construção de HTML, mas podemos dizer que existem vários outros com o mesmo propósito e é apenas mais um wizardzinho. Mas o serviço dele é pensando em acessibilidade, talvez pra corrigir o mal que as ferramentas e wizards fizeram ao viciarem milhões de desenvolvedores a escreverem layouts usando tabelas.

Destaque para as seguintes ferramentas:

- List-o-matic - Gerador de menu CSS
- Accessible Form Builder - Usando CSS e Table, vai escolher qual?
- Pop-up Windows Generator - Não usem indevidamente :)

Agora é CCC (clicar, copiar e colar)!

o[>_<]o
[Lutando por WaSP]

Criando páginas com base em CSS

A CSSVault recentemente disponibilizou um tutorial passo a passo que ensina como criar páginas baseadas em CSS.

Esse tutorial está dividido em três partes: a parte 1 cobre a criação das teclas da navegação no CS Photoshop, a parte 2 cuida da criação do fundo, e a última cobre o cabeçalho, disposição da página e finalmente a execução do CSS no XHTML.

Tudo isso vindo do fantástico Veerle´s Blog!

Sugiro a visita!

o[>_<]o
[Lutando por WaSP]