Você está na página 1de 3

No tire ainda o monitor contra a parede!

Aqui vo os principais truques CSS para fazer frente aos tpicos problemas que os webdesigners enfrentam quando constroem com CSS. Podero existir discrepncias entre os leitores, porm esclareo que estas so tcnicas que a mim pessoalmente me deram resultado, depois de muitas provas e tentativas aprendi isto...
Use um continer global para todas as caixas (quando as coisas se disparam)

Desta forma estar pr-fixando globalmente a ordem de todas as demais caixas. Em referncia a este continer ordena o resto das coisas interiores. como se fizesse uma cerca para que nada se escape. Obviamente estamos falando de sites "fixos" no elsticos. vezes bom usar um continer at o corpo do site, logo deixar o rodap fora.
Exemplo para um continer de 900px centrado: #continer { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 900px; } Que flutue esquerda (quando as caixas se sobrepem) 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 trs caixas de 300px em um continer 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 cabea com o CSS se devem ao mal uso ou m interpretao que se faz do padding. Porm, 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, porm o faz sobre a largura em pxels 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 deslocaro para baixo. A quando o designer principiante fica louco. O tema que se houver uma diferena de at um 1px se produziro estes transbordamentos, seno observe quando lhe incluir bordas em sua caixa se se produziro diferenas. O que se deve fazer simples, calcular bem e lembrar cada ajuste que se faa 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 pgina com largura fixa (quando o rodap da pgina 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 espao que se pr-fixou. Acontece muitas vezes que os rodaps de pgina so os que mais problemas trazem quando se constri um site. Ou vai para cima, ou se alinha esquerda, ou transborda, etc. Muitos de ns resolvamos este tema prfixando valores fixos s alturas de caixas, porm no 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 no fecham) Um problema comum em css pensar que todas as larguras entre caixas fecham perfeitamente. s vezes necessrio jogar com os valores dos continers, s vezes contrrio lgica h que adicionar alguns px aos continers. OUTROS TRUQUES RPIDOS: Truques simples, dos que no fazem falta explicar muito, mas que so muito prticos e tornar o trabalho mais fcil e evitaro possveis erros. - Use cores diferentes para distinguir as caixas - Coloque uma palavra descritiva em cada caixa - Comente o cdigo fonte e assinale os finais dos continers grandes - No seja mesquinho com os espaos entre os divs - No seja um fundamentalista e no queira escrever seu CSS com dois ou trs linhas. Se no quiser erros escreva o necessrio. - Cuidado com o tamanho das imagens que voc insere, estas mudam a largura dos continers. - Escolha bem os nome de cada div e trate de ser ordenado no cdigo. - Se for trabalhar com vrias caixas, trate de agrup-las, isto muito importante. Por exemplo, um continer que agrupe trs ou quatro caixas. CONCLUSO:

Todos estes pargrafos so simplesmente algumas sugestes ou comentrios do que me deu dado um bom resultado. Existem outras muitas "ligaes" deste tipo, se tiver alguma dvida no duvide em coment-las neste mesmo artigo. O que acontece quando no 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 no enlouquecer com CSS depender da quantidade de tempo, trabalho e esforo que coloque em seu trabalho. No duvide!

Você também pode gostar