Problem centering website

[Zyphos]

OK, I'm trying to redesign my clan scripts from a very ugly website to a nice looking one. One of the problems i cannot figure out over hours and hours of thought and error is centering my website.

Website: [url]http://clansa.co.cc[/url]

As you can see the page is positioned to the RIGHT of the page while the table has the align="center" attribute. I do not understand this.

My css on the same table has position as absolute and 141px below the top to move out of the way for the nav and banner. I can move it to the left or right but not the center.

Can anyone help me out with this please?
Also any suggestions on my site would be great, i know there is a lot of browser incompatibility including the nav.

[Skorpy]

Ok some comments.

One. Don't use tables for layout. It's stupid and has limited capability.
Two. The design of the site looks pretty. Opacity and all. I like it somewhat.
Three. Why does the menu disappear when I scroll down the page? That's just stupid and useless.

[Zyphos]

[QUOTE=Skorpy;27560114]Ok some comments.

One. Don't use tables for layout. It's stupid and has limited capability.
Two. The design of the site looks pretty. Opacity and all. I like it somewhat.
Three. Why does the menu disappear when I scroll down the page? That's just stupid and useless.[/QUOTE]

Tables work better with the amount of content on this site then divs, there are a lot of divs within the console and throughout the website but for listing data retrieved from the database i use tables. The entire site was coded for this clan here: [url]http://overdosed.net[/url] and i can tell you right now Ive done a lot of improvements while they sit in there error infested scripts from 2003, the amount of typos, syntax errors, start and end tags that were not started or ended, and several other ridiculous things like literally putting every design attribute right into the table instead of adding a css class. Ive removed so much stuff its insane.

As for the menu it fades out when you scroll down if you point at the menu it fades back in. I didn't want a "permanent" menu up there i wanted the focus to be the banner i am thinking of adding a "You are/not logged in" up there soon as well.

Also is there anyway to get rounded borders in ie? I thought the webkit css fixed that.

Also i do not appreciate people calling me dumb. I will tell you right now I'm not the best in web design, i am amateur. You were once before too, it's how all of us start out.
I came here for help with my problems not for people to rub it in that i cannot figure it out.

[Qombat]

[QUOTE=Zyphos;27560175]Tables work better with the amount of content on this site then divs, there are a lot of divs within the console and throughout the website but for listing data retrieved from the database i use tables. The entire site was coded for this clan here: [url]http://overdosed.net[/url] and i can tell you right now Ive done a lot of improvements while they sit in there error infested scripts from 2003, the amount of typos, syntax errors, start and end tags that were not started or ended, and several other ridiculous things like literally putting every design attribute right into the table instead of adding a css class. Ive removed so much stuff its insane.

As for the menu it fades out when you scroll down if you point at the menu it fades back in. I didn't want a "permanent" menu up there i wanted the focus to be the banner i am thinking of adding a "You are/not logged in" up there soon as well.

Also is there anyway to get rounded borders in ie? I thought the webkit css fixed that.

Also i do not appreciate people calling me dumb. I will tell you right now I'm not the best in web design, i am amateur. You were once before too, it's how all of us start out.
I came here for help with my problems not for people to rub it in that i cannot figure it out.[/QUOTE]

And that is exactly how you do not ask questions in this forum.

[editline]21st January 2011[/editline]

[QUOTE=Skorpy;27560114]Ok some comments.

One. Don't use tables for layout. It's stupid and has limited capability.
Two. The design of the site looks pretty. Opacity and all. I like it somewhat.
Three. Why does the menu disappear when I scroll down the page? That's just stupid and useless.[/QUOTE]

[img]http://fmw.im/9f[/img]

[img]http://fmw.im/a0[/img]

:psyduck:

[Zyphos]

[QUOTE=Qombat;27560276]And that is exactly how you do not ask questions in this forum.[/QUOTE]

So tell me forum guru, how do i stoop to your low level and assimilate myself into this forum to get an actual reply to my question?

[Qombat]

[QUOTE=Zyphos;27560292]So tell me forum guru, how do i stoop to your low level and assimilate myself into this forum to get an actual reply to my question?[/QUOTE]

Back the fuck up.

You're expecting help, right?

[Skorpy]

[QUOTE=Zyphos;27560175]Tables work better with the amount of content on this site then divs, there are a lot of divs within the console and throughout the website but for listing data retrieved from the database i use tables.[/quote]

