View Full Version : Css design loading in the wrong place until fully loaded?

Jan 29th, 2007, 06:58 PM
Hello this is my first post so please be Gentle!

I am just learning CSS design conceptss and have been using the Dreamweaver behavior from Studio VII and it works great but for one issue.

When this page www.jacksonshg.com/newjhg
Loads it is left justified and when it finishes loading it moves to the center where I want it to be for all screen resolutions.

Can anyone help me understand what I am doing wrong and offer a solid fix.

Thanks in advance

Jan 30th, 2007, 04:34 PM
Any ideas on this issue?

Jan 30th, 2007, 05:36 PM
That seems like something is resized after the site is completely loaded. It always starts at the same position and gets centered based on the window size If the window is smaller it's jumping slightly to the left.

I can't say for sure what it is but what I can say is that this can only be solved/gotten rid of by building up the page from scratch using semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/) formatted with proper CSS. This is the tyical automatic Dreamweaver layout generator layout. If you're serious about your job (as web designer) then you should either know what you are doing (coding wise) or give this task to someone who knows.

Wait, I just had an idea. Looks like one funcion of this huge JavaScript is determining the size of the window and positioning the page in the center. And this is only happening after the page has completely loaded. I can see if I resize the window it's not moving along smoothly but jumping after I stopped resizing.

There's an easier and better way to center a page with CSS but this will only work if you rebuild your page properly. And your current mass of code doesn't really use the actual advantages of CSS based layouts (smaller file size, faster loading time, cleaner code and structure separated from style).

Your general layout seems pretty simple. If you're gonna keep the images under the big main image as they are you could start with structuring your document like this:

<div id="container">
<div id="header">
(logo, search, and navigation items)
<div id="content">
(main content)
<div id="footer">
(copyright and legal stuff, etc.)

You would center your page by applying a width to the container and a left and right margin of auto:

#container {
width: 750px;
margin: auto; /* sets margin for top, right, bottom, left all at once - important is left and right margins get auto */

This should be enough for now. The rest is up to you. Learn HTML and CSS (http://htmldog.com) or pay someone if you don't wanna learn and still have a good page. If you decide to learn we're certainly happy to help you with specific problems.