0

インデックス ページの下部に、下部に大きなスペースがあります。これで、ページの両側にある 2 つの文字が原因であることがわかりました。理由や修正方法がわかりません。どんな助けでも大歓迎です。

HTML コード:

<!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" />
<head>
<style type = "text/css">

</style>
</head>
<body>
<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/guides/classes.php">CLASSES</a></li>
        <li id="submenu"><a href="Htdocs/guides/dungeons.php">DUNGEONS</a></li>
        <li id="submenu"><a href="Htdocs/guides/monsters.php">MONSTERS</a></li>
        <li id="submenu"><a href="Htdocs/guides/pets.php">PETS</a></li>
        <li id="submenu"><a href="Htdocs/guides/races.php">RACES</a></li>
        <li id="submenu"><a href="Htdocs/guides/town buildings.php">TOWN BUILDINGS</a></li>
        <li id="submenu"><a href="Htdocs/guides/universe.php">UNIVERSE</a></li>
        <li id="submenu"><a href="Htdocs/guides/wiki.php">WIKI</a></li>
        </ul>
    </li>
    <li id="top">
        <a href="#">BLOG</a>

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

    </li>
    <li id="top">
        <a href="#">MEDIA</a>
        <ul>
        <li id="submenu"><a href="Htdocs/media/art.php">CONCEPT ART</a></li>
        <li id="submenu"><a href="Htdocs/media/screenshots.php">SCREENSHOTS</a></li>
        <li id="submenu"><a href="Htdocs/media/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"><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>
    <table width="561" border="0" style="text-align: center;">
      <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>
    <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 SEAN HALL</a></div>
        <div id="left"><img src="images/Backgrounds/left.png" width="350px" height="900px" /></div>
        <div id="right"><img src="images/Backgrounds/Right.png" width="350px" height="900px" /></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: 13px;
}
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:-2;
  width:250px;
  height:600px ;
  position: relative;
  float: left;
  clear: both;
  top:-2050px;
  left:-210px;

}
#right{
  z-index:-2;
  width:250px;
  height:600px ;
  position: relative;
  float:right;
  clear: both;
  top:-2600px;
  left:100px;
}
#Wrapper {
    width:1040px;
    margin:auto;
    margin-top:200px;
    height:2000px;
}
/*------------------------------------*\
    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: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; 
}
#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(mages/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;
    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: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;
    clear: both;
}
#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;
    clear: both;
}
#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 a:link{
    color: #000;
    text-decoration: underline;
}
#footer_background img {
    margin-top:100px;
}

これはサイトのライブ バージョンです。ページの一番下までスクロールすると、空のスペースが表示されます。https://dl.dropbox.com/u/49665279/アラキオン/index.html

ありがとうございました。

4

3 に答える 3

2

ドキュメントの最後にを使用する</html>と役立つ場合があります:)

CSS の場合:

positionのを に変更#wrapperしrelativeます。

そして、positionと#leftをに変更#rightしabsoluteます。

そして彼らtopは周りの何かに-175px

于 2012-07-27T12:24:32.193 に答える
1

margin-top/bottom: -(value)px;の代わりに使用するposition: (relative/absolute)と、スペースがなくなります。

于 2012-07-27T12:40:03.207 に答える
1

横の絵のせいです。で配置しrelativeましたtop:-2050px;。これは、これらの画像が 2000 ピクセル上に表示されることを意味しますが、それでもページの下部にスペースが必要です。

位置を からrelativeに変更してみてくださいfixed。と の値も変更する必要がある場合がtopありleftます。

編集: 使用していない場合は、firefox または google chrome 開発者ツールで firebug を試してください。これらは、このような問題の原因を見つけるのに非常に役立ちます。また、ワンクリックで css オプションを変更または無効にして、それがどのオプションであるかを調べることができます。

于 2012-07-27T12:27:02.210 に答える