Yes tables are great for listing data, but your "Tables work better with the amount of content on this site th[b]a[/b]n divs" argument is just wrong. Use tables just for [url=http://webdesign.about.com/od/tables/a/aa122605.htm]tabular data[/url]. Nothing else.

[quote]
As for the menu it fades out when you scroll down if you point at the menu it fades back in. I didn't want a "permanent" menu up there i wanted the focus to be the banner i am thinking of adding a "You are/not logged in" up there soon as well.[/quote]

Never hide your main navigation. If you don't want it there, you should just put it somewhere else then.

[quote]
Also is there anyway to get rounded borders in ie? I thought the webkit css fixed that.
[/quote]

There are some [url=http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=rounded+corners+in+internet+explorer]solutions[/url] but I would say that don't bother. Let the IE users suffer.
Or do the rounded corners with images.

[mokkan]

[QUOTE=Zyphos;27560292]So tell me forum guru, how do i stoop to your low level and assimilate myself into this forum to get an actual reply to my question?[/QUOTE]

He gave some constructive criticism, and you sorta just ignored it and said you were doing right/better.

[Qombat]

[QUOTE=Skorpy;27560311]Let the IE users suffer.[/QUOTE]

On a site with the demographic of gamers, going to extremes to make it work for IE users would be majorly unnecessary.

[mokkan]

[QUOTE=Qombat;27560321]On a site with the demographic of gamers, going to extremes to make it work for IE users would be majorly unnecessary.[/QUOTE]

I dunno
Just because their gamers doesn't mean they would be smart enough to realise IE isn't that great..

If that's what you were getting at

[Qombat]

[QUOTE=Qombat;27560306]Back the fuck up.

You're expecting help, right?[/QUOTE]

[img]http://fmw.im/a1[/img]

Oh, so you didn't want help.

Move along, folks.

[editline]21st January 2011[/editline]

[QUOTE=mokkan;27560328]I dunno
Just because their gamers doesn't mean they would be smart enough to realise IE isn't that great..

If that's what you were getting at[/QUOTE]

Generally they would though, I'd assume.

[Zyphos]

[QUOTE=Skorpy;27560311]

Never hide your main navigation. If you don't want it there, you should just put it somewhere else then.

There are some [url=http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=rounded+corners+in+internet+explorer]solutions[/url] but I would say that don't bother. Let the IE users suffer.
Or do the rounded corners with images.[/QUOTE]

Yes tables are great for listing data, but your "Tables work better with the amount of content on this site th[b]a[/b]n divs" argument is just wrong. Use tables just for [url=http://webdesign.about.com/od/tables/a/aa122605.htm]tabular data[/url]. Nothing else.

Finally someone who wants to help instead of criticize. Thank you.
Sadly as i would love to remove all the tables i am stuck with them, to remove them would cost me weeks if not months of switching content around.

I thought about using rounded images but the idea of placing divs in certain locations just to get a rounded corner seemed like a waste of time.

So any thoughts on how i can fix my alignment problem?

[Skorpy]

[html]
<div class="body-main"> </div>
<table align="center" cellpadding="0" cellspacing="0">
...
[/html]

Why is the table outside of the body-main?

[mokkan]

[img]http://gyazo.com/eb2bb86881a292434b9026237a2ee151.png[/img]
[QUOTE=Skorpy;27560114]Ok some comments.

One. Don't use tables for layout. It's stupid and has limited capability.[/QUOTE]

[QUOTE=Zyphos;27560175]Tables work better with the amount of content on this site then divs, there are a lot of divs within the console and throughout the website but for listing data retrieved from the database i use tables.[/QUOTE]

It's kinda, exactly what you did.

[Skorpy]

[QUOTE=Zyphos;27560342]Why did my entire message get deleted?
I had like 4 sentences here...[/QUOTE]

They're in the quote.

Edit:
Mah automerge.

[Zyphos]

Anyways for the content that was deleted..........

& Skorpy
Finally someone that is willing to help and not criticize, thank you.

I would gladly get rid of the tables, but like i said this website has well over 100+ pages i would have to recode in order to do that, that is way too much time to waste just to change the tables on a site i just want to get functional to please gamers.

I thought about rounded images but the fact i would have to insert a div at every corner and position it correctly to have a rounded corner seems useless and a waste of time to me, so i guess im not going to worry about it.

Any suggestions on how to fix my alignment problem?

[mokkan]

-snip-

[Zyphos]

[QUOTE=Skorpy;27560355][html]
<div class="body-main"> </div>
<table align="center" cellpadding="0" cellspacing="0">
...
[/html]

Why is the table outside of the body-main?[/QUOTE]

body-main is the background image div, header-mid is the background on the top and header-main is the banner. It does not matter where it is as long as its z-index is lesser than everything else.

[editline]21st January 2011[/editline]

[QUOTE=Skorpy;27560360]They're in the quote.

Edit:
Mah automerge.[/QUOTE]

Thanks... If you have not noticed i do not use forums a lot.

[Skorpy]

[QUOTE=Zyphos;27560390]body-main is the background image div, header-mid is the background on the top and header-main is the banner. It does not matter where it is as long as its z-index is greater than everything else.[/QUOTE]

You can make the background image stay in place with CSS too so you don't have to do it in a another div.

Also, don't use width:100%; for divs. They already have full width and putting width:100%; might cause some problems. (Atleast I have had some problems).

[NTripleOne]

I believe to centre things that won't centre with the align property you use

margin-left: auto; 
margin-right: auto

[Zyphos]

[QUOTE=nige111;27560426]I believe to centre things that won't centre with the align property you use

margin-left: auto; 
margin-right: auto

[/QUOTE]

Yes i thought of that too, looked that up on w3schools and sadly that didn't even do anything at all not even move it a pixel.

[NTripleOne]

What other properties do you have on the thing(s) you want to centre?

[Skorpy]

[QUOTE=Zyphos;27560432]Yes i thought of that too, looked that up on w3schools and sadly that didn't even do anything at all not even move it a pixel.[/QUOTE]

That's because <body> is 1888px wide and 0px tall.
You really should just do the layout again from the start.

No wait. It's not because of that...

But yea. It still shouldn't be like that.

[Zyphos]

[QUOTE=Skorpy;27560465]That's because <body> is 1888px wide and 0px tall.
You really should just do the layout again from the start.

No wait. It's not because of that...

But yea. It still shouldn't be like that.[/QUOTE]

Wait seriously? The only thing i could guess would do that is the background image... Let me try to remove that. Thats weird though cause i don't have a horizontal scrollbar.

Update: The background image did not effect it at all.

[editline]21st January 2011[/editline]

[QUOTE=nige111;27560445]What other properties do you have on the thing(s) you want to centre?[/QUOTE]

This is what starts the content on my site:

<div class="header-top"> </div>
<div class="header-main"> </div>
<div class="body-main"> </div>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="maintable" align="center">

From here on forth the PHP files kick in and fill in the rest.

As for CSS the classes listed above are here:

.maintable {
background: #000000 url('');
background-position: top center;
background-repeat: repeat-x;
position: absolute;
padding: 15px;
width:1000px;
top: 141px;
z-index: 0;
opacity: 0.90;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-khtml-border-bottom-right-radius: 15px;
-khtml-border-bottom-left-radius: 15px;
-khtml-border-top-right-radius: 15px;
-khtml-border-top-left-radius: 15px;
}

.mainfooter {
background: #000000 url('images/Blue/console.png');
background-position: top center;
background-repeat: repeat-x;
width: 100%;
z-index: 1;
text-align: bottom;
color: #FFF;
font-family: Tahoma;
font-size: 11px;
opacity: 0.98;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=98);
-moz-border-radius:15px 15px 15px 15px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-khtml-border-bottom-right-radius: 15px;
-khtml-border-bottom-left-radius: 15px;
-khtml-border-top-right-radius: 15px;
-khtml-border-top-left-radius: 15px;
}

.header-top {
background: #021743 url('images/Blue/header-overlay.png');
background-position: top left;
background-repeat: repeat-x;
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
left: 0px;
height: 138px;
list-style: none;
z-index:9999;
width:100%;
}

.header-main {
background: transparent url('images/Blue/banner.png');
background-position: top left;
background-repeat: no-repeat;
position: fixed;
margin: 0px;
padding: 0px;
top: 40px;
right: 0px;
left: 0px;
height: 65px;
list-style: none;
z-index:9999;
width:100%;
}

.body-main {
background: #310104 url('images/Blue/bgmain.jpg');
background-position: top left;
background-repeat: repeat-x;
position: fixed;
margin: 0px;
padding: 0px;
top: 50px;
right: 0px;
left: 0px;
width: 1920px;
height: 950px;
list-style: none;
z-index:-1;
width:100%;
}

Now again i know im doing something wrong here so be easy on me.

[Skorpy]

Here's a quick layout skeleton you might wanna consider.
(Suggestions from others are welcome of course)

[html]
<html>
<head>
<title />
<style>Put all your CSS inside the <head></style>
<script>Same goes for JavaScript</script>
</head>
<body>
<div id="header">
<div id="nav" />
and other stuff that goes in the header
</div>

<div id="main"> <!-- put margin: 0 auto; for this -->
content goes here
you can make the background image stay in place with background-position: static;

<div id="footer" />
</div>
</body>
</html>
[/html]

[Zyphos]

[QUOTE=Skorpy;27560523]Here's a quick layout skeleton you might wanna consider.
(Suggestions from others are welcome of course)
[html]
<html>
<head>
<title />
<style>Put all your CSS inside the <head></style>
<script>Same goes for JavaScript</script>
</head>
<body>
<div id="header">
<div id="nav" />
and other stuff that goes in the header
</div>

<div id="main"> <!-- put margin: 0 auto; for this -->
content goes here

<div id="footer" />
</div>
</body>
</html>

[/html][/QUOTE]

I cannot move the CSS anywhere, it is automatically inserted via SQL, When logged in the "Modify Template" page has Header/Footer/CSS and installs them into the site separately in order.

I can try to switch over to div for the main table let me try, not sure how the rest of the site will react.

Update: Changed to DIV and no results, the site is still going left or right will not center. margin: 0 auto, margin-left: auto; margin-right: auto, even align="center" had no effect.

Any other ideas?

[mokkan]

[QUOTE=Zyphos;27560491]Wait seriously? The only thing i could guess would do that is the background image... Let me try to remove that. Thats weird though cause i don't have a horizontal scrollbar.

Update: The background image did not effect it at all.

[editline]21st January 2011[/editline]

This is what starts the content on my site:

<div class="header-top"> </div>
<div class="header-main"> </div>
<div class="body-main"> </div>
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="maintable" align="center">

From here on forth the PHP files kick in and fill in the rest.

As for CSS the classes listed above are here:

.maintable {
    background: #000000 url('');
    background-position: top center;
    background-repeat: repeat-x;
    position: absolute;
    padding: 15px;
    width:1000px;
    top: 141px;
    z-index: 0;
    opacity: 0.90;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);  
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -khtml-border-bottom-right-radius: 15px;
    -khtml-border-bottom-left-radius: 15px;
    -khtml-border-top-right-radius: 15px;
    -khtml-border-top-left-radius: 15px;
}

