Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css design loading in the wrong place until fully loaded?

    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
    Billy

  • #2
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Any ideas on this issue?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    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 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:

    Code:
    <div id="container">
      <div id="header">
        (logo, search, and navigation items)
      </div>
      <div id="content">
        (main content)
      </div>
      <div id="footer">
        (copyright and legal stuff, etc.)
      </div>
    </div>
    You would center your page by applying a width to the container and a left and right margin of auto:
    Code:
    #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 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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •