Ir para conteúdo

Arquivado

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

{TeRmInAtOr}

Posicionar DIV

Por , em Desenvolvimento frontend

Recommended Posts

{TeRmInAtOr}    1

{TeRmInAtOr}
Postado

Alguem sabe me dizer como faço para posicionar uma div no canto inferior direito da tela de forma q ela fique sobreposta ao conteudo e fique flutuante, ou seja, não saia do lugar caso tenha rolagem n página?

 

Para se mais específico, semelhante a que tem no gmail!

Imagem Postada

 

Não sei se eles usam javascript para posicionar ela pois ela nao se move quando mexe na rolagem, nem se quer pisca como acontence quando usa javascript.

 

Alguem tem idéia como fazer isto, estou tentando fazer uma janela para exibição de mensagens em tempo real semelhante ao messenger...

Compartilhar este post

Link para o post
Compartilhar em outros sites

{TeRmInAtOr}    1

{TeRmInAtOr}
Postado

Isto setaria a prioridade de visualização em relação a outro elemento correto?SeriaIsto setaria a prioridade de visualização em relação a outro elemento correto?Isto seria a questão de sobreposição do conteudo do site é isto?Mas a dúvida q fica e a questão de posicionamento da div, não consegui achar uma q se comporte da mesma forma que a do gmail.

Compartilhar este post

Link para o post
Compartilhar em outros sites

{TeRmInAtOr}    1

{TeRmInAtOr}
Postado

Bom micox o fixed e uma beleza porém como disse so funfa no FF, o que estou procurando e exatamente isto só que precia funcionar em ambos navegadores.Estou pesquisando agorea com base no fixed para ver se nao acho nada funcional, senão terei de fazer gambiarra para o IE...Se eu achar eu posto aí.

Compartilhar este post

Link para o post
Compartilhar em outros sites

TheChessMan    0

TheChessMan
Postado

Tem solução em js pra fazer o fixed funcionar no ie, existem tbm umas técnicas só com css, mas não são mto úteis na 'vida real'

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

position:absolute;bottom:0;right:0;z-index:1;tente isso na div flutuante.. para ficar posicionada q nem a do gmail![]'s

o problema eh q dessa forma, se o conteúdo for maior que a tela útil, o div sobe ao descer o scroll...acho q o jeito de fazer isso, eh via javascript... requisitando ao descer a rolagem, algo parecido, e sempre será bottom 0 e right 0... q nem akeles menus antigos, q ao descer o scroll, o menu desce logo depois... mas ae naum teria delay, faria em tempo real... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

q bizarro... acho demais isso jah... se for um bate papo, como o gtalk no gmail, beleza... senaum, naum creio q valha a pena...

Compartilhar este post

Link para o post
Compartilhar em outros sites

{TeRmInAtOr}    1

{TeRmInAtOr}
Postado

Achei a incrivel solução, funciona no Mozilla, ie e firefox.

Só preciso dar uma peneirada no código.

 

Viu TheChessMan vai ser uma mistura do gmail com messenger.

Estou desenvolvendo um sistema de help desk usando ajax, isto vai servir para abrir janelas alertando o recebimento de mensagens.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title> stu nicholls | CSS PLaY | emulating position fixed for Internet Explorer </title><style type="text/css">#adsie {position:fixed; top:10px; left:0;}html {background:rgb(123,187,221);}body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:rgb(123,187,221);}body {font-family: georgia, serif; font-size:16px;}#page .right {font-size:30px; float:right;}#menu {display:block; bottom:0;right:0;width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}* html #menu {position:absolute;}#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#000;}#menu a:hover {background:#aaa; color:#fff;}.clear {clear:both;}p:first-letter {font-size:25px; color:#d88;}#fixpic {display:block; width:108px height:145px; position:fixed; bottom:0; left:0;}* html #fixpic {position:absolute;}</style><!--[if lte IE 6]>   <style type="text/css">   /*<![CDATA[*/ html {overflow-x:auto; overflow-y:hidden;}   /*]]>*/   </style><![endif]--><!--[if lte IE 6]><style>   /*<![CDATA[*/ #adsie {position:absolute; top:10px; left:0;}   /*]]>*/</style><![endif]--></head><body><div id="menu">teste de menu fixo</div></body></html>

 

Chega a posicionar por cima do scroll a div.

 

Vlw ae gurizada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

{TeRmInAtOr}    1

{TeRmInAtOr}
Postado

Eu vou dar uma distancia para nao ficar em cima do scroll.

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