Почему моя страница [0] не центрирована на моей веб-странице? - PullRequest
Новая
       29

Почему моя страница [0] не центрирована на моей веб-странице?

0 голосов
/ 29 марта 2010

Мой текст "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 /

Ответы [ 2 ]

3 голосов
/ 29 марта 2010

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

Показана проблема центрирования http://img169.imageshack.us/img169/9027/williamhtmlproblem.png

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

2 голосов
/ 29 марта 2010

Изменение: 

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;
}

Причина, по которой это происходит, заключается в том, что ваш float надвигается на ваш контент. Ваш пейджер идет прямо с тега тела. Как правило, лучше всего оборачивать простой текст внутри HTML-элемента.

Возможно, вы захотите пересмотреть структуру своей страницы. Создайте левый столбец и центральный столбец div или что-то в этом роде.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...