centre align for web pages

[tka]

Can anyone tell me how to centre-align a page, and avoid a sideways 'jump' when the scrollbar appears due to some pages being longer than others?

I have used the 100% page width and placed a centred table within, but the movement is ruining the site.

thx so much

[dl65]

tka....what web editor are you using ?


dl65  

[tka]

the perenial dreamweaver... but hand authoring most of the code. any ideas :-) thanks for your reply

[dl65]

tka....It seems to me that the page is still centered .
It's just when the navigation bar appears......it moves things over to the left ......if you check ,I'll bet the page is centred between the left side of the monitor display and the left edge of the navigation bar .....have you tried to drag your page margins over to the right a little ?

let me know or better yet send me the site address via email and I can look at it .

dl65  

[tka]

Hi again dl65

that's exactly what's happening! - if i drag the page window over to the right, the pages all align consistenly. But a user is unlikely to know this, and probably should not be expected to do so. Is there a fix to esnure that the page has a static centered position regardless of whether the scrollbar is present or not?

I'm afraid the page is not ftp'd anywhere yet.

thanks again for your help tka :-/

[dl65]

tka.....If you setup the page ie pull it over .......and I view it ...I will see it the way you set it up .......

hope this helps

dl65  

[dl65]

tka......And by the way........Remember your page may not appear exactly the same in all browsers......for example if you were using say Explorer .....and you viewed it in Netscape ...it may appear slightly different.

dl65  

[tka]

hi again - I've tried setting the page widtht to 90% and 80% and aligning the parent table/td to the left. but as soon as the scrollbar appears the page jumps. When viewed in say safari, the problem disappears as the page height is larger and the page doesn't need to scroll... the pages are based around the same basic template, hense no wild construction variation.

I'm sure i'm not the first person to be frustrated by this little browser quirk?

is there anything that can be done apart from aligning everything to the left and losing the more elegant centre page position the page design was based upon?

thanks lots, tka:~

[Joleen]

Maybe I'm missing something but.. why not specify the width of your page (pixel not percent)?  If it's a graphic which is wider than the page, reduce the graphic.  You could use a table with a specified width and put your text in there.  What I like to do is create the page on 800x600 resolution and specify the width.  Then I create a 'border' page for each side and that's my buffer zone for higher/smaller resolutions (the smaller res just sees the main while higher res sees the borders).  Put it all together with frames.

[Joleen]

Another thing to try is <div></div> with stylesheets.

[tka]

hi joleen

i'd rather avoid frames -  but thanks for the suggestion. my page does indeed float in a 100% wide table,  but the content/page itself is locked into a 800x600 inner table. It is this outer table which is causing the variation in position, based upon the presence of the scrollbar, or not... All pages are consistent (since all scroll) apart from the home page which I have made 800x600 for obvious reasons. It is this jump from the main page to the others which is frustrating, and basically unacceptable.... I'll try using div tags, but suspect the same thing may occur. help (&thx again)

[Joleen]

What about specifying both table widths in pixels and not percent?  I prefer pixels as the size doesn't change from one format or resolution to another.  If you go the <div> route, don't forget to include your CSS.  You could have something like..

#menu {
width: 100px;
border-left: 1px dotted #000000;
border-right: 1px dotted #000000;
border-top: 1px dotted #000000;
border-bottom: 1px dotted #000000;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
float: center;
margin-right: 10px;
}

Don't forget to class your <div>s and adjust values as necessary.

[folklore]

It is difficult for me to see where exactly the problem lies, but if you were going to follow Joleen's suggestion of adding pixel widths instead of percentage widths, you may also try something like this:

<table width=100%>
 <tr>
   <td align=center>
     <table width=800>
       <tr>
         <td align=left>
           Your content here. blah blah blah. your image
           sizes must be less than 800 pixels wide, etc. etc.
         </td>
       </tr>
     </table>
   </td>
 </tr>
</table>

The outer table will make sure that you utilize the whole viewing area of the browser. While the inner table will contain your site contents.

Anything in the outer table can be aligned the way you like it. I prefer doing it this way differently than adding the center attribute in the body, because sometimes you want to center ONLY that specific table cell and not the whole page.

As dl65 requested, a URL to the page would also help, so we can check if you have a specific problem somewhere.

Regards,

FolkLore