Home/ Questions/Q 697441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:10:06+00:00

My Page [0] text isn’t centered on my webpage. Anyone know why? I could

  • 0

My “Page [0]” text isn’t centered on my webpage. Anyone know why? I could really use some help please.

Here is the 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>

Here is the 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;
}

And here is the webpage so you can get some context (you’ll notice that my “page [0]” is centered on the other boards, but not the index. http://prime.programming-designs.com/test_forum/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The float on the left is pushing the content to the right. It’s still centred across the line, but it’s not centred across the page. Adding a large bottom margin to .postbox illustrates this.

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

    My suggestion would be to wrap the footer in a <div>. Either clear: both; (or just left), add margins on either end to compensate for the floated element, or give it position: absolute; left: 0; right: 0; to force centreing across the page.

    • 0