2011-12-10 8 views
3

이 웹 사이트 본문의 어느 부분도 클릭 할 수 없습니다. 나는 이유를 알 수 없다.상대 위치 지정된 div는 클릭 할 수 없음

이 웹 사이트의 목적은 lucasfilm.com과 같았습니다. 헤더가 본문 내용과 겹쳐져 로고가 튀어 나오는 것처럼 보입니다.

나는 아무것도 더 이상 클릭 할 수없는 이유와 이유를 알 수 없습니다. 전체 페이지를 포함했습니다. 나는 이것을 알기에 코드가 어떻게 엉성한 지 계속해서 생각할 필요가 없다. 이 페이지를 끝내고 싶습니다.

웹 사이트가 www.aspdfilms.com

헤더, 본문 및 바닥 글 div의 모든 위치에 있습니다 : 상대; Z- 인덱스가있는 #body에 -10 -하지만 당신은으로 문제를 해결할 수 있습니다 : Z- 인덱스에 의한 것으로 보인다 -

<div id="page"> 
    <div id="header"> 
     <div class="nav" id="navleft"> 
      <a id="services" href="aboutASPD.html"> 
       The Company 
      </a> 
      &#160;|&#160; 
      <a id="services" href="services.html"> 
       Services 
      </a> 
     </div> 
     <a id="logodiv" href="index.html"></a> 
     <div class="nav" id="navright"> 
      <a id="about" href="ourwork.html"> 
       Our Work 
      </a> 
      &#160;|&#160; 
      <a id="about" href="contactus.html"> 
       Contact 
      </a> 
     </div> 
    </div> 
    <div id="body"> 
     <div id="container"> 
      <div id="whitebody"> 
       <h2>Contact Us</h2> 

       <p>To speak with an associate or schedule a free consultation please contact ASPD Films:</p> 

       <div id="contactdiv"> 
        <div id="contactinfo"> 
         <a href="mailto:[email protected]">[email protected]</a><br /> 
         NY Contact: 347-871-3456<br /> 
         LA Contact: 310-678-7878 
        </div> 

        <a href="docs/ASPD_vCard.vcf" style="float:right;"> 
         Download vCard<br /> 
         <img src="img/vcard.jpg" alt="Download vCard" /> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <span id="copyright"> 
      TM & &#169; ASPD FILMS 2011. ALL RIGHTS RESERVED. <a id="dropmain" href="http://www.dropmain.org">BROUGHT TO YOU BY DOPMAIN.ORG</a> 
     </span> 
    </div> 
</div><div id="page"> 
    <div id="header"> 
     <div class="nav" id="navleft"> 
      <a id="services" href="aboutASPD.html"> 
       The Company 
      </a> 
      &#160;|&#160; 
      <a id="services" href="services.html"> 
       Services 
      </a> 
     </div> 
     <a id="logodiv" href="index.html"></a> 
     <div class="nav" id="navright"> 
      <a id="about" href="ourwork.html"> 
       Our Work 
      </a> 
      &#160;|&#160; 
      <a id="about" href="contactus.html"> 
       Contact 
      </a> 
     </div> 
    </div> 
    <div id="body"> 
     <div id="container"> 
      <div id="whitebody"> 
       <h2>Contact Us</h2> 

       <p>To speak with an associate or schedule a free consultation please contact ASPD Films:</p> 

       <div id="contactdiv"> 
        <div id="contactinfo"> 
         <a href="mailto:[email protected]">[email protected]</a><br /> 
         NY Contact: 347-871-3456<br /> 
         LA Contact: 310-678-7878 
        </div> 

        <a href="docs/ASPD_vCard.vcf" style="float:right;"> 
         Download vCard<br /> 
         <img src="img/vcard.jpg" alt="Download vCard" /> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="footer"> 
     <span id="copyright"> 
      TM & &#169; ASPD FILMS 2011. ALL RIGHTS RESERVED. <a id="dropmain" href="http://www.dropmain.org">BROUGHT TO YOU BY DOPMAIN.ORG</a> 
     </span> 
    </div> 
