2010-03-29 126 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

相关问题