Question

我遇到了相对<div>分层的几个问题。现在的一个问题是，当你放大时，它会混淆一切，而我想做的事情就是在包装层下面有两个相关的层。但每当我尝试这样做时，即使使用z-index，它也会让一切都变得混乱。所以这两个问题都有解决方法，索引代码：

<!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="font/stylesheet.css" rel="stylesheet" type="text/css" />
<head>
<style type = "text/css">
body,td,th {
    font-family: KingthingsExeterRegular;
    background-size: cover;
    background-repeat:no-repeat;
    text-align: center;
    font-size: 13px;
}
a:link {
    color: #FFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFF;
}
a:hover {
    color: #FFF;
}
a:active {
    text-decoration: none;
}
</style>
</head>
<body>
<img src="images/Backgrounds/Left.png" name="left" width="192" height="533" style="float:left; z-index:-9999; position:relative;" />
<img src="images/Backgrounds/Right.png" width="191" height="530" style="float:right; z-index:-9999; position:relative;" />
<div id="Wrapper">
  <div id="navbar" style="display: inline-block;">
<ul id="nav">
    <li id="top">
        <a href="#">HOME</a>
    </li>

    <li id="top">
        <a href="#">GUIDE</a>
        <ul>
        <li id="submenu"><a href="#">CLASSES</a></li>
        <li id="submenu"><a href="#">DUNGEONS</a></li>
        <li id="submenu"><a href="#">MONSTERS</a></li>
        <li id="submenu"><a href="#">PETS</a></li>
        <li id="submenu"><a href="#">RACES</a></li>
        <li id="submenu"><a href="#">TOWN BUILDINGS</a></li>
        <li id="submenu"><a href="#">UNIVERSE</a></li>
        <li id="submenu"><a href="#">WIKI</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">BLOG</a>

        <ul>
        <li id="submenu"><a href="#">ARAKION</a></li>
        <li id="submenu"><a href="#">CHRIS TAYLOR</a></li>
        </ul>

    </li>
    <li id="top">
        <a href="#">MEDIA</a>
        <ul>
        <li id="submenu"><a href="#">CONCEPT ART</a></li>
        <li id="submenu"><a href="#">SCREENSHOTS</a></li>
        <li id="submenu"><a href="#">VIDEOS</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">FORUM</a></li>
</ul>
</div>
<div style="display: inline-block;" id="sidebar_header"><img src="images/Progress/KickstarterGoalBar_0.png" width="310" height="80"/></div>
<div style="display: inline-block;" id="sidebar_banner">
  <div id="Sidebar_content">
    <p>&nbsp;</p>
    <p>Social Media</p>
    <p><img src="images/Side Banner_Line.png" width="100%" height="10" /></p>
    <p><a herf="#" target="_new"><img src="images/KickstarterIcon.png"/></a> <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-left: 15px;">
      <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>
  </table>
  <center>
    <table width="561" border="0">
      <tr>
        <td width="140">How Housing Works and why we have it</td>
        <td width="140">An In depth look at the Satyr race</td>
        <td width="140">We take a look at the role the alchemist plays in a group</td>
        <td width="140">Our doors are offically open to new employees apply today</td>
      </tr>
    </table></center>
    <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">  Ut 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"> 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_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">  Ut 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 <a href="http://seanwhall.daportfolio.com/" target="_blank">SE</div>

Css代码：

@font-face {
    font-family: 'KingthingsExeterRegular';
    src: url('kingthings_exeter-webfont.eot');
    src: url('kingthings_exeter-webfont.eot?#iefix') format('embedded-opentype'),
         url('kingthings_exeter-webfont.woff') format('woff'),
         url('kingthings_exeter-webfont.ttf') format('truetype'),
         url('kingthings_exeter-webfont.svg#KingthingsExeterRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: 'KingthingsExeterRegular';
}
#full-screen-background-image {
  z-index: -999;
  width:900px ;
  height:800px ;
  position: absolute;
  top:0;
  left:0;
}
/*Body Css */
#Wrapper {
    width:1040px;
    margin:auto;
    margin-top:200px;
    z-index:5;
    position:relative;
}
#left{
    position:relative;
    float:left;
    z-index:!important -9;  
}
#right{
    position:relative;
    float:right;
    z-index:!important -9;  
}
/*------------------------------------*\
    NAV
\*------------------------------------*/
#navbar{
    position: static;
    top:5px;
    float:left;
    margin-top:30px;
    margin-left:5px;
    width:650px;
    height: 50px;
    z-index:4;
    margin-bottom:10px;
}
#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:120px;
    margin-bottem:5px;
    font-size:15px;
}
#top li:hover{

}
#submenu{
    float:left;
    position:relative;
    height:20px;
    width:100px;
    font-size: 12px;
}
#nav a{
    display:block;
    padding-top:20px;
    z-index:-1;
    font-family:"Arial";
}
/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#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 a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */

}
#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(../images/MainSection_SmallImageInsett.png);
    width:560px;
    height:95px;
}
/* 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;
}
#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:10px;
    text-align: left;
}
/* 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;
}
#sidebar_header img {
    margin-top:61px;
    height:18px;
    width:310;

}
#sidebar_banner{
    position:relative;
    height:729px;
    width:360px;
    float:right;
    background-image: url(../images/Side%20Banner.png);
    left:-20px;
    z-index:-1;
}
#Sidebar_content{
    margin:0 auto;
    margin-top:20px;
    text-align:center;
    font-size: 20px;
    width:300px;
    height:700px;
    line-height: 3px;
}

/* 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:10px;
}
#footer_background img {
    margin-top:100px;
}

网站现在的方式，基本上是放大时会发生的情况。当我尝试在两个相对div层中添加两个图像时，会发生什么。网站：https://dl.dropbox.com/u/49665279/Arakion/index.html我们非常感谢任何帮助。

Answer 1

我刚刚经历了一个问题的结束和重新开放。我学到的最好的经验教训是，我建议你让这个问题更简洁。考虑编辑，删除多余的代码，只关注你的问题。但是，我会尝试提供答案。

据我所知，您所指的两个图像是背景中的图像。如果您已经修复了所有页面元素的宽度，则可以执行以下操作：

创建一个包含左侧和右侧的单个图像，其中包含所需的空格。（缺点是图像包含空白，这很浪费）。

然后将以下内容添加到您的body元素的css：

background: url('url/to/your/new/twoimage.jpg'); 
background-repeat: no-repeat;

快速谷歌的“固定与流畅布局”应该对定义宽度有所了解。

使用safari，页面永远不会停止加载。我推荐萤火虫http://getfirebug.com/ 它是检查网页问题的绝佳工具。随意提出更具体的问题

相对CSS分层问题

1 个答案: