1. 首頁
  2. 問答
  3. 頁面底部奇怪的Css間距

頁面底部奇怪的Css間距

2012-07-27 137 views
0

在我的索引頁底部，底部有一個很大的間距。現在我知道是什麼導致了這一點，這是頁面兩側的兩個字符。我不知道爲什麼或如何解決它。非常感激任何的幫助。頁面底部奇怪的Css間距

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/Arakion/index.html

謝謝。

來源

2012-07-27 Sean Hall

+0

可能是文檔的字節順序標記。將其保存爲UTF-8 **而沒有** BOM並檢查它是否可用。 – Christoph 2012-07-27 12:25:20

+0

您構建HTML的方式都是錯誤的。這將很難解決這個問題。嘗試修復它，開始建立你的網站在2列（每個列的div），這兩個都在你的包裝。你仍然在考慮它，就好像它是一個表格佈局（即你正在建立你的網站）。例如，您的網站現在存在的另一個問題是，無法單擊閱讀更多按鈕 – Dan 2012-07-27 13:03:46

回答

2

在文檔的末尾使用一個</html>可以幫助:)

而對於CSS：

更改#wrapper到relative的position。

然後將#left和#right的position更改爲absolute。

而且他們top的東西圍繞-175px

來源

2012-07-27 12:24:32 Sem

+2

和 ;-) – 2012-07-27 12:28:13

+0

我無法將其更改爲絕對值，否則它不會隨包裝一起移動。 – 2012-07-27 12:41:53

+0

它會一旦你使'#wapper {position：relative; }'。絕對定位的對象搜索具有'position：absolute'或'position：relative'的第一個父對象。 – Sem 2012-07-27 12:45:56

1

這是因爲一側的圖像。您將它們定位爲relative與top:-2050px;。這意味着這些圖像在頂部顯示爲2000像素，但仍佔用頁面底部的空間。

嘗試將其位置從relative更改爲fixed。您可能必須更改top和left的值。

編輯：如果你還沒有使用它，嘗試用firefox或谷歌chrom開發者工具firebug。他們在尋找這些問題的根源方面非常有幫助。您也可以通過一次點擊來更改或禁用css選項，以找出可能的選項。

來源

2012-07-27 12:27:02 Slomo

+0

如果我將其更改爲固定，則它將隨滾動一起移動。 – 2012-07-27 12:48:22

+0

@SeanHall我的不好，請嘗試'絕對'，而不是像Sem建議的那樣。 – Slomo 2012-07-27 12:50:27

1

使用margin-top/bottom: -(value)px;而不是position: (relative/absolute)，您將不會有空格。

來源

2012-07-27 12:40:03

相關問題

 相關問題