</div> 


    body 
{ 
    background-color:#000000; 
    color:#ffffff; 
    text-align:center; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    font-weight:100; 
} 
a 
{ 
    text-decoration:none; 
} 
img 
{ 
    border:none; 
    -o-border-radius: 0px 0px 15px 15px; 
    -moz-border-radius: 0px 0px 15px 15px; 
    -webkit-border-radius: 0px 0px 15px 15px; 
    border-radius: 0px 0px 15px 15px; 
    -khtml-border-radius: 0px 0px 15px 15px; 
} 
h2 
{ 
    margin-left:30px; 
    margin-top:30px; 
} 
#page 
{ 
    margin:0px auto; 
    width:1400px; 
} 
#header 
{ 
    width:1400px; height:87px; 
    margin-top:20px; 
    background-color:#ffffff; 
    background:url('img/header.png'); 
    z-index:10; 
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; 
} 
.nav  
{ 
    height:32px; 
    font-size:14px; 
    background-color:transparent; 
    margin-top:35px; 
    z-index:300; 
    letter-spacing:4px; 
} 
.nav a 
{ 
    color:#123456; 
} 
.nav a:hover 
{ 
    color:#000000; 
    text-shadow: 0 0 0.2 #000, 0 0 0.2em #000, 0 0 0.2em #000, 0 0 0.2em #000; 
} 
#navleft 
{ 
    width:540px; 
    text-align:right; 
    float:left; 
} 
#logodiv 
{ 
    width:200px; height:80px; 
    margin-left:65px; 
    background-color:transparent; 
    cursor:pointer; 
    float:left; 
} 
#navright 
{ 
    width:480px; 
    text-align:left; 
    float:right; 
} 
#body 
{ 
    width:1400px; height:600px; 
    background-color:#736F6E; 
    top:-28px; 
    overflow:hidden; 
    text-align:left; 
    z-index:-10; 
    position:relative; 

    -o-border-radius: 0px 0px 15px 15px; 
    -moz-border-radius: 0px 0px 15px 15px; 
    -webkit-border-radius: 0px 0px 15px 15px; 
    border-radius: 0px 0px 15px 15px; 
    -khtml-border-radius: 0px 0px 15px 15px; 
} 
#container 
{ 
    width:980px; height:600px; 
    margin:8px auto; 
    background-color:transparent; 
    color:#000000; 
} 
#whitebody 
{ 
    width:980px; height:585px; 
    float:left; 
    background:#ffffff; 
} 
#whitebody p 
{ 
    margin:20px; 
} 
#contactdiv 
{ 
    width:500px; 
    margin:0 auto; 
} 
#contactinfo 
{ 
    width:250px; 
    float:left; 
} 
#footer 
{ 
    width:1400px; height:25px; 
    background-color:#000000; 
    text-align:center; 
    top:-28px; 
    position:relative; 
} 
#copyright 
{ 
    color:#777f76; 
    font-size:10px; 
} 
#dropmain 
{ 
    color:#777f76; 
} 
#dropmain:hover 
{ 
    color:#FFA500; 
} 
+0

링크를 클릭 할 수 없습니까? 나를 위해 잘 작동합니다 (사파리). – sooper

+1

마우스를 확인 하시겠습니까? 귀하의 코드에 오류가 있지만 사이트가 잘 작동합니다. 예를 들어 같은 ID를 가진 두 개의 요소를 가질 수 없습니다. – Nix

답변

3

내가 여기서 무슨 일이 일어나고 있는지 확실하지 않다 : HTML과 CSS는

  • 위치를 제거 : 상대가

을는 #header에 (는 #header에 Z- 인덱스있다,하지만 당신은 상대 위치를 추가하지 않는 한 그 아무것도하지 않습니다)

를 : #body
  • 에서 상대 위치를 추가

    추가적으로 문제를 더 자세히 조사하는 링크를 발견했습니다. http://www.jonasknutsen.com/2011/10/09/negative-z-index-kills-links/

  • +0

    +1 - FF의 음수 Z- 인덱스는 ''뒤에있는 요소를 이동하므로 취소 할 수 없습니다. –

    관련 문제