Почему моя «Страница » не сосредоточена на моей веб-странице?

Текст «Страница [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/

Related of "Почему моя «Страница » не сосредоточена на моей веб-странице?"

Поплавок слева направляет содержимое вправо. Он по-прежнему сосредоточен по всей линии, но не по центру страницы. Добавление большого нижнего поля в .postbox иллюстрирует это.

Проблема с центрированием иллюстрирована http://img169.imageshack.us/img169/9027/williamhtmlproblem.png

Мое предложение состояло в том, чтобы обернуть нижний колонтитул в <div> . Либо clear: both; (или просто left ), добавьте поля на обоих концах, чтобы компенсировать плавающий элемент, или присвоить ему position: absolute; left: 0; right: 0; position: absolute; left: 0; right: 0; для центрирования по всей странице.

Изменить:

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

Чтобы (обернуть его в div с классом пейджера):

 <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 или что-то в этом роде.