Ir para conteúdo

POWERED BY:

Arquivado

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

RoBINHoDC

[Resolvido] Div absolut

Por , em Desenvolvimento frontend

Recommended Posts

RoBINHoDC    1

RoBINHoDC
Postado

Galera, estou tendo um problema que não estou conseguindo decifrar...

tenho uma pagina, e preciso colocar uma div só que por cima de todas as outras, pensei em fazer ela absolut mas não esta dando muito certo não....

 

alguem consegue me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

RoBINHoDC, você precisa postar o que você já fez pra galera tentar ajudar :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

bom, eu fiz varias coisas mas como não funcionou acabei excluindo e voltando para o ponto zero...

 

vou postar o codigo com o div:

 

 

HTML:

 

<body onload="MM_preloadImages('images/menu1_di.png','images/menu2_di.png','images/menu3_di.png','images/menu4_dii.png','images/menu5_di.png')">
<!-- InstanceBeginEditable name="EditRegion3" -->
<div id="apDiv2">assdsdsa</div>
<div id="body">
 <div id="head">
   <div id="head1">
     <div id="homecontato">
       <map name="Map" id="Map">
         <area shape="rect" coords="8,9,47,30" href="../index.html" />
         <area shape="rect" coords="59,9,109,32" href="../contato/index.html" />
       </map>
     <img src="images/home_contato.png" width="120" height="43" border="0" usemap="#Map2" />
     <map name="Map2" id="Map2">
       <area shape="rect" coords="7,8,44,30" href="index.html" />
       <area shape="rect" coords="58,9,110,30" href="contato/index.html" />
     </map>
     </div>
   </div>
   <div id="logo"><img src="images/logo.png" width="344" height="122" /></div>
 </div>
 <div id="nav">
   <div id="nav_menu1">
     <div id="menu1"><a href="quemsomos.html"><img src="images/menu1.png" name="quem" width="98" height="84" border="0" id="quem" onmouseover="MM_swapImage('quem','','images/menu1_di.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
     <div id="menu2"><a href="nucleo.html"><img src="images/menu2.png" name="nucleo" width="103" height="118" border="0" id="nucleo" onmouseover="MM_swapImage('nucleo','','images/menu2_di.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
   </div>
   <div id="nav_menu2">
     <div id="menu3"><a href="clientes.html"><img src="images/menu3.png" name="cliente" width="84" height="117" border="0" id="cliente" onmouseover="MM_swapImage('cliente','','images/menu3_di.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
   </div>
   <div id="nav_menu3">
     <div id="menu4"><a href="trabalhos/index.html"><img src="images/menu4.png" name="nossos" width="135" height="102" border="0" id="nossos" onmouseover="MM_swapImage('nossos','','images/menu4_dii.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
     <div id="menu5"><a href="boletim.html"><img src="images/menu5.png" name="boletim" width="170" height="92" border="0" id="boletim" onmouseover="MM_swapImage('boletim','','images/menu5_di.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
   </div>
 </div>
 <div id="content">
   <div id="txt_quem"> <img src="images/quemsomos.png" width="82" height="23" /><span class="textjustif"><br />
     A <strong>Sustentar</strong> é uma agência de comunicação estratégica prestadora de serviços para empresas preocupadas com a efetividade da comunicação com seus stakeholders e de um futuro sustentável.<br />
     Tudo isso, através de uma análise minuciosa das necessidades de seus clientes e de propostas inovadoras que vão do posicionamento da marca em peças de comunicação institucional até a implantação de um programa de rede de comunicadores ou de pesquisa de clima organizacional.<br />
     Para a <strong>Sustentar</strong>, é fundamental que as estratégias de comunicação estimulem todos os públicos de relacionamento da organização a se desenvolverem como profissionais e como cidadãos preocupados e envolvidos, por exemplo, com as questões de sustentabilidade.</span>      
     <p></p>
     <p class="footer_quem"><strong>Sustentar</strong> a comunicação corporativa<br />
       é função de cada empresa cidadã!</p>
   </div>
 </div>
 <div class="footer_txt" id="footer">
   <div id="footer_twitter">
     <ul id="twitter_update_list">
       <li>Carregando Tweets...</li>
     </ul>
   </div>
   <div id="footer_redes">
     <table width="60" border="0">
       <tr>
         <td width="29"><a href="http://www.facebook.com/profile.php?id=100001899688649"><img src="images/facebook.png" width="23" height="23" border="0" /></a></td>
         <td width="21"><a href="https://twitter.com/#!/agsustentar"><img src="images/twitter.png" width="24" height="24" border="0" /></a></td>
       </tr>
     </table>
   </div>
   <div class="footer_info" id="footer_info">Atibaia/SP<br />
     Al. Lucas Nogueira Garcêz, 2630<br />
     Sala 5 / Jd. Paulista<br />
     <a href="../images/mapa_como_chegar_sustentar.jpg" title="Como chegar na agencia sustentar" class="mapa" rel="lightbox[group]">Veja o mapa</a><br />
     <br />
   contato@agenciasustentar.com.br<br />
   11 4411-4876
   </div>
 </div>
</div>
<!-- InstanceEndEditable -->
<div id="apDiv1"></div>
</body>
<!-- InstanceEnd --></html>

 

 

 

CSS:

 

#apDiv2 {
position:absolute;
left:695px;
top:396px;
width:211px;
height:171px;
z-index:2;
visibility: visible;
right: 20px;
bottom: 40px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

        left:695px;
       top:396px;
..
       right: 20px;
       bottom: 40px;

??

 

meio absurdo você usar left top e também right bottom.

 

use apenas um direcional. Se você apertar ESQUERDA e DIREITA ao mesmo tempo no seu videogame, o personagem do jogo fica parado, pois não vai saber oq fazer.