.mainfooter {
    background: #000000 url('images/Blue/console.png');
    background-position: top center;
    background-repeat: repeat-x;
    width: 100%;
    z-index: 1;
    text-align: bottom;
    color: #FFF;
    font-family: Tahoma;
    font-size: 11px;
    opacity: 0.98;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=98);  
    -moz-border-radius:15px 15px 15px 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -khtml-border-bottom-right-radius: 15px;
    -khtml-border-bottom-left-radius: 15px;
    -khtml-border-top-right-radius: 15px;
    -khtml-border-top-left-radius: 15px;
}

.header-top {
    background: #021743 url('images/Blue/header-overlay.png');
    background-position: top left;
    background-repeat: repeat-x;
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    height: 138px;
    list-style: none;
    z-index:9999;
    width:100%;
}

.header-main {
    background: transparent url('images/Blue/banner.png');
    background-position: top left;
    background-repeat: no-repeat;
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 40px;
    right: 0px;
    left: 0px;
    height: 65px;
    list-style: none;
    z-index:9999;
    width:100%;
}

.body-main {
    background: #310104 url('images/Blue/bgmain.jpg');
    background-position: top left;
    background-repeat: repeat-x;
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 50px;
    right: 0px;
    left: 0px;
    width: 1920px;
    height: 950px;
    list-style: none;
    z-index:-1;
    width:100%;
}

