Posts Tagged position absolute

CSS Cleanner – limpando de vez as maluquices dos browsers

Salve galera! hoje vou publicar um método que utilizo sempre para evitar problemas com diferenças no layout entre os browsers (é claro que só isso não resolve totalmente, lógico … não é simples assim, mas já ajuda bastante).

Nos meus desenvolvimentos eu costumo utilizar bastante um método de centralizar a minha página, fazendo com que o conteúdo fique sempre a vista do usuário, mesmo quando ele não está com a janela do navegador totalmente maximizada, para isso eu utilizo o atributo “position:absolute;” do meu elemento principal veja um exemplo abaixo:

#principal {
width:800px;
height:auto;
left:50%;
margin:0 0 0 -400px;
position:absolute;
}

Imagine que meu elemento principal tem 800 pixels de largura, e eu preciso que ele fique centralizado na página, com o atributo “left:50%” nós forçamos o elemento a ir 50% para esquerda da página independente do tamanho que ela seja, e com a margin nós puxamos ele devolta utilizando a metade do seu tamanho em largura “margin:0 0 0 -400px” (lembrando que a largura é 800px então a sua metade é justamente 400px), e por fim utilizandoo atributo “position:absolute”, forçando ainda mais o elemento a manter a posição absoluta à página… foi fácil até agora ? ai é que começa a briga entre os browsers, este caso é somente um exemplo, mas é por essas e outras que utilizo o css cleanner, que nada mais é do que um css incluindo tudo que você utiliza no seu projeto (tags) e zerando todas as suas propriedades, sem isso cada browser ira seguir um padrão e adaptar as suas tags como ele quiserem seguindo um critério próprio … exemplo: Firefox ficara diferente do Internet Explorer, que ficara diferente do Safari e assim por diante (isso mesmo começe a arrancar os seus cabelos), mas já vamos resolver isso :)

Este caso abaixo eu costumo utilizar nos meus projetos mas vocês podem adaptar da forma que acharem melhor:

*{
outline-color:invert;
outline-style:none;
outline-width:medium;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: inherit;
font-size: inherit;
font-family: inherit;
vertical-align: baseline;
}

uma outra forma que também utilizo quando não vou utilizar muitos elementos:


html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

bom é isso ai, espero que tenham gostado.
abraços!

, , , ,

Nenhum comentário.