é o mesmo com esse teu código.

 

 

ou é bottom ou é top.

ou é left ou é right.

 

use um único direcional de cada eixo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Mas oque acontece ?

 

acontece que a div não fica no lugar que determinei, ela esta sempre em um lugar, e preciso fixar ela...

 

 

 

clique aqui e veja o projeto atual

 

 

veja como deveria ficar

 

        left:695px;
       top:396px;
..
       right: 20px;
       bottom: 40px;

??

 

meio absurdo você usar left top e também right bottom.

 

use apenas um direcional. Se você apertar ESQUERDA e DIREITA ao mesmo tempo no seu videogame, o personagem do jogo fica parado, pois não vai saber oq fazer.

é o mesmo com esse teu código.

 

 

ou é bottom ou é top.

ou é left ou é right.

 

use um único direcional de cada eixo.

 

alterei e nada, o erro continua

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Olhando no link que você passou tem um clip lá? Tirei e funcionou :thumbsup:

 

Ops, z-index na div#body!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago de Oliveira Cruz    21

Thiago de Oliveira Cruz
Postado

Bom

 

Pra começar você continua usando LEFT/RIGHT e TOP/BOTTOM!

 

Use apenas LEFT ou RIGHT mesma coisa para TOP/BOTTOM

 

Veja o que eu fiz no seu código e TADÃ!!! o quadrado apareceu na posição que você queria!

 

#apDiv2 {	
background-color: #000000;	
color: #FFFFFF !important;	
display: block;	
height: 171px;	
position: absolute;   
right: 240px;	
top: 396px;	
visibility: visible;	
width: 211px;	
z-index: 2;
}

 

Veja que eu coloquei background color e display block para poder ver a div e seus tamanhos e removi o CLIP que você colocou, pois não aparecia de jeito algum no meu FireFox

 

Coloque z-index tbm na id body... caso contrario o sistema não vai partir do pre suposto que o z-index dele é 0 ou 1......

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

É ISSO QUE OS CARA FALARAM, E OQUE EU DIRIA SE SOUBESSE QUE O PROBLEMA SERIA A POSICAO DA DIV, SE você QUER MOVIMENTAR A DIV E você COLOCAR TOP E LEFT ELE VAI, MAS SE DAI você TB CLOCA BOTTOM E RIGHT, ELE NAO VAI, ENTAO DEFINA APENAS UM DIRECAO NO EIXO X E APENAS UMA DIRECAO NO EIXO Y :thumbsup:

 

ps:malz pelo caps lock

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Favor remover. Devido a problemas com o post, saiu beeeem depois de o mesmo ter se movimentado.

 

to alterando aqui e já posto o que aconteceu...

 

Galera, estamos quase lá!

 

bom, fiz como vcs me falaram e no meu navegador deu certo, no navegador do meu cliente não! :S

 

o meu cliente tem um imac, vou mostrar como ficou...

 

 

Meu navegador

 

 

navegador do meu cliente

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

Mano, absolute dá esses problems mesmo, tenta com position: relative; :thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Mano, absolute dá esses problems mesmo, tenta com position: relative; :thumbsup:

 

mas ai eu consigo deixar do jeito que eu quero, sobre as outras??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Não consigo abrir aqui na empresa por causa do proxy, mas não creio que o iMac seja o problema, pois estou num MBP e com aquelas alterações que sugeri funcionaram aqui :thumbsup:

o meu cliente tem um imac, vou mostrar como ficou...

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

Não consigo abrir aqui na empresa por causa do proxy, mas não creio que o iMac seja o problema, pois estou num MBP e com aquelas alterações que sugeri funcionaram aqui :thumbsup:

 

eu tbm estou num MBP só que no meu abre de boa, acho que é por causa da resolução tbm, pode ser??

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

primeiro, oque é MBP ? :ermm:

segundo, sim robinho, consegue deixar por cima, mas ai a questão e'que você vai ter que trabalhar com position relative e top e left até deixar na posicao que você quer, dai tu usa z-index com um valor alto para deixar ela sobrepondo.

 

Position absolute em div é complicado, das vezes que usei aqui a cada resolucao e zoom ela muda de posicao, quando usei em img nao deu esse problema, talvez seja a maneira que estou fazendo esteja errada(ou talvez nao), mas cara, usa position relative que é melhor, menos dor de cabeca :bye:

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

primeiro, oque é MBP ? :ermm:

segundo, sim robinho, consegue deixar por cima, mas ai a questão e'que você vai ter que trabalhar com position relative e top e left até deixar na posicao que você quer, dai tu usa z-index com um valor alto para deixar ela sobrepondo.

 

Position absolute em div é complicado, das vezes que usei aqui a cada resolucao e zoom ela muda de posicao, quando usei em img nao deu esse problema, talvez seja a maneira que estou fazendo esteja errada(ou talvez nao), mas cara, usa position relative que é melhor, menos dor de cabeca :bye:

 

 

MBP = MacBook Pro

FIRMEZA

vou alterar aqui e posto

 

Galera, o maior problema mesmo é que ela não para, e eu ainda não consegui colocar ela na posição que eu quero na div relative.... alguem pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

NetBoy16    72

NetBoy16
Postado

nem com relative nao deu certo ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoBINHoDC    1

RoBINHoDC
Postado

nem com relative nao deu certo ?

 

Não cara, o pior de td é que o cliente esta em cima de mim e eu não sei pq esta dando errado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

RoBINHoDC, o "pai" dessa div é o body e é em relação a ele que ocorre o posionamento, ou seja, quanto maior a tela, maior o body, entendeu?

Galera, o maior problema mesmo é que ela não para, e eu ainda não consegui colocar ela na posição que eu quero na div relative.... alguem pode me ajudar?

 

:thumbsup:

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