2010-03-29 23 views
0

我的「Page [0]」文字不在我的網頁上。有人知道爲什麼我真的可以請一些幫助。爲什麼我的「Page [0]」不在我的網頁中?

下面是HTML:

<html> 
    <head> 

     <title>Test Forum</title> 
     <link href="http://prime.programming-designs.com/test_forum/style.css" rel="stylesheet" type="text/css" /> 


    </head> 

    <body> 

     <a href="http://prime.programming-designs.com/test_forum/"><img src="http://prime.programming-designs.com/test_forum//images/banner1.png" alt="" id="banner" /></a> 

     <h1>Test Forums</h1> 


     <hr /> 

     <div id="navi"><div id="naviheader">Boards</div><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=0">Testing</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=1">General Discussion</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=2">Video Games</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=3">Anime and Manga</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=4">BlazBlue</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=5">Shin Megami Tensei</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=6">Earthbound</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=7">Phantasy Star</a><br /><a href="http://prime.programming-designs.com/test_forum/viewboard.php?board=8">Mobile Suit Gundam</a><br /></div>  
     <div class="postbox"><h4>CyanPrime</h4><hr />Welcome to the King's Gate BBS!</div>Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]  
    </body> 
</html> 

這裏是CSS:

@charset "windows-1252";  

body{ 
    background-color: #EEFFF8; 
    color: #000000; 
    text-align: center; 
} 

.postbox{ 
    text-align: left; 
    margin: auto; 
    background-color: #dbfef8; 
    border: 1px solid #82FFCD; 
    width: 50%; 
    margin-top: 10px; 
} 

.stickypostbox{ 
    text-align: left; 
    margin: auto; 
    background-color: #F5FFFA; 
    border: 1px solid #82FFCD; 
    width: 50%; 
    margin-top: 10px; 
} 

h4{ 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    color: #9932CC; 
} 

h1{ 
    color: #551A8B; 
} 

hr{ 
    color: #82FFCD; 
    background-color: #82FFCD; 
    height: 1px; 
    border: 0px dotted #82FFCD; 
} 

a{ 
    color: #7F00FF; 
    text-decoration: none; 
} 

a:hover{ 
    color: #7F00FF; 
    text-decoration: underline; 
} 

form{ 
    margin: 0px auto; 
    width: 50%; 
} 

#formdiv { 
    background-color:#dbfef8; 
    border:1px solid #82FFCD; 
} 


.fielddiv1{ 
    background-color: #f9f9f9; 
    border: 1px solid #DBFEF8; 
    vertical-align: middle; 
    width: 45%; 
    float: left; 
} 

.fielddiv2{ 
    background-color: #f9f9f9; 
    border: 1px solid #DBFEF8; 
    vertical-align: middle; 
    width: 100%; 
} 

.fieldtext1{ 
    width: 50%; 
    background-color: #82FFCD; 
    float: left; 
} 

.fieldtext2{ 
    width: 100%; 
    background-color: #82FFCD; 
} 

#replydiv{ 
    width: 100%; 
    background-color: #DBFEF8; 
    margin: 10px 0 10px 0; 
} 

#admindiv{ 
    width: 100%; 
    background-color: #DBFEF8; 
    margin: 10px 0 10px 0; 
} 

#navi{ 
    width: 200px; 
    background-color: #dbfef8; 
    border: 1px solid #82FFCD; 
    text-align: left; 
    float: left; 
} 

#naviheader{ 
    width: 100%; 
    background-color: #82FFCD; 
} 

#submitbutton{ 
    border: 1px solid #82FFCD; 
    background-color: #DBFEF8; 
    color: #000000; 
    margin-top: 5px; 
    width: 100px; 
    height: 20px; 
} 

#banner{ 
    border: 1px solid #82FFCD; 
} 

.postbar{ 
margin-right: 0px; 
margin-top: 0px; 
} 

.bannedtext{ 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    color: #FF0000; 
} 

這裏是網頁,以便你可以得到一些上下文(你會發現,我的「頁面[0 ]「以其他板子爲中心,但不是索引http://prime.programming-designs.com/test_forum/

+0

它以Firefox爲中心,但在IE中還有其他一些問題。 – 2010-03-29 19:09:17

回答

3

左邊的浮動塊將內容推向右邊,它仍然居中在整條線上,但它並不居中e頁。向.postbox添加較大的底部邊距可以說明這一點。

Centreing problem illustrated http://img169.imageshack.us/img169/9027/williamhtmlproblem.png

我的建議是包裹頁腳在<div>。要麼clear: both;(或只是left),要麼在兩端添加頁邊空白以補償浮動元素,要麼給position: absolute; left: 0; right: 0;強制在頁面中間居中。

2

變化:

Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>] 

要(把它包在尋呼機類格):

<div class="pager">Page: [<a href="http://prime.programming-designs.com/test_forum/index.php?page=0">0</a>]</div> 

變化這在你的CSS:

.postbox, .pager{ 
    text-align: left; 
    margin: auto; 
    width: 50%; 
    margin-top: 10px; 
} 
.postbox { 
    background-color: #dbfef8; 
    border: 1px solid #82FFCD; 
} 
.pager { 
    text-align: center; 
} 

之所以發生這種情況是因爲你的浮動推動你的內容。你的傳呼機直接從身體標記中出來。一般來說,最好在html元素中包裝純文本。

您可能需要重新訪問您的頁面結構。創建一個左列和一箇中心列div或類似的東西。

+0

+1抽出時間寫出一些代碼 – karlipoppins 2010-03-29 19:16:29

+0

看看示例站點,可以看到OP對於網站開發可能有些新意。當我開始時,我總是從例子中學到最好的東西。儘管如此,strager的帖子已經死了。 – Armstrongest 2010-03-29 19:18:11

相關問題