XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme stylesheets (CSS) help 
  4.  / Having trouble centering a fixed width theme
Register
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
le="color: #000000"><?php <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
le="color: #000000"><?php #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:

le="color: #000000"><?php #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:

le="color: #000000"><?php #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:
le="color: #000000"><?php <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: 942

  • Since: 2002/12/14


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

use css like zyspec described:
le="color: #000000"><?php #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:
le="color: #000000"><?php #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:
le="color: #000000"><?php #headertable {width: 1000px; margin: 0 auto;}

And then just added:
le="color: #000000"><?php text-align: left;

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

  • 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

le="color: #000000"><?php <div id="header"> Some header text </div>

To center it you need following css:

le="color: #000000"><?php #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:

le="color: #000000"><?php #header{width: 900px; margin:0 auto; text-align:left; }


That is all you need.

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Donat-O-Meter

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