Pourquoi ma "Page [0]" n'est-elle pas centrée sur ma page Web?

Mon texte "Page [0]" n'est pas centré sur ma page Web. Quelqu'un sait pourquoi? Je pourrais vraiment utiliser de l'aide s'il vous plaît.Pourquoi ma "Page [0]" n'est-elle pas centrée sur ma page Web?

Voici le code 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>

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

Et voici la page web afin que vous puissiez obtenir un certain contexte (vous remarquerez que ma page »[0 ] "est centré sur les autres cartes, mais pas sur l'index http://prime.programming-designs.com/test_forum/

Source

2010-03-29 William

Il est centré dans Firefox, mais vous avez d'autres problèmes dans IE. –

Le flottant de gauche pousse le contenu vers la droite, il est toujours centré sur la ligne, mais il n'est pas centré e page. L'ajout d'une grande marge inférieure à .postbox illustre cela.

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

Ma suggestion serait d'envelopper le pied de page dans un <div>. clear: both; (ou seulement left), ajoutez des marges à chaque extrémité pour compenser l'élément flottant ou donnez-lui position: absolute; left: 0; right: 0; pour forcer le centrage sur la page.

Source

2010-03-29 19:10:40 strager

Change:

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

Pour (l'envelopper dans un div avec classe téléavertisseur):

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

changement dans votre 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; 
}

La raison pour laquelle cela se passe est parce que votre flotteur pousse sur votre contenu. Votre téléavertisseur sort directement de l'étiquette du corps. En général, il est préférable d'inclure du texte brut dans un élément html.

Vous voudrez peut-être revoir la structure de votre page. Créer une colonne de gauche et une div colonne centrale ou quelque chose comme ça.

Source

2010-03-29 19:14:12 Armstrongest

+1 pour prendre le temps d'écrire du code – karlipoppins

En jetant un coup d'œil sur le site d'exemple, vous pouvez voir que le PO est probablement un peu nouveau pour le développement du site. J'ai toujours appris le meilleur des exemples quand j'ai commencé. Le message de Strager est cependant correct. – Armstrongest

Pourquoi ma "Page [0]" n'est-elle pas centrée sur ma page Web?

Répondre

Questions connexes