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

  • 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-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: 941

  • 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

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

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

Members: 0

Guests: 160

more...

Donat-O-Meter

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

Latest GitHub Commits