0

レイヤー化で多くの問題が発生しています。現在の問題は、訪問者が何らかの理由で div レイヤー内のリンクをクリックできないことです。リンクされているサイドバーの画像をクリックして、テキストを強調表示することはできません。何が悪いのかわかりません。どんな助けでも大歓迎です。

サイト：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arakion - Homepage</title>
<html>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <link href="js/video-js/video-js.css" rel="stylesheet" type="text/css">
  <script src="js/video-js/video.js"></script>
  <script>
    _V_.options.flash.swf = "video-js.swf";
  </script>
<style type = "text/css">
body {background-color:#FFFFFF; background-size:contain;} 
</style>
<script type="text/javascript">

function chgbg() {
var d = new Date();
var h = d.getHours();

if ((h >= 6) && (h < 9)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 9) && (h < 20)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 20) && (h < 22)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}
if ((h >= 22) || (h<6)) {document.body.style.backgroundColor = "#FFFFFF"; document.body.style.backgroundImage="url(images/Backgrounds/Night.png)"}

}
</script> 
</head>
<body onload="chgbg()">
<div id="Wrapper">
  <div id="navbar" style="display: inline-block;">
<ul id="nav">
    <li id="top">
        <a href="home:index.html">HOME</a>
    </li>

    <li id="top">
        <a href="#">GUIDE</a>
        <ul>
        <li id="submenu"><a href="Htdocs/classes.php">CLASSES</a></li>
        <li id="submenu"><a href="Htdocs/dungeons.php">DUNGEONS</a></li>
        <li id="submenu"><a href="Htdocs/monsters.php">MONSTERS</a></li>
        <li id="submenu"><a href="Htdocs/pets.php">PETS</a></li>
        <li id="submenu"><a href="Htdocs/races.php">RACES</a></li>
        <li id="submenu"><a href="Htdocs/town buildings.php">TOWN BUILDINGS</a></li>
        <li id="submenu"><a href="Htdocs/universe.php">UNIVERSE</a></li>
        <li id="submenu"><a href="Htdocs/wiki.php">WIKI</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">BLOG</a>

        <ul>
        <li id="submenu"><a href="Htdocs/arakion.php">ARAKION</a></li>
        <li id="submenu"><a href="Htdocs/chris taylor.php">CHRIS TAYLOR</a></li>
        </ul>

    </li>
    <li id="top">
        <a href="#">MEDIA</a>
        <ul>
        <li id="submenu"><a href="Htdocs/art.php">CONCEPT ART</a></li>
        <li id="submenu"><a href="Htdocs/screenshots.php">SCREENSHOTS</a></li>
        <li id="submenu"><a href="Htdocs/videos.php">VIDEOS</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="Php/forum/index.php">FORUM</a></li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><div id="Kickstarter_progressbar"></div></div>
<div style="display: inline-block;" id="sidebar_banner"><div id="Kickstarter_donationcount"><a>$20,000</a></div>
  <div id="Sidebar_content">
    <p>&nbsp;</p>
    <p class="title">Social Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10"  class="title" /></p>
    <p><a href="http://www.indiedb.com/games/arakion" target="_new"><img src="images/IndieDBIcon.png" width="35" height="35" /></a> 
        <a href="http://www.facebook.com/Arakion" target="_new"><img src="images/FacebookIcon.png" width="35" height="35" /></a> <a href="http://twitter.com/arakiongame" target="_new"> 
            <img src="images/TwitterICon.png" width="35" height="35" /> </a> <a href="http://www.youtube.com/user/MrLavidimus" target="_new"> <img src="images/YoutubeICon.png" width="35" height="35" /> </a> </p>
    <p>&nbsp;</p>
    <p>Random Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Something</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p>&nbsp;</p>
  </div></div>
