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

Wrapper 覆盖了其他东西，所以你只想把它推到底部。添加z-index: 0;到#wrapper.

或者你可以z-index: -1从里面的 div中删除#wrapper

以后，只在帖子中发布相关代码。没有人会费心通过您的网站为您找出问题所在。如果您不能将问题缩小到特定的问题，那么您需要更好地排除故障。

于 2012-07-29T17:21:56.587 回答
0

虽然 sachleen 的回答确实为您迫在眉睫的问题提供了解决方法，但您的页面正面临几个很快就会成为问题的关键问题。

给我代码！

这是指向您的页面的链接，该链接完全正常工作且没有任何验证问题。图像未优化，但我不得不调整其中一个以防止一直使用 z-index：

将文件与您自己的文件进行比较，看看为改进文件和使文件有效所做的工作。

以下是最重要问题的列表：

  1. 元素 ID

    元素可以有一个 ID，但 ID 在页面上必须是唯一的，这是因为 ID 的目的是标识特定元素。如果您需要为多个元素提供样式，正确的方法是使用类。

    来自MDN :: id

    唯一标识符，以便您可以识别元素。您可以将其用作 getElementById() 和其他 DOM 函数的参数，并在样式表中引用该元素。

  2. 图片

    虽然这与性能更相关，但我相信该网页的访问者不会因为您当前使用的 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 回答