xoops forums

Cifug

Quite a regular
Posted on: 2012/8/2 10:04
Cifug
Cifug (Show more)
Quite a regular
Posts: 208
Since: 2007/12/13
#1

Having trouble centering a fixed width theme

Hi guys/gals, I'm having trouble centering a fixed width theme. I know it must be a simple fix but my mind is not playing the game tonight lol. My theme keeps sitting on the left of the page but I would like it to be centered on the page.

This is what I have in the theme.html
<table id="headertable" cellspacing="0">
     <
tr id="header">
         <
td id="headerlogo" width="100%" align="center"><a href="<{xoAppUrl /}>" title="<{$xoops_sitename}>"><img src="<{xoImgUrl ar_banner.jpg}>" alt="<{$xoops_sitename}>" /></a></td>
     </
tr>
     <
tr>
         <
td id="headerbar" width="60%">&nbsp;</td>
         <
td id="headerbar" width="40%">&nbsp;</td>
     </
tr>
 </
table>


This is what I have in the style.css
#headertable {width: 1000px; align: center;}


Is align: center; wrong? if so, what should I be using?

Thanks in advance for your input,
Cifug...

zyspec

Module Developer
Posted on: 2012/8/2 13:28
zyspec
zyspec (Show more)
Module Developer
Posts: 1042
Since: 2004/9/21
#2

Re: Having trouble centering a fixed width theme

You might try something like:

#headertable {width: 1000px; margin-left:auto; margin-right:auto;}


You can't just use 'text-align: center' for tables in CSS. There's a few other methods that can be used for fixed width tables/themes but hopefully this one will do what you need.

Cifug

Quite a regular
Posted on: 2012/8/3 6:49
Cifug
Cifug (Show more)
Quite a regular
Posts: 208
Since: 2007/12/13
#3

Re: Having trouble centering a fixed width theme

Quote:

zyspec wrote:
You might try something like:

#headertable {width: 1000px; margin-left:auto; margin-right:auto;}


You can't just use 'text-align: center' for tables in CSS. There's a few other methods that can be used for fixed width tables/themes but hopefully this one will do what you need.


Thanks for your help zyspec, that works a little too good lol. All the content is also centered. I can do what I need by using div tags in the theme.html like:
<div style="width:1000px;margin:0px auto;text-align:left;"></div>

But, i would like to use the css instead if possible?

Any further ideas?

Thanks again for any help :)

Bleekk

Theme Designer
Posted on: 2012/8/3 7:03
Bleekk
Bleekk (Show more)
Theme Designer
Posts: 934
Since: 2002/12/14
#4

Re: Having trouble centering a fixed width theme

delete: "align: center" or "text-align:center"
margin: 0 auto; ist enough.

use css like zyspec described:
#headertable {width: 1000px; margin: 0 auto;}

Cifug

Quite a regular
Posted on: 2012/8/4 0:47
Cifug
Cifug (Show more)
Quite a regular
Posts: 208
Since: 2007/12/13
#5

Re: Having trouble centering a fixed width theme

Quote:

Bleekk wrote:
delete: "align: center" or "text-align:center"
margin: 0 auto; ist enough.

use css like zyspec described:
#headertable {width: 1000px; margin: 0 auto;}


Hi Bleekk, that had the same effect as zyspec's code.

And then it came to me, I used:
#headertable {width: 1000px; margin: 0 auto;}

And then just added:
text-alignleft;

to all the content that was incorrectly centered like the main menu and user menu.

This appears to have worked :)

Cheers and thanks for your help,
Cifug

Cifug

Quite a regular
Posted on: 2012/8/7 13:58
Cifug
Cifug (Show more)
Quite a regular
Posts: 208
Since: 2007/12/13
#6

Re: Having trouble centering a fixed width theme

Actually...this did not work completely :(

My block headings are still centered, but i'm torn as whether I prefer the centered block headings or not.

I think to be safe the block headers should be left aligned.

Any other ideas?

Best regards,
Cifug...

Bleekk

Theme Designer
Posted on: 2012/8/7 14:36
Bleekk
Bleekk (Show more)
Theme Designer
Posts: 934
Since: 2002/12/14
#7

Re: Having trouble centering a fixed width theme

Do you have a link to your website?

There is nothing easier then centering a div.
Let's say you have following html

<div id="header">
    
Some header text
</div>

To center it you need following css:

#header{width: 900px; margin:0 auto;}

That's it! You do not need any other align or text-align

Imagine that your text in the header is centered and you want it to be on the left.
Then you need to change your css to this:

#header{width: 900px; margin:0 auto; text-align:left; }


That is all you need.