<div style="display: inline-block;" id="main_background">
  <div id="main_content"><div id="main_img"><img src="images/MainImages/Main_Placeholder_img.jpg"/></div>
    <table width="600" height="106" border="0" id="main_section_img" style="margin:0 auto; vertical-align:top; margin-top: 0;">
      <tr>
        <td width="140"><img src="images/MainImages/Placeholder1.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder2.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder3.jpg"  height="100%" width="100%"/></td>
        <td width="140"><img src="images/MainImages/Placeholder4.jpg"  height="100%" width="100%"/></td>
      </tr>
      <tr>
        <td width="140">How Housing Works and why we have it    <p>&nbsp;</p></td>
        <td width="140">An In depth look at the Satyr race  <p>&nbsp;</p></td>
        <td width="140">We take a look at the role the alchemist plays in a group   <p>&nbsp;</p></td>
        <td width="140">Our doors are offically open to new employees apply today   <p>&nbsp;</p></td>
      </tr>
    </table>
    <p>&nbsp;</p>
  </div></div>

<div style="display: inline-block;" id="sub_background_1"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>

<div style="display: inline-block;" id="sub_background_2"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>

 <div style="display: inline-block;" id="sub_background_3"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"  style="z-index:9;"> 
    <video id="" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="js/video-js/Posters/Test.png"
      data-setup="{}">
    <source src="js/video-js/Videos/Test.mp4" type='video/mp4' />
    <track kind="captions" src="captions.vtt" srclang="en" label="English" />
  </video>
   <a href="index.html">Read More.</a></div></div></div>

 <div style="display: inline-block;" id="sub_background_4"><div id="sub_content">
  <div id="Sub_title">Kickstarter has just opened!</div>
  <div id="Sub_subtitle">by Chris Taylor 7-24-2012</div>
  <div id="Sub_image" style="display: inline-block;">
    <img src="images/MainImages/Sub_Placeholder.jpg"  height="100%" width="100%"/></div>
  <div id="Sub_text"> sUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumLorem ipsum dolor sit amet, consectetur 
    adipisicing elit, sed do eiusmod tempor incididunt  ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
    proident, <a href="index.html">Read More.</a></div></div></div>

<div id="footer_background" style=" text-align: center; ">
    <img src="images/Footer_Divider.png" height="10px" width="600px"/>
    <p>&nbsp;</p>
COPYRIGHT 2012 CHRIS TAYLOR ALL RIGHTS RESERVED | CODED BY SEAN HALL</a></div>
        <div id="left"><img src="images/Backgrounds/Left.png" width="320" height="802" /></div>
        <div id="right"><img src="images/Backgrounds/Right.png" width="333" height="833" /></div>
</div>

CSS コード:

@font-face {
    font-family: 'KingthingsExeterRegular';
    src: url('font/kingthings_exeter-webfont.eot');
    src: url('font/kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/kingthings_exeter-webfont.woff') format('woff'),
         url('font/kingthings_exeter-webfont.ttf') format('truetype'),
         url('font/kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'KingthingsExeterRegular';
    overflow-y: auto;
}
body,td,th {
    font-family: KingthingsExeterRegular;
    background-size: cover;
    background-repeat:no-repeat;
    text-align: center;
    font-size: 15px;
    zoom: 110%
}
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    color: #FFF;
}
a:active {
    text-decoration: none;
}
/*Body Css */
#header{
  z-index: -999;
  width:900px ;
  height:800px ;
  position: relative;
  top:0;
  left:0;
}
#left{
  z-index:-9;
  width:239px;
  height:600px ;
  float: left;
  clear: both;
  position: absolute;
  left:-215px;
  top:150px;
}
#right{
  z-index:-2;
  width:239px;
  height:600px ;
  float:right;
  clear: both;
  position: absolute;
  left:960px;
  top:120px;
}
#Wrapper {
    width:1040px;
    margin:auto;
    margin-top:-40px;
    height:2000px;
    position: relative; 
    z-index:0;
}
/*------------------------------------*\
    NAV
\*------------------------------------*/
#navbar{
    position: relative;
    top:91px;
    float:left;
    margin-top:50px;
    margin-left:5px;
    width:649px;
    height: 50px;
    z-index:4;
    margin-bottom:10px;
    clear:both;
}
#nav{
    list-style:none;
    font-weight:bold;
    width:600;
    height:50;
    margin-bottom:5px;
}
#top{
    float:left;
    position:relative;
    background-image:url("images/Button_NavBar_Unselected.png");
    height:55px;
    width:119px;
    font-size:15px;
}
#top:hover{
    background-image:url("images/Button_NavBar_Hover.png")
}
#submenu{
    float:left;
    position:relative;
    height:18px;
    width:110px;
    font-size: 12px;
    text-align:center;
}
#submenu_bottem{
    float:left;
    position:relative;
    height:18px;
    width:110px;
    font-size: 12px;
    text-align:center;
}
#nav a{
    display:block;
    padding-top:20px;
    z-index:-1;
    font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px;
    text-align:center;
    width:100px;
    height:18px; 
}
#nav ul li{
    padding-top:1px; 
    float:none;
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{ 
    left:-30px;
    top:40px;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */

}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */

}
/* Main Block */
#main_background{
    width:680px;
    height:519px;
    float:left;
    background-image:url(images/MainSection.png);
}
#main_content{
    width:590px;
    height:430px;
    text-align:left;
    margin-top:20px;
    margin-left:45px;
}
#main_img{
    margin:0 auto;
    margin-top:5px;
    background-image:url(images/MainSection_BigImageHighlight.png);
    width:520px;
    height:300px;
    text-align:center;
    padding-top:4px;
}
#main_section_img{
    margin-top:10px;
    background-image:url(mages/MainSection_SmallImageInsett.png);
    width:560px;
    height:95px;
    text-align:center;
    vertical-align:top; 
    margin-top:0; 
}
#main_section_img td{
    vertical-align:top; 
    margin-top:0; 
}
/* Sub Block */
/*  Sub Background Hierarchy */
#sub_background_1{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-1;
    margin-left:30px;
    top:-38px;
    background-repeat:no-repeat;
}
#sub_background_2{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-2;
    margin-left:30px;
    top:-52px;
    background-repeat:no-repeat;
}
#sub_background_3{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-3;
    margin-left:30px;
    top:-65px;
    background-repeat:no-repeat;
}
#sub_background_4{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-4;
    margin-left:30px;
    top:-77px;
    background-repeat:no-repeat;
}
#sub_background_5{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-5;
    margin-left:30px;
    top:-83px;
    background-repeat:no-repeat;
}
#sub_background_6{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-6;
    margin-left:30px;
    top:-81px;
    background-repeat:no-repeat;
}
#sub_background_7{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-7;
    margin-left:30px;
    top:-81px;
    background-repeat:no-repeat;
}
#sub_background_8{
    position:relative;
    width:610px;
    height:270px;
    float:left;
    background-image: url(images/SubSection_Base.png);
    z-index:-8;
    margin-left:30px;
    top:-85px;
    background-repeat:no-repeat;
}
/* Hierarchy End */
#sub_content{
    width:580px;
    height:220px;
    margin:0 auto;
    margin-top:10px;
    clear: both;
}
#Sub_title{
    height:35px;
    width:400px;
    margin-top:30px;
    margin-left:10px;
    font-size:30px;
    text-align: left;
}
#Sub_subtitle{
    height:20px;
    width:200px;
    margin-left:10px;
    margin-top:65;
    font-size:15px;
    text-align: left;
}
#Sub_image{
    height:100px;
    width:100px;
    margin-top:10px;
    margin-left:15px;
    float:left;
}
#Sub_text{
    height:180px;
    width:400px;
    float:right;
    margin-top:5px;
    text-align: left;
    z-index:9;
    position: relative;
}
/* SideBar Block */
#sidebar_header{
    position:relative;
    height:80px;
    width:350px;
    float:right;
    background-image:url(images/Kickstarter.png);
    margin-right:5px;
    left:-20px;
    margin-top:10px;
    z-index:1;
    clear: both;
    top:1px;
}
#sidebar_banner{
    position:relative;
    height:729px;
    width:360px;
    float:right;
    background-image: url(images/Side%20Banner.png);
    left:-20px;
    z-index:-1;
    clear: both;
}
#Sidebar_content{
    margin:0 auto;
    margin-top:20px;
    text-align:center;
    font-size: 20px;
    width:300px;
    height:700px;
    line-height: 3px;
}
#Kickstarter_donationcount{
    width: 119px;
    height: 26px;
    text-align:center;
    top:8px;
    left:230px;
    background-image:url("images/Progress/GoalNumber.png");
    position: absolute;
    padding-top:6px;
}
#Kickstarter_progressbar{
    position:relative;
    top:62px;
    margin:0 auto;
    width: 310px;
    height: 18px;
    background-image:url("images/Progress/KickstarterGoalBar_100.png")
}
#Kickstarter_donationcount a {
        color: #000;
        font:"arial";
        font-size: 18px;
}
#Sidebar_content .title{
    line-break: 1px;
}
/* Footer */
#footer_background{
    position:relative;
    background-image:url(images/Footer.png);
    width:605px;
    height:75px;
    float:left;
    margin-left:35px;
    top:-89px;
    z-index:-9;
    line-height:1px;
    font-family:"Arial";
    font-size:12px;
}
#footer_background a:link{
    color: #000;
    text-decoration: underline;
}
#footer_background img {
    margin-top:100px;
}
4

2 に答える 2

2

ラッパーは他のものを覆っているので、一番下に押し込みたいだけです。に追加z-index: 0;し#wrapperます。

z-index: -1または、内部の div からを削除できます#wrapper

今後は、投稿内に関連するコードのみを投稿してください。誰もあなたのサイトを調べて問題を解決することはありません. 問題を特定のものに絞り込めない場合は、より適切なトラブルシューティングを行う必要があります。

于 2012-07-29T17:21:56.587 に答える
0

sachleen の回答は差し迫った問題の回避策を提供しましたが、ページはすぐに問題になるいくつかの重大な問題に直面しています。

コードを教えて！

これは、完全に機能し、検証の問題がないページへのリンクです。画像は最適化されていませんが、常に z-index が使用されないように、そのうちの 1 つを調整する必要がありました。

ファイルを自分のファイルと比較し、ドキュメントを改善して有効にするために何が行われたかを確認してください。

最も重要な問題のリストは次のとおりです。

  1. 要素 ID

    要素は ID を持つことができますが、ID の目的は特定の要素を識別することであるため、ID はページ上で一意である必要があります。複数の要素にスタイルを提供する必要がある場合、適切な方法はクラスを使用することです。

    MDNから:: id

    要素を識別するための一意の識別子。これを getElementById() やその他の DOM 関数のパラメータとして使用したり、スタイル シートで要素を参照したりできます。

  2. 画像

    これはパフォーマンスに関連していますが、この Web ページの訪問者は、現在使用している 4Mb の画像がダウンロードされるまで、かなりの時間待たなければならないことを喜ばないでしょう。

    ウェブページのエラーを分析するツールを提供するGoogle Pagespeed Toolsを使用できます。また、画像が最適化されていない場合は、分析レポートにリンクが表示され、最適化されたバージョンをダウンロードできます。

  3. ドキュメント スタック

    これが、質問を投稿した理由です。画像の使用または適切なマークアップで解決すべき問題を克服するために、ドキュメント スタックをいじっています。ドキュメント スタック内で要素を上下に自由に移動できますが、ブラウザー間の互換性に関しては、ページが問題に直面することになります。

    ドキュメント スタックは、細かい部分を克服したり、ページの更新を強制せずにユーザーと対話する方法を提供したりするために使用する必要があります。レイアウトの問題を解決する方法として存在する要素の大部分には使用しないでください。

  4. ドキュメントタイプ

    ドキュメント タイプは、ドキュメントをどのように解釈する必要があるか、およびドキュメントを意図したとおりに表示するために尊重する必要がある規則をブラウザに伝えるために使用されます。

    オーサリング ドキュメントが HTML または XHTML の場合、Doctype 宣言を追加することが重要です。doctype 宣言は、目的の効果を得るために (スペルとケースの両方で) 正確である必要があり、これが困難な場合があります。

    これについては、 W3c - Doctype Declarationsで読むことができます。

  5. HTML マークアップ

    あなたのページには適切なマークアップがありません。そのため、ブラウザは本来あるべき方法で要素を表示できません。

    これについては、 W3C - HTML: The Markup Languageで読むことができます。

    さらに、W3C 検証サービスを使用して、HTML マークアップの問題を検証および特定できます。最近の機能は、主に CSS で適切に検証されていないことに注意してください。しかし、それはほんの一部です。

于 2012-07-29T22:54:28.173 に答える