• Registered: 2004-01-06
  • Posts: 1

Topic: Centering

Hello , If you got to http://continuume.neopages.net/forums

As you can see i got all the sizes and stuff set up for the forums but i would like to center the forum on the page.

How do i do this? I searched for a similar post but i couldnt find any.

  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Centering

Edit the template files in include/template/. You could add a div around all the forum content. Insert the following after "<body<pun_body>>":

<div style="width: 800px; margin: auto">

And then the following before "</body>

</div>

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

3 Reply by Paul (edited by ps21 2004-01-08 02:19)

  • Paul
  • Senior Member
  • Offline
  • From: Wales, UK.
  • Registered: 2003-08-13
  • Posts: 3,089

Re: Centering

Kennel wrote:

Edit the template files in include/template/. You could add a div around all the forum content. Insert the following after "<body<pun_body>>":

<div style="width: 800px; margin: auto">

And then the following before "</body>

</div>

Only problem is that doesn't work in IE5 because that horrid old browser can't cope with margin:auto so the whole board ends up aligned left. This is the way I do it.

Open the file main.tpl. After the <body> tag put <div id="wrapper">. Go to the end of the file and above the </body> tag put </div>.

Now open the stylesheet. Edit Body so it looks like this

BODY {
background-color: #FFFFFF;
margin: 20px 0px; padding: 0px;
/*Hack to centre board in IE5 - combined with #wrapper below */
text-align: center;
}

Change background-color to whatever is right for your board/style.


Add the following after BODY

#wrapper {
/* Re-Aligns text to left. To be combined with IE centre hack*/
text-align: left;
width: 95%;
margin: 0px auto;
}

Repeat for each of the stylesheets. The end result is your board will have a width of 95% of the screen and be centred. The top and bottom margins are set at 20px. Just adjust width: and margin: to suit. If you want to make the board a fixed width simply set the width: in #wrapper to an appropriate px value instead of a percentage.

There are other ways of doing this but this method is probably the safest and also eliminates some positioning bugs in browsers. If you want to avoid changing the stylesheet then edit main.tpl so it looks like this

<html dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>">
<pun_head>
</head>
<body<pun_body> style="margin: 20px auto; padding: 0px; text-align:center;">
<div style="width: 95%; text-align:left; margin:0px auto;">

<table class="punmain" cellspacing="1" cellpadding="4">
    <tr class="punhead">
        <td class="punhead">
            <span class="puntitle"><pun_title></span><br>
            <pun_desc>
        </td>
    </tr>
    <tr>
        <td class="puncon1">
            <pun_navlinks><br><br>
            <pun_status>
        </td>
    </tr>
</table>

<pun_announcement>

<pun_main>

<pun_footer>
</div>
</body>
</html>
  • From: 127.0.0.1
  • Registered: 2001-11-02
  • Posts: 9,167

Re: Centering

Ah, nice. That's good to know.

"Programming is like sex: one mistake and you have to support it for the rest of your life."

Rickard's Website

  • From: Germany
  • Registered: 2005-01-06
  • Posts: 74

Re: Centering

Hi,

Paul wrote:

Now open the stylesheet. Edit Body so it looks like this

BODY {
background-color: #FFFFFF;
margin: 20px 0px; padding: 0px;
/*Hack to centre board in IE5 - combined with #wrapper below */
text-align: center;
}

Change background-color to whatever is right for your board/style.


Add the following after BODY

#wrapper {
/* Re-Aligns text to left. To be combined with IE centre hack*/
text-align: left;
width: 95%;
margin: 0px auto;
}

I think there is a better way, because on Pauls solution sometimes (I know: redirect) the text is centered. I think the follow code functions also on all Browsers.
My solution is the same with other code:

BODY {
background-color: #FFFFFF;
margin: 20px 0px; padding: 0px; 
}
#wrapper {
width : 760px;
position : absolute;
left : 50%;
margin-left : -380px;
}

Greetz B.

Sorry for my stupid English, but I'm an old and unteachable man.
Visit My PunBB Forum

Lucky Looser's Website