Imagem Sobrepondo menu

[uiLhian 1]

bom dia,

o problema é o seguinte quando clico no menu CONTATO abre uma popup em jquery contendo os dados, só que o que ta acontecendo a imagem do TOPO ta sobrepondo o menu e o menu tbm ta ultrapassando o layout da pagina pra direita. bom o site é esse http://www.contrutorawvaraujo.com

 

desde ja muito obrigado!

[Marcos Xavier 189]

Não seria melhor você colocar a .popbox separada do menu e ocultá-la e quando

você clicar sobre contato ela fosse exibida.

 

Fiz um exemplo simples usando jquery.

 

 

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
		$('.open').click(function(){
                 $(".popbox").fadeIn("fast");             

        });

        $('.fecha').click(function(){
           $(".popbox").fadeOut("fast");
        });

  });  

</script>
<!--Seu menu!-->
<li>principal</li>
<li>portfólio</li>
<li><a class='open' href='#'>contato</a></li>

<style>
.popbox{display:none;
margin:10px;//aqui você define onde o pop box sera exibido
}	
</style>

<div class='popbox'> 

<a class='fecha' href='#'>fechar</a>
<div class='box'>
<div class='arrow'> </div> 
<div class='arrow-border'>  </div>
        <h3>onde estamos</h3> 
        <div class="contato">
           <p>teste</p>
              <dl> 
               <dt><img src="imagens/fone.png" alt="Telefones" title="Telefones" /></dt>
               <dd>(19) 3873-7152</dd> </dl>
               <dl> <dt><img src="imagens/mail.png" alt="Email" title="Email" /></dt>
               <dd><a href="mailto:teste">teste</a></dd> 
             </dl> 
        </div>
</div>
</div>

[uiLhian 1]

não entendi, como assim separada a .popbox ?

quanto ao seu exemplo eu teste elee funcionou, mas ele não fecha quando clico no menu novamente ou fora dele, tem que usar o botão fechar... e tipo ele ta ficando "embaixo" da imagem do topo tbm

[Marcos Xavier 189]

Tenta usar z-index na .popbox

Da uma pesquisada sobre.

http://br.search.yahoo.com/search?p=z-index+tutorial&ei=UTF-8&fr=moz35

[KhaosDoctor 242]

Seta o z-index do menu no CSS para 99999

[uiLhian 1]

coloquei varios valores e em varios lugares e mesmo assim abre abaixo da imagem do topo.

 

.popbox {
  margin:0px auto;
  position:relative;
    z-index: 99999;
}

.collapse { 
position:relative; 
 z-index: 99999;
}

.box {
display:block;
display:none;
background:#FFF;
border:solid 1px #BBBBBB;
border-radius:5px;
box-shadow:0px 0px 15px #999;
position:absolute;
padding: 15px;
 z-index: 99999;
}

.box a.close {
color:red;
font-size:12px;
font-family:arial;
text-decoration:underline;
}

.arrow {
      width: 0;
      height: 0;
      border-left: 11px solid transparent;
      border-right: 11px solid transparent;
      border-bottom: 11px solid #FFF;
      position:absolute;
      left:1px;
      top:-10px;
      z-index:1001;
      }

      .arrow-border {
      width: 0;
      height: 0;
      border-left: 11px solid transparent;
      border-right: 11px solid transparent;
      border-bottom: 11px solid #BBBBBB;
      position:absolute;
      top:-12px;
      z-index:1000;
      }

javascript:

 

 

(function( $ ){


  $.fn.popbox = function(options){
    var settings = $.extend({
      selector      : this.selector,
      open          : '.open',
      box           : '.box',
 arrow         : '.arrow',
      arrow_border  : '.arrow-border',
      close         : '.close'
    }, options);


    var methods = {
      open: function(event){
        event.preventDefault();


        var pop = $(this);
        var box = $(this).parent().find(settings['box']);


        box.find(settings['arrow']).css({'left': box.width()/2 - 10});
        box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});


        if(box.css('display') == 'block'){
          methods.close();
        } else {
          box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
        }
      },


      close: function(){
        $(settings['box']).fadeOut("fast");
      }
    };


    $(document).bind('keyup', function(event){
      if(event.keyCode == 27){
        methods.close();
      }
    });


    $(document).bind('click', function(event){
      if(!$(event.target).closest(settings['selector']).length){
        methods.close();
      }
    });


    return this.each(function(){
      $(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
      $(settings['open'], this).bind('click', methods.open);
      $(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
    });
  }


})(jQuery);

css da pagina:

http://construtorawvaraujo.com/css/cwvaraujo.css

[André do Vale 76]

É só tirar o overflow ali do topo:

#CORPO, #TOPO, #TOPO h1 a {
overflow: hidden;
}

[uiLhian 1]

valeu!

 

aproveitando o tópico eu to tentando trazer o popup pra "dentro" do conteudo (site) pra esquerda, ali onde ta escrito VALOR mas se eu altero ali para de funcionar...

tbm não sei se é ali que altera...

 

if(box.css('display') == 'block'){           methods.close();         } else {           box.css({'display': 'block', 'top': 10, 'left': VALOR ((pop.parent().width()/2) -box.width()/2 )});         }

e uma outra coisa tbm é que o MENU ta "BAGUNÇADO" eu testo ele aqui localmente ta perfeito um do lado do outro

PRINCIPAL PORTIFOLIO CONTATO só que ele "online" o contato ta embaixo...

[uiLhian 1]

opa...

tentei editar o comentario acima mas num da mais... ;(

eu só queria aproveitar o tópico, pois o menu ta "BAGUNÇADO" eu testo ele aqui local ta perfeito um do lado do outro

PRINCIPAL PORTIFOLIO CONTATO só que ele "online" o contato ta embaixo... fora do padrão...

 

desde ja agradeço!