Imagem fixa na rolagem do Fórum

[EDU2010]

Detalhes da questão

Endereço do fórum: http://criadoresdepassaros.com
Versão do fórum: phpBB3

Descrição

Quero que este codigo não se movo ao rodar a pagina pra cima e pra baixao ele fique parado na tela .


Segue codigo

Código:

<div style="position: absolute; width: 490px; height: 510px; z-index: 50000; top: 650px; margin-left:20%;" id="randomElement"><div class="fechar" style="width:500px; height:50px; top:-20px; left:-10px; display:block; position:absolute; z-index:10001;"><a href="#" onmouseover="document.getElementById('randomElement').style.display = 'none';"><div class="botao" style="width:18px; height:18px; top:10px; left:15px; display:block; position:absolute; z-index:10010;"></div></a><img alt="Fechar Anuncio!" border="0" src="https://i.servimg.com/u/f19/15/98/91/46/fechar10.png"></div><a href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw " target="_blank" style=""><img alt="Curta nosso Facebook" border="0" src=" https://i.servimg.com/u/f58/15/98/91/46/benner10.jpg " img="" style="opacity: 1;"></a></div>

Quando eu rodar a tela do forum pra baixo e pra cima que ele fique parado em um determinado local .

[Harleen]

Olá, troque o código atual por esse

Código:

       
<div id="randomElement">
              
   <div class="fechar" style="width: 500px; height: 50px; display: block; position: fixed; z-index: 10001; top: 90%; left: 36%;">
            <a href="#" onmouseover="document.getElementById('randomElement').style.display = 'none';"> </a>     
      <div class="botao" style="width: 18px; height: 18px; top: 10px; left: 15px; display: block; position: fixed; z-index: 10010;">
                    
      </div><a href="#" onmouseover="document.getElementById('randomElement').style.display = 'none';"></a><img border="0" alt="Fechar Anuncio!" src="https://i.servimg.com/u/f19/15/98/91/46/fechar10.png" />     
   </div><a href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw " target="_blank" style=""> </a>     
   <div id="canto">
            <a href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw " target="_blank" style=""> <img border="0" style="opacity: 1;" img="" src=" https://i.servimg.com/u/f58/15/98/91/46/benner10.jpg " alt="Curta nosso Facebook" /></a>     
   </div>
</div><style type="text/css">
#canto {
  position: fixed;
  top: 120px;
  height: 30px;
  z-index: 100;
  left: 12px;
}
</style>

Ficará assim http://prntscr.com/fjao2g

Como você não especificou em qual local ficará eu deixei do lado esquerdo

Até mais

[EDU2010]

Não ficou igual a imagem que me mandou o X ficou bem longe ..

[Harleen]

Onde o código está inserido? na Página Inicial, no template, widget...

Pois aqui está do jeito que lhe enviei no print.
Me diga também que local especifico a imagem ficará

Até mais

[EDU2010]

No widget , ficou sem mexer na imagem apenas o X ficou fora da imagem

[Harleen]

Olá insira o código que enviei e deixe-o ativo para que eu possa detectar o problema

[EDU2010]

ok , feito

[Harleen]

Olá, desculpe a demora, troque o código por esse

Código:

       
<div id="randomElement" style="width: 500px; height: 50px; display: block; position: absolute; z-index: 10001; top: 90%; left: 35%;">
            
   <div style="width: 500px; height: 50px; display: block; position: fixed; z-index: 10001; top: 90%; left: 35%;" class="fechar">
                  <a onmouseover="document.getElementById('randomElement').style.display = 'none';" href="#">              </a>
      <div style="width: 18px; height: 18px; top: 10px; left: 15px; display: block; position: absolute; z-index: 10010;" class="botao">
                      
      </div><a onmouseover="document.getElementById('randomElement').style.display = 'none';" href="#">            </a>            <img border="0" src="https://i.servimg.com/u/f19/15/98/91/46/fechar10.png" alt="Fechar Anuncio!" />         
   </div>
             <a target="_blank" href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw ">      </a>
   <div style="position: fixed; top: 120px; height: 30px; z-index: 100; left: 12px;" class="canto">
      <a target="_blank" href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw ">          <img border="0" src=" https://i.servimg.com/u/f58/15/98/91/46/benner10.jpg" alt="Curta nosso Facebook" />        </a>       
   </div>
</div>

[EDU2010]

O X nao fica no local correto olhe na imagem de exemplo :

[EDU2010]

up

[EDU2010]

up

[EDU2010]

up

[MateusAnjosV]

Boa noite, jovem!

Experimente este meu protótipo:

Código:

<div id="randomElement" style="position: fixed;width: 490px;height: 510px;z-index: 50000;top: 50px;">
   <div style="width:500px;height:50px;top:5px;left:-10px;display:block;position: relative;z-index:10001;" class="fechar">
      <a onmouseover="document.getElementById('randomElement').style.display = 'none';" href="#">
      </a>
      <div style="width: 18px; height: 18px; top: 10px; left: 15px; display: block; position: absolute; z-index: 10010;" class="botao">
      </div><a onmouseover="document.getElementById('randomElement').style.display = 'none';" href="#"></a><img src="https://i.servimg.com/u/f19/15/98/91/46/fechar10.png" border="0" alt="Fechar Anuncio!" />
   </div><a style="" target="_blank" href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw "><img style="opacity: 1;" img="" src=" https://i.servimg.com/u/f58/15/98/91/46/benner10.jpg " border="0" alt="Curta nosso Facebook" /></a>
</div>

Para alterar a posição do "X", busque por isso no código:

width:500px;height:50px;top:5px;

Aumente ou diminua o número em negrito.

[EDU2010]

Não resultou , o x é pra ficar no canto direito abaixo .. Até mais

[MateusAnjosV]

Eu ensinei o senhor a alterar... pensei que quisesse aprender algo mais sobre isto. Deixo-lhe a versão pronta:

Código:

<div id="randomElement" style="position: fixed;width: 490px;height: 510px;z-index: 50000;top: 50px;">
   <div style="width:500px;height:50px;top:100%;left:100%;display:block;position: relative;z-index:10001;" class="fechar">
      <a onmouseover="document.getElementById('randomElement').style.display = 'none';" href="#">
      </a>
      <div style="width: 18px; height: 18px; top: 10px; left: 15px; display: block; position: absolute; z-index: 10010;" class="botao">
      </div><a onmouseover="document.getElementById('randomElement').style.display = 'none';" href="#"></a><img src="https://i.servimg.com/u/f19/15/98/91/46/fechar10.png" border="0" alt="Fechar Anuncio!" />
   </div><a style="" target="_blank" href=" https://www.youtube.com/channel/UCAlgWS2ZAK9TGW1S_Mp_8Fw "><img style="opacity: 1;" img="" src=" https://i.servimg.com/u/f58/15/98/91/46/benner10.jpg " border="0" alt="Curta nosso Facebook" /></a>
</div>

[Luiz]

Questão abandonada pelo autor, mas considerada resolvida por ter solução para o problema. Tópico marcado como Resolvido e movido para Questões resolvidas.