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:
/* 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 (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".
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:
/* 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.
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).
Have you tried putting <div align="center"> after <body> and </div> before </body> in index.template.php?
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:
<body>
<div id="someUniqueName">
<!-- Forum goes here -->
</div>
</body>
And styling it the way I've already suggested *will* work.
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:
<body>
<div id="someUniqueName">
<!-- Forum goes here -->
</div>
</body>
And styling it the way I've already suggested *will* work.
and where should I add those tags?
I would expect you find the body tags in index.template.php :P
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 (http://www.simplemachines.org/community/index.php?topic=109122.msg701229#msg701229), which I've just modified accordingly), it's probably also better to stick the width on the new div instead of the body.
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 (http://www.simplemachines.org/community/index.php?topic=109122.msg701229#msg701229), 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>
Take the width out of the body style (see previous reply) and it should work.
Love you man... It worked :D :D :D :D
thanks for all your help.
you wouldnt know how to fix the spell check no would you? :P
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:
#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 (http://www.patternet.com) for an example layout to see a fixed-width div absolutely positioned in the middle ;)
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)! ;)