1
Cifug
Having trouble centering a fixed width theme
  • 2012/8/2 10:04

  • Cifug

  • Quite a regular

  • Posts: 208

  • Since: 2007/12/13


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...

2
zyspec
Re: Having trouble centering a fixed width theme
  • 2012/8/2 13:28

  • zyspec

  • Module Developer

  • Posts: 1095

  • Since: 2004/9/21


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.

3
Cifug
Re: Having trouble centering a fixed width theme
  • 2012/8/3 6:49

  • Cifug

  • Quite a regular

  • Posts: 208

  • Since: 2007/12/13


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 :)

4
Bleekk
Re: Having trouble centering a fixed width theme
  • 2012/8/3 7:03

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


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

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

5
Cifug
Re: Having trouble centering a fixed width theme
  • 2012/8/4 0:47

  • Cifug

  • Quite a regular

  • Posts: 208

  • Since: 2007/12/13


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

6
Cifug
Re: Having trouble centering a fixed width theme
  • 2012/8/7 13:58

  • Cifug

  • Quite a regular

  • Posts: 208

  • Since: 2007/12/13


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...

7
Bleekk
Re: Having trouble centering a fixed width theme
  • 2012/8/7 14:36

  • Bleekk

  • Theme Designer

  • Posts: 940

  • Since: 2002/12/14


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.

Login

Who's Online

160 user(s) are online (62 user(s) are browsing Support Forums)


Members: 0


Guests: 160


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits