Forum Align

Reynard · elokuu 27, 2006, 05:18:04 AP

Alright. I have been one by own settling all the problems I have been having and now I feel that im getting to the end of these and ready to launch the forum. What I would like to know now is, how to align the forum to the center of the page.

In style.css, I have the following code:

Koodi [Valitse]

/* The main body of the entire forum. */
body
{
	background-color: #E5E5E8;
	margin: 0px;
	padding: 12px 30px 4px 30px;
	width: 800px;
}

I tried using: vertical-align: middle; , but that didnt work.

Anyone know how to do it? Im using the default SMF forum theme.

The url is: http://alterego.vault.ign.com/board/index.php

Also, there seems to be a problem with the spell check. When pressed, a popup window comes up and then a warning window is reveald stating: "The Documents Contains no Data".

Peter Duggan · elokuu 27, 2006, 05:34:05 AP

Assuming you're wanting a fixed width page to be *horizontally* centered, specify your left and right margins as 'auto' (all you need for Firefox, Opera and IE6), use 'text-align: center;' to trick IE5 into doing the same and follow that up with a further selector (declared as 'text-align: left;') to restore the text to its 'pre-trick' state!

Like this:

Koodi [Valitse]

/* The main body of the entire forum. */
body
{
	background-color: #E5E5E8;
	margin: 0;
	padding: 12px 30px 4px 30px;
	text-align: center;
}
div#someUniqueName {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

Note also that you don't need to specify units for a 0 margin, and you need to go a little narrower than 800px to allow for scroll bars etc. *if* you're looking to fit an 800px window.

Reynard · elokuu 27, 2006, 05:47:33 AP

I tried text-align: center; , yet that only aligns my text to the center, no the entire board as you can see (i'll leave it like that so you can view it).

J. Williams · elokuu 27, 2006, 05:53:44 AP

Have you tried putting <div align="center"> after <body> and </div> before </body> in index.template.php?

Peter Duggan · elokuu 27, 2006, 05:56:22 AP

Lainaus käyttäjältä: Reynard - elokuu 27, 2006, 05:47:33 AP
I tried text-align: center; , yet that only aligns my text to the center, no the entire board as you can see (i'll leave it like that so you can view it).

That's because centering your text is the intended purpose of 'text-align: center;', but containing everything in another div like this:

Koodi [Valitse]

<body>
<div id="someUniqueName">
<!-- Forum goes here -->
</div>
</body>

And styling it the way I've already suggested *will* work.

Reynard · elokuu 27, 2006, 06:00:54 AP

Lainaus käyttäjältä: Peter Duggan - elokuu 27, 2006, 05:56:22 AP
Lainaus käyttäjältä: Reynard - elokuu 27, 2006, 05:47:33 AP
I tried text-align: center; , yet that only aligns my text to the center, no the entire board as you can see (i'll leave it like that so you can view it).

That's because centering your text is the intended purpose of 'text-align: center;', but containing everything in another div like this:

Koodi [Valitse] Laajenna
<body> <div id="someUniqueName">  </div> </body>

And styling it the way I've already suggested *will* work.

and where should I add those tags?

J. Williams · elokuu 27, 2006, 06:04:21 AP

I would expect you find the body tags in index.template.php

Peter Duggan · elokuu 27, 2006, 06:05:24 AP

Lainaus käyttäjältä: Reynard - elokuu 27, 2006, 06:00:54 AP
and where should I add those tags?

Exactly where I've already shown you! And (referring to my first reply, which I've just modified accordingly), it's probably also better to stick the width on the new div instead of the body.

Reynard · elokuu 27, 2006, 06:16:06 AP

Lainaus käyttäjältä: Peter Duggan - elokuu 27, 2006, 06:05:24 AP
Lainaus käyttäjältä: Reynard - elokuu 27, 2006, 06:00:54 AP
and where should I add those tags?

Exactly where I've already shown you! And (referring to my first reply, which I've just modified accordingly), it's probably also better to stick the width on the new div instead of the body.

heh, sorry im to slow to grasp whats in front of me.

Anyways. I did what you told me to and its still aligned to the left, but the text is not aligned to the right.

This is all I have till now:

style.css

Lainaa/* The main body of the entire forum. */
body
{
   text-align: center;
   background-color: #E5E5E8;
   margin: 0px;
   padding: 12px 30px 4px 30px;
   width: 800px;
}

div#bodywidth {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

index.template.php

Lainaa<body><div id="bodywidth">';
   echo '
   <div class="tborder" ', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' style="width: 100%;"' : '', '>
      <table width="100%" cellpadding="0" cellspacing="0" border="0">
         <tr>
            <td class="catbg" height="32">';

   if (empty($settings['header_logo_url']))
      echo '
               <span style="font-family: Verdana, sans-serif; font-size: 140%; ">', $context['forum_name'], '</span>';
   else
      echo '
               <img src="', $settings['header_logo_url'], '" style="margin: 4px;" alt="', $context['forum_name'], '" />';

   echo '
            </td>
            <td align="right" class="catbg">
               <img src="', $settings['images_url'], '/smflogo.gif" style="margin: 2px;" alt="" />
            </td>
         </tr>
      </table>';

   .................................
   }

   echo '
   </div>';

   // The following will be used to let the user know that some AJAX process is running
   echo '
   <div id="ajax_in_progress" style="display: none;', $context['browser']['is_ie'] && !$context['browser']['is_ie7'] ? 'position: absolute;' : '', '">', $txt['ajax_in_progress'], '</div>
</div></body>

Peter Duggan · elokuu 27, 2006, 06:24:11 AP

Take the width out of the body style (see previous reply) and it should work.

Reynard · elokuu 27, 2006, 06:27:39 AP

Love you man... It worked

thanks for all your help.

you wouldnt know how to fix the spell check no would you?

B Patterson · elokuu 27, 2006, 11:22:22 AP

Actually, an easier way for a fixed with is to absolutely position the container (bodywidth) and set the left-margin to negative 1/2 the width. For example:

Koodi [Valitse]

#bodywidth
{
    width: 800px;
    left: 50%;
    margin-left: -400px;
}

Now, every single browser (without text-align hacks) will center it, and keep it centered. Much cleaner, and easier to read.

Don't believe me? Check out patternet.com for an example layout to see a fixed-width div absolutely positioned in the middle

Peter Duggan · elokuu 27, 2006, 11:55:39 AP

Yes, I've also seen it done that way but not yet tried it for myself, which is why I suggested the one I'd used before. But it's certainly neater if it gets the job done with two style rules instead of four (three if I'd stuck the left/right margins in a single rule)!

Simple Machines Community Forum

Uutiset:

Forum Align

Reynard

Peter Duggan

Reynard

J. Williams

Peter Duggan

Reynard

J. Williams

Peter Duggan

Reynard

Peter Duggan

Reynard

B Patterson

Peter Duggan