Now again i know im doing something wrong here so be easy on me.[/QUOTE]
[noparse]

code

[/noparse] tags

[Zyphos]

[QUOTE=mokkan;27560582][noparse]

code

[/noparse] tags[/QUOTE]

The body-main width and height were removed if that is what you were referring too, but nothing has changed. Except for the fact the background does not work now.

[BrettJay]

[QUOTE=Zyphos;27560542]I cannot move the CSS anywhere, it is automatically inserted via SQL, When logged in the "Modify Template" page has Header/Footer/CSS and installs them into the site separately in order.

I can try to switch over to div for the main table let me try, not sure how the rest of the site will react.

Update: Changed to DIV and no results, the site is still going left or right will not center. margin: 0 auto, margin-left: auto; margin-right: auto, even align="center" had no effect.

Any other ideas?[/QUOTE]

Get rid of both these declarations:

position: absolute;
top: 141px;

in .maintable (line 196 according to firebug)

change

margin: 0 auto;

to

margin: 141px auto 0;

so now it should look like:

.maintable {
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  background: #000;
  margin: 141px auto 0;
  opacity: 0.9;
  width: 1000px;
  z-index: 0;
}

[mokkan]

[QUOTE=Zyphos;27560605]The body-main width and height were removed if that is what you were referring too, but nothing has changed. Except for the fact the background does not work now.[/QUOTE]

Look at what I quoted, I edited it, put you're text into code tags, so now basically it's just in a scroll box, easier to... view..