CSS
13/03/10
Este post serve para mostrar a utilização do CSS para realizar atividas básicas na construção de um site.
Alinhar conteúdo do site no centro da tela independente da resolução:
Neste artigo vamos entender como alinhar um site ao centro do monitor do usuário, independente da resolução em uso.
Por exemplo, desenvolvemos um site com base em 800×600 e se por aventura quando alguém o acessá-lo utilizando uma resolução de 1024×768 ou superior, ele (site) aparecerá alinhado ao centro.
Para realizarmos esta função, precisamos de uma <div> (layer) que englobe todo o conteúdo da página, assim:
<div id=”tudo”>
conteúdo aqui.
<div>
Repare que atribuímos um id a ela, para podermos fazer referência com este pela CSS. Veja agora a instrução CSS para alinharmos a <div> tudo.
#tudo {
background-color: #fff;
width: 750px;
margin: 0 auto;
}
Veja o resultado no navegador:
Explicando:
O que fizemos foi especificar o tamanho da <div> como 750px, e definir as margens direita e esquerda como auto (margin: 0 auto;), então o browser faz o restante para você.
Na imagem acima a resolução está como 1024×768, então o navegador atribuiu 137px de margem esquerda e direita. Entendeu? Não? Ok, explico melhor.
A resolução é 1024×768 e o tamanho da <div> tudo é de 750px, certo? Bom, então 1024px-750px = 274px. Este valor (274px) o browser divide por dois, ficando 137px para a margem direita e esquerda.
Pronto, resolvido o problema? Não. Se você testar no Internet Explorer 5.x para Windows o site vai estar alinhado a esquerda, como na imagem abaixo:
Isto ocorre por que o Internet Explorer 5.x para Windows não respeita o valor auto para as margens esquerda e direita, mas não se preocupe, existe um “remedinho” para esse problema.
Basta acrescentarmos ao seletor <body> esta instrução CSS:
body {
text-align: center;
}
O resultado será o exemplificado na imagem a seguir:
Como pode perceber na imagem acima, o Internet Explorer 5.x para Windows também interpreta a propriedade e o valor “text-align: center”; erroneamente.
Então precisamos acrescentar mais uma instrução para a <div> tudo, assim:
#tudo {
text-align: left;
}
Finalmente o resultado em todos os navegadores:
Veja as CSS completa:
body {
background-color: #999;
text-align: center;
}
#tudo {
background-color: #fff;
width: 750px;
margin: 0 auto;
text-align: left;
}
Fonte: http://imasters.uol.com.br/artigo/3479/dreamweaver/incertezas_de_alinhamento/
CSS Reset:
Por padrão, todos os elementos HTML possuem um estilo incorporado, e isso varia de browser para browser, não existe um padrão. Com isso você pode passar por vários problemas ao tentar desenvolver CSS Cross-browser.
Para evitar esse tipo de problema, é aconselhável utilizar técnicas de CSS Reset, ou seja, iniciar o CSS com todos as tags HTML sem qualquer estilo padrão definido pelo browser.
Esse com certeza é o mais conhecido e utilizado pelos desenvolvedores:
* {
padding: 0;
margin: 0;
border: 0;
}Fonte: http://imasters.uol.com.br/artigo/15526/css/tecnicas_para_reset_css/
Aos poucos irei adicionando mais informações a este post!
Att,
Kleber Caires
Inauguração do Blog
08/03/10
Olá!
Estou iniciando este blog para falar sobre assuntos diversos como tecnologias móveis e programação web.
Em breve posterei alguns conteúdos para iniciar de fato o blog.
Att,
Kleber Caires