value1

Pedido de nosso camarada David com “Centralizar uma página na tela”

rssNesta dica vou mostrar como centrar uma página na tela, independente da resolução ou tamanho do monitor usado pelo visitante.

O "truque" consiste em englobar todo o documento dentro de uma div e estilizá-la com umas regras CSS bem simples.

 

 

 

Em geral, uma página centralizada na tela é dimensionada para uma largura que se acomode numa tela com resolução de 800 x 600 px. Vamos então admitir esta hipótese de largura 800px para nossa página.

A largura total da div que engloba a página toda a qual chamaremos #tudo será adotada igual a 760px ( este valor é bastante cômodo, para garantir que em nenhum brownser apareça uma barra de rolagem horizontal em 800 x 600 de resolução. Se você costuma projetar com valores diferentes use-o, mas certifique-se da eliminação da rolagem horizontal em 800 x 600).

Então estamos acertados em uma largura de 760 px. Se você simplesmente definir esta largura para a div ela será colocada no canto esquerdo da tela!

A propriedade CSS margin faz o "truque". Basta definirmos que as margens esquerda e direita serão automáticas, pois CSS prevê o valor auto para as margens.

É assim: CSS dimensiona a div com a largura especificada e coloca margens esquerda e direita IGUAIS. Se a tela tem largura de 1024px, CSS calcula 1024px - 760px = 264px e coloca margens laterais de 264px / 2 = 132px CENTRANDO A PÁGINA qualquer que seja a resolução.

MAS QUE DROGA! O Internet Explorer interpreta errado a regra como ela foi mostrada acima. Ela funciona e centraliza a página em todos os brownsers, menos no IE 🙁

Devemos então usar um artifício (hack) para fazer funcionar no IE. Basta declarar text-align:center; no elemento body da página e isto resolve, mas cria outro problema. Além de centralizar no IE coloca os textos também centralizados na página. E, para corrigir isto declaramos na #tudotext-align:left; UFA! obrigado ao IE pelos seus "bugs" para as CSS

E, a seguir o código completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma página centrada na tela.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Centrar uma página com CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <head> <style type="text/css"> body { margin:0; padding:0; background:#cccccc; text-align:center; /* hack para o IE */ } #tudo { width: 760px; margin:0 auto; padding: 10px; text-align:left; /* "remédio" para o hack do IE */ } #conteudo { padding: 5px; background-color: #eeeeee; } </style> </head> <body> <div id="tudo"> <div id="conteudo"> <h1>Pagina Centrada com CSS sem scroll ate 800x600</h1> <p> Não use nenhum elemento HTML (figuras, tabelas, etc...) com largura superior a 750px.</p> </div> </div> </body> </html>
value1

Técnicas que podem ser aplicadas ao CSS para facilitar a vida dos usuários

Como são vários pontos vamos enumerar em tópicos:
1 - Crie um estilo de apresentação consistente em todas as páginas: Tente padronizar todas as páginas do site, crie o mínimo de folhas de estilos e use folhas de estilo externas, evite criar folhas de estilo in-line, assim facilita também a manutenção do site.

 

 

 

 

 

 

 

 

css

2 - Evite definições que estão fora dos padrões da W3C: Para garantir que o site não terá nenhuma incompatibilidade, não utilize regras, comandos ou técnicas que já estão em desuso.

3 - Use unidade de medidas relativas: Evite usar unidade de medida fixas, como cm e pt. Dê preferência pelas unidades em e %, só utilize medidas fixas, para elementos que possuem medidas fixas, como imagens.

4 - Evite usar imagens: Se for possível, substitua as imagens por texto, quando isto não for possível, forneça uma explicação da imagem em forma de texto, através da tag “alt” do elementos img, por exemplo: <img src=”http://www.treinaweb.com.br/images/treinaweb_elearning2.gif” alt=”Logotipo do site TreinaWeb” />

5 - Forneça o site sem html: No momento do desenvolvimento do site, verifique se ele permanece legível, mesmo que sem o CSS da página, para facilitar os usuários que utilizam browsers sem suporte ao CSS.

6 - Evite utilizar apenas um fonte de letra: Sempre forneça mais de uma opção de fonte, bem como evite utilizar fontes em desuso ou pouco utilizadas.

7 - Crie um estilo de texto simples: Evite utilizar efeitos no texto, como: efeitos de sombra, “piscante”. Caso tenha que aplicar os efeitos no texto, sempre forneça uma forma de “desligar este efeitos”.

8 - Sempre utilize as folhas de estilo para tabular o texto: Nunca tabule o texto “à mão”, utilize os elementos do CSS para tabular o texto, como: word-spacing, text-indent, write-spancing.

9 - Cuidado ao utilizar cores nos textos: Certifique-se que toda informação transmitida pela cor esteja disponível também sem a cor, por exemplo, mediante contexto ou por marcadores.

10 - Sempre teste seu site em um browser somente texto (o mesmo que os leitores de tela utilizam). O Lynx é um dos mais famosos. Se não quiser instalá-lo, existem alguns emuladores, como o LynxView.

Por enquanto é isto. No próximo artigo traremos mais dicas de como utilizar o CSS para tornar o site mais acessível.