[SOLVED] page centering issues

VanderBOOM · #1 (**permalink**) Nov 29th, 2007, 09:15

Can anyone explain the following:

On my indexpage I run a slideshow using javascript.

I have centered my page using:

<body LEFTMARGIN=0 TOPMARGIN=0 onLoad="runSlideShow()">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
.....rest of code

so far so good, but when I switch to another page without javascript also centering using the code:

Code: Select all

<body LEFTMARGIN=0 TOPMARGIN=0>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
.....rest of code

a shift occurs of 5 pixels to the left, and 8 pixels to the top. I can prevent this by just putting a <script></script> in the header of the other page. But I would like to understand why this happens.

http://www.cosmicwebdesign.nl/akker/index.php
http://www.cosmicwebdesign.nl/akker/kbp1.php

MikeHopley · #2 (**permalink**) Nov 29th, 2007, 10:07

Your code is invalid, with 24 HTML errors. Fix them first, then see whether you still have the problem.

Note also that this is a bad method for centring your site and controlling margins. Use CSS instead.

karinne · #3 (**permalink**) Nov 29th, 2007, 12:20

Use CSS to center you site - How do I center my site horizontally?

VanderBOOM · #4 (**permalink**) Nov 29th, 2007, 16:56

I will buy a CSS bible, to see whether I can solve the problem. I need to center my page in both directions (not only horizontally). I found out that the (bad) way I'm using, gives me the results I want, except for this strange javascript behaviour.

karinne · #5 (**permalink**) Nov 29th, 2007, 17:00

How to centre horizontally and vertically?

VanderBOOM · #6 (**permalink**) Dec 3rd, 2007, 14:18

Since I'm not very into CSS (haven't received my bible yet

),
I've come up with this code in the header

Code: Select all

<style type="text/css" media="screen">
<!--
/* commented backslash hack for ie5mac \*/ 
html, body{height:100%;} 
html,body {margin:0;padding:0;}
/* end hack */
#verticaal{
 position:absolute;
 top:50%;
 margin-top:-282px;/* half height*/
 width:100%;
}
#horizontaal {
 position:absolute;
 left:50%;
 margin-left:-400px;/* half width*/
 height:100%;
}
-->
</style>

:

and used

Code: Select all

<div id="verticaal"> 
<div id="horizontaal">
pageitems to center
in my case a table....
</div>
</div>

I hope this is the correct way to center my page in both directions ?
If so, thanks for pointing me in the right direction !

MikeHopley · #7 (**permalink**) Dec 3rd, 2007, 14:22

My god, what hideous code!

All you need is { margin: 0 auto; }.

VanderBOOM · #8 (**permalink**) Dec 4th, 2007, 14:13

Quote:

Originally Posted by MikeHopley

My god, what hideous code!

All you need is { margin: 0 auto; }.

Just grapped the code from the examples Karinne was pointing me to.....

I ordered my CSS bible, so within no time I will understand more about the mountains and pitfalls of it.

MikeHopley · #9 (**permalink**) Dec 4th, 2007, 14:43

My mistake: you're centring vertically as well (what a weird thing to do). {margin: 0 auto } will not suffice.

Rakuli · #10 (**permalink**) Dec 4th, 2007, 14:55

Moving to CSS forum

VanderBOOM · #11 (**permalink**) Dec 4th, 2007, 14:55

I thought you where aiming at

Code: Select all

html, body{height:100%;} 
html,body {margin:0;padding:0;}

because I already found out that what you proposed only sets the starting position to the left uppercorner.

Quote:

Originally Posted by MikeHopley

what a weird thing to do

I love to make centered pages

it's a kind of house-style, and they sell very well ! My problems started when I used javascript to make a slide show on one page......

But everything works fine now

Marc · #12 (**permalink**) Dec 4th, 2007, 14:58

So.. The problem is solved?

VanderBOOM · #13 (**permalink**) Dec 4th, 2007, 15:06

Yes it is. CSS did the trick, although I haven't figured out what the real problem was using the (wrong)centering way as earlier discribed. Another good thing is that centering with CSS gives good results in IE7 when the zoom function is used.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Centering a Page In CSS	britishchampion	Web Page Design	5	Jan 3rd, 2008 16:20
[SOLVED] Centering a layer based page for different screen sizes?	Mulith	Starting Out	11	Oct 31st, 2007 02:40
[SOLVED] Centering an image with CSS without moving anything else on the page.	Ed	Web Page Design	5	Oct 29th, 2007 11:34
Need Help Centering my index page???	0413	Starting Out	6	Jun 9th, 2007 06:40
Centering page question	bklcomputing	Web Page Design	1	May 20th, 2005 18:49

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] page centering issues