Truques CSS para não enlouquecer

Algumas soluções aos problemas típicos que você pode encontrar com CSS.

Por Leonardo A. Correa


Publicado em: 29/7/08
Valorize este artigo:
Não tire ainda o monitor contra a parede! Aqui vão os principais truques CSS para fazer frente aos típicos problemas que os web designers enfrentam quando constroem com CSS. Poderão existir discrepâncias entre os leitores, porém esclareço que estas são técnicas que a mim pessoalmente me deram resultado, depois de muitas provas e tentativas aprendi isto...

Use um contêiner global para todas as caixas (quando as coisas se disparam)
Desta forma estará pré-fixando globalmente a ordem de todas as demais caixas. Em referência a este contêiner ordena o resto das coisas interiores. É como se fizesse uma cerca para que nada se escape. Obviamente estamos falando de sites "fixos" não elásticos.
À vezes é bom usar um contêiner até o corpo do site, logo deixar o rodapé fora.

Exemplo para um contêiner de 900px centrado:
#contêiner {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 900px;
}

Que flutue à esquerda (quando as caixas se sobrepõem)
Esta é uma ótima forma de evitar incompatibilidades entre navegadores. O uso de hacks de CSS se devia em grande parte porque se trabalhava "centralizando" as caixas. Se por exemplo, precisar colocar três caixas de 300px em um contêiner de 900px você poderá fazer o seguinte:

Exemplo:
#caixa {
float: left;
width: 300px;
}

Calcular bem os paddings ou preenchimentos (quando as caixas forem abaixo)
Quase todas as dores de cabeça com o CSS se devem ao mal uso ou à má interpretação que se faz do padding. Porém, é mais simples do que parece.
Para que servem os paddings ou preenchimentos? Bom, o que faz é gerar um "preenchimento" de determinada medida para dar por exemplo, como uma margem aos elementos, porém o faz sobre a largura em píxels que esteja pré-fixada. Por exemplo: se tivermos uma caixa de 300px e lhe aplicarmos um padding de 10px na esquerda, agora teremos uma caixa de 310px. Isto fará transbordar o resto das caixas e as deslocarão para baixo. Aí é quando o designer principiante fica louco. O tema é que se houver uma diferença de até um 1px se produzirão estes transbordamentos, senão observe quando lhe incluir bordas em sua caixa se se produzirão diferenças.
O que se deve fazer é simples, calcular bem e lembrar cada ajuste que se faça dos preenchimentos. Agora teremos que fazer uma caixa de 290px com paddings de 10px à esquerda.

Exemplo:
#caixa {
float: left;
width: 290px;
padding-left: 10px;
background-color: #FFE6DD;
}

O rodapé da página com largura fixa (quando o rodapé da página enlouquece):
Para entender melhor como funciona o uso de caixas em CSS se pode pensar em um grupo de objetos de diferentes formas que lutam por se adaptar e ocupar o espaço que se pré-fixou. Acontece muitas vezes que os rodapés de página são os que mais problemas trazem quando se constrói um site. Ou vai para cima, ou se alinha à esquerda, ou transborda, etc. Muitos de nós resolvíamos este tema pré-fixando valores fixos às alturas de caixas, porém não faz sentido. O que se deve fazer é estabelecer de novo um valor de largura fixo. Desta forma o rodapé irá definir seu lugar do resto e irá parar aonde tem que ir.

Exemplo:

#rodape {
width: 900px;
background-color: #666666;
}

Nem tudo é 1+1=2 em CSS (quando as larguras não fecham)
Um problema comum em css é pensar que todas as larguras entre caixas fecham perfeitamente. Às vezes é necessário jogar com os valores dos contêiners, às vezes contrário à lógica há que adicionar alguns px aos contêiners.

OUTROS TRUQUES RÁPIDOS:

Truques simples, dos que não fazem falta explicar muito, mas que são muito práticos e tornará o trabalho mais fácil e evitarão possíveis erros.

- Use cores diferentes para distinguir as caixas
- Coloque uma palavra descritiva em cada caixa
- Comente o código fonte e assinale os finais dos contêiners grandes
- Não seja mesquinho com os espaços entre os divs
- Não seja um fundamentalista e não queira escrever seu CSS com dois ou três linhas. Se não quiser erros escreva o necessário.
- Cuidado com o tamanho das imagens que você insere, estas mudam a largura dos contêiners.
- Escolha bem os nome de cada div e trate de ser ordenado no código.
- Se for trabalhar com várias caixas, trate de agrupá-las, isto é muito importante. Por exemplo, um contêiner que agrupe três ou quatro caixas.

CONCLUSÃO:

Todos estes parágrafos são simplesmente algumas sugestões ou comentários do que me deu dado um bom resultado. Existem outras muitas "ligações" deste tipo, se tiver alguma dúvida não duvide em comentá-las neste mesmo artigo.

O que acontece quando não puder resolver um problema com CSS ou similar? Para mim o melhor é me levantar e espairecer por um momento, fazer qualquer outra coisa e logo voltar e tentar resolver de novo.

Deixar de renegar e não enlouquecer com CSS dependerá da quantidade de tempo, trabalho e esforço que coloque em seu trabalho. Não duvide!





Comentários do artigo
Foram enviados 3 comentários ao artigo
2 comentários não revisados
1 comentário revisado:
Problemas com scripts
Por: carlos-eduardo
14/6/09
Salve salve pessoal. Num primeiro momento, quero agradecer a todos os que escrevem e compoem este brilhante e útil tutorial de CSS e também de outras linguagens.

A prática é esta que está exposta. Tentar, buscar conhecimento, se não der certo, descanse, volte mais tarde. Se for altas horas, durma. Quando acordar terá a resposta já na mente.

A demetrius. Cara, pega leve. Se não pode ajudar, especificando algo que seja útil, cale-se. Não tem o direito de chamar ninguém de burro simplesmente porque uma terminologia foi utilizada diferentemente da que seu conhecimento concebe.

A todos, um fraterno abraço.

H4CK3R Magnum

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato