0

<div>相対s の階層化でいくつかの問題が発生しています。問題の 1 つは、ズームインするとすべてが台無しになることです。また、私がやりたいことは、ラッパー レイヤーの下に 2 つの関連レイヤーがあることです。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;
}

サイトの現在の様子は、基本的にズームインしたときに起こることです。また、2 つの相対 div レイヤー内に 2 つの画像を追加しようとしたときにも起こります。サイト: https://dl.dropbox.com/u/49665279/Arakion/index.htmlどんな助けでも大歓迎です。

4

1 に答える 1

0

質問のクローズと再開を経験しました。私が学んだ、伝えられる最高の教訓は、この質問をもっと簡潔にすることをお勧めするということです. あなたの質問だけに焦点を当てて、余分なコードを削除して編集を検討してください。しかし、私は答えを提供しようとします。

私が理解しているように、あなたが参照している2つの画像は背景の画像です. ページのすべての要素の幅を固定したので、次のことができます。

左と右の両方を含み、間に必要な空白を含む単一の画像を作成します (画像に空白が含まれているという欠点があり、これは無駄です)。

次に、body 要素の css に次を追加します。

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

「固定レイアウトと流動レイアウト」の簡単なグーグルは、幅の定義にいくらか光を当てるはずです.

Safari を使用すると、ページの読み込みが停止することはありません。firebug http://getfirebug.com/をお勧めします 。これは、Web ページの問題を検査するための優れたツールです。より具体的な質問をお気軽に

于 2012-07-26T23:39:58.117 に答える