2014-09-02 83 views
-2

所以我爲我的實習任務做了一個網站(我的學習第一年因此缺乏經驗)。可悲的是,我遇到了這個問題,它在除Firefox以外的所有瀏覽器都能正常工作。 Firefox的問題是沒有任何工作。沒有一個菜單真的鏈接任何東西。 ****我的網站無法在firefox上工作

我想知道是否有人在這裏可以幫助我解決問題後無數小時試圖解決它自己。

所以我使用Html,CSS和一些JavaScript的網站發佈如下。

 <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="tartufi.css" media="screen"/> 
<title>xxxxxx</title> 
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 
    <script src="script.js" type="text/javascript"></script> 
<link href='http://fonts.googleapis.com/css?family=Karla:700' rel='stylesheet'  type='text/css'/> 
</head> 

<body> 
<p>&nbsp;</p> 

<div class="header"> 

    </div> 

<div class="alpha"> 
     <div class="headermenu"> 


      <div class="logo"> 

      </div> 

     <nav> 
     <ul id="navigation"> 
      <li><div class="navSection "><a id="nav1" href="">HOME</a> </div></li> 
      <li><div class="navSection "><a id="nav2" href="">PASSION</a> </div></li> 
      <li><div class="navSection "><a id="nav3" href="">CONTACT</a> </div></li> 
     </ul> 
     </nav> 
     <div class="talen"> 
      <a href="index.html"><img style="border:0;" src="nederlands.png" alt="English" /></a> 
      <a href="index_en.html"><img style="border:0;" src="english.png" alt="English" /></a> 
      <a href="index_du.html"><img style="border:0;" src="deutsch.png" alt="Deutsch" /></a> 
     </div> 
    </div> 

    <div class="content"> 

    <article class="content"> 

    <section id="s1"> 
     <div id="services" class="f"> 
     </div> 
    </section> 

    <section id="s2"> 
     <div id="services2" class="b"> 

     <div class="tekstcontent"> 


     </div> 

      <div class="imagecontent"> 
      </div> 

     </div> 
    </section> 


    <section id="s3"> 
     <div id="services3" class="c"> 

     <div class="contact"> 
     person lastname <br/> 
     street<br/> 
     postal code<br/><br/> 

     <img src="streep.png" alt="" /><br/><br/> 
     <img src="tel.png" alt=""/> 
     phone <br/><br/> 
     <img src="fax.png" alt="" > 
     fax<br/><br/> 
     <img src="email.png" alt="" align="center"> 
     <a href="mailto:[email protected]" class="contactlink">[email protected]</a> 
     </div> 

      <div class="imagecontent"> 
      </div> 


     </div> 
    </section> 
    </article> 
    </div> 

    <div class="footer"> 
    Copyright © 2014. 
<a href="http://www.xxxxx.xxxx/" target="_blank" style="color:grey;">xxxx xxxx xxxxxx</a> 
</div> 
</div> 



</body> 
</html> 

我的CSS

body { 

    background-color: black; 
    background-image:url("background.jpeg"); 
    background-size: 1300px 768px; 
    background-repeat:no-repeat; 
    background-position: top; 


} 

.alpha { 

    width: 1300px; 
    height: 768px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -55px; 
    position:relative; 

    } 

.header { 

    width: 100.9% ; 
    margin-left: -5px; 

    height: 100px; 
    margin-top: -55px; 
    background-color:white; 
    opacity: 0.4; 
    float: left; 
    } 

.headermenu { 

    width: 1300px; 
    height: 120px; 

    margin-left:auto; 
    margin-right:auto; 
    position: absolute; 



    } 

.logo { 

    width:263px; 
    height:350px; 
    position:relative; 
    background-image:url("LOGO.png"); 
    background-size:100%; 
    color:green; 
    float:left; 
    background-repeat:no-repeat; 
    } 

.imagecontent { 

    width:1300px; 
    height:648px; 
    position:relative; 
    background-image:url("bgcontent.png"); 
    margin-left: 600px; 
    background-repeat:no-repeat; 

    } 


.tekstcontent { 

    width:435px; 
    height:120px; 
    position:relative; 
    background-color:#D6D6D6; 
    float:left; 
    margin-left: 263px; 
    margin-top: 120px; 
    font-family:Arial, Helvetica, sans-serif; 
    color:black; 
    padding-top: 25px; 
    padding-bottom: 25px; 
    padding-right: 50px; 
    padding-left: 20px; 

    } 

.contact { 

    width:400px; 
    height:400px; 
    font-family:Candara; 
    position:relative; 
    float:left; 
    margin-left: 320px; 
    margin-top: 70px; 
    z-index:2; 
    padding: 10px ; 
    font-size: 30px ; 
    text-align: middle; 
    } 




.content { 

    width:1300px; 
    height:648px; 
    overflow: hidden; 

    } 

.f  { 

    Width:1300px; 
    height:648px; 

    opacity:0; 
    } 

.b { 

    Width:1300px; 
    height: 648px; 
    background-color: white; 

    } 

.c  { 

    Width:1300px; 
    height: 648px; 
    background-color: white; 
    } 

.talen { 
    height:120px; 
    width:300px; 
    padding-left: 70px; 

    float:left; 
    } 

.footer { 
    width:1300px; 
    height:23px; 
    background-color:#000000; 
    color:grey; 
    text-align:center; 
    } 



/*nav*/ 



ul#navigation { 
     list-style:none; 
     position:relative; 
     top:-15px; 
     } 
    ul#navigation li { 
     float:left; 
     margin-left:20px; 
     margin-right:-20px; 
     } 
    ul#navigation li a { 


     display:block; 
     padding:30.5px 30px; 
     text-decoration:none; 
     color:black; 
     font-size: 33px; 
     margin-left:10px; 
    font-family: 'Karla', sans-serif; 
     font 
     } 

    ul#navigation li a:hover{ 
     background-color: #c62126; 

     } 


/* page styles */ 

a { 
    color: red; 
} 

和我的js

// kadaj Oct 2012 

$(document).ready(function() { 
    $('.navSection').on('click', function (e) { 
     debugger; 
     var elemId = ""; //eg: #nav2 
     switch (e.target.id) { 
     case "nav1": 
      elemId = "#s1"; 
      break; 
     case "nav2": 
      elemId = "#s2"; 
      break; 
     case "nav3": 
      elemId = "#s3"; 
      break; 
     case "nav4": 
      elemId = "#s4"; 
      break; 
     } 
     $('.content').animate({ 
      scrollTop: $(elemId).parent().scrollTop() + $(elemId).offset().top - $(elemId).parent().offset().top 
     }, { 
      duration: 1000, 
      specialEasing: { 
       width: 'linear', 
       height: 'easeOutBounce' 
      }, 
      complete: function (e) { 
       //console.log("animation completed"); 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

任何幫助極爲賞識

+0

它在控制檯中顯示什麼? – 2014-09-02 08:55:46

+3

這是一個非常含糊的問題,請在發佈之前儘量縮小問題範圍,我們不是自由職業者,他們希望投入7個小時爲您解決問題。小提琴也可以幫助很多。 – JohannesB 2014-09-02 08:56:01

+1

x站點腳本。我和FF有同樣的問題。您通過CDN導入jQuery(src =「http://code.jquery.com/jquery.min.js」),出於某種原因FF不喜歡它(也許它可以在FF設置中更改,不要知道)。如果您將jQuery下載到您託管該頁面的本地機器/服務器,並以此方式將其包含在您的頁面中,它應該可以工作。 – 2014-09-02 08:58:57

回答

0

<div class="header"></div>與導航您的DIV的前面,因此,你可以不要點擊導航div內的任何內容。
添加在CSS的.headermenu:

.headermenu{ 
    //what you had before 
    z-index: 999; 
} 

Z-index較高會帶來什麼元素與它(或在與z-index的元素)中的任何其他與較低的z-index前(我想默認值是1)。

+0

這解決了我的問題!非常感謝!並感謝你的完美。我將銘記未來! – dinges 2014-09-02 09:45:18

+0

我很高興我可以幫助:) – 2014-09-02 09:46:19

0

根據當前代碼,將下面的代碼放在CSS文件的末尾。它將在Firefox中工作。使用Fiddler進行測試。

#navigation 
{ 
    z-index: 1000; 
} 
+0

這解決了我的問題!非常感謝! – dinges 2014-09-02 09:44:27

相關問題