Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas

Posicionamento com CSS

Por , em Desenvolvimento frontend

Recommended Posts

Douglas    6

Douglas
Postado

Posicionamento com CSS: estático, absoluto, relativo e fixo

por Bruno Torres on css

 

Quem está chegando agora ao mundo dos padrões web costuma se ver às voltas com duas propriedades do CSS, que são fundamentais quando se deseja construir layouts sem tabelas: float e position. Neste texto vou falar um pouco sobre esta última.

 

Escrevo este texto motivado por um tópico sobre o assunto na lista webstandards-br. Vamos então ao que interessa.

 

Existem quatro tipos de posicionamento em CSS: estático, relativo, absoluto e fixo. Vamos tratar cada um separadamente. (continua...)

 

Leia o post completo - http://www.brunotorres.net/2005/09/27/posicionamento-com-css

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

dei uma lida ainda pouco... terminei o artigo sobre isso e o cara vai e posta exatamente o mesmo assunto q criei... uahuahau... aposto q nego vai pensar q peguei d lah... fazer o q neh...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pedro Eideias    0

Pedro Eideias
Postado

eai douglas!tenho uma dúvida q faz muito tempo q estou atras....v c você pod me ajudarpreciso criar o efeito fixed no IE....como???valeu!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

" Fixed - funciona como o absolute, mas com uma grande diferença, além de posicionar-se absolutamente, ele faz com que o objeto, elemento fique fixo na tela, independente da rolagem da tela, fazendo com que o elemento fique sempre visível.

 

ps.: o i.e. não oferece suporte a este valor do position. =[ " (Dulcetti, 2005)

 

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Acho que isso deve ajudar ^^ funciona tanto no IE quanto no FIREFOX e OPERA

<style>.fixaracima{  position:fixed;  _position:absolute;  top:0;  _top:expression(eval(document.body.scrollTop));  left:0;}.fixarabaixo{	position: fixed;	_position: absolute;	_top:expression(body.scrollTop + document.body.clientHeight - 25 + "px");	left: 10px;	bottom:0;}</style><div class="fixaracima">teste de fixo no internet explorer acima</div><div class="fixarabaixo">teste de fixo no internet explorer abaixo</div>
atenção:ATUALIZANDO POSTE

consegui hehe ^^ modificado o CSS agora funciona abaixo e acima

 

--------------------------

 

vasculhando a NET achei isso, porem não recomendo

<style type="text/css">body  {  overflow: hidden;  }.corpo {  margin:0;  margin-top:19;  width: 101%;  height: 105%;  overflow: auto;  }.caixa{  background:#cc0000;  width: 20;  height: 20;  position:absolute;  bottom: -20;  left: 0;}</style><body><div class="corpo">conteudo</div><div class="caixa">d</div>
explicando os pontos:

overflow: hidden; faz a barra de rolagem "original" da pagina sumir

enão devemos criar um novo "corpo" será o substituto da barra de rolagem

nessa classe é implementada a nova barra de rolagem com overflow: auto;

e por fim usamos bottom: -20; para descontar o tamanho do DIV

exemplo se usarmos height:149px; devemos dar um desconto de -149 no bottom

 

caso alguem ache incoveniente usar essa solução ponha o motivo e uma explicação

ainda continuo a procurar novas soluções ^^

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito