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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV Positioning, question

    Our site (ten years old) is primarily built on tables, fixed width, etc. We use css extensively, but the tables are still utilized. Sort of a "hybrid" design that will do until we transition to a pure css design.

    On the home page, there are several elements that are contained in absolute-positioned DIVs.

    Please see growth trac dot com
    Note the page is left-justified. All is well.

    We want to re-position the pages to center, so we've deployed the code below on a test page:

    Code:
    *{ margin:0;  padding:0;  } 
    body
    	{
    	text-align: center;
    	margin: 5px;
    	background:  #CBC9B9;
    	color : #000;
    	}
    	
    
    #wrapper
    {
         width:960px;
         margin:0 auto;
         width: 50em;
         text-align: left;
    }
    
    <body>
    <div id="wrapper">
    // content
    </div>
    </body
    The result: growth trac dot com/index-center.php

    QUESTION
    The positioning of the DIVs seems to vary depending on screen resolution.
    Previously (before the "centering change"), the DIVs were consistent across all resolutions.

    >> Why is this occuring?

    PLEASE NOTE: We know the code is a mess. We'd like to make a "fix" to make this work-- and at a future date, do a re-design.

    Thanks much.

  • #2
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,368
    Thanks
    262
    Thanked 32 Times in 31 Posts
    ok if i understand you were left justified then you went to center and now screen resolution affects you..

    well left is allways a constant on any resolution, the other three sides are not.. so if you build it left justified your safe, any other way and your not..

    thats why i always try to use % such as width 50% and such because 50% of 800x600 is the same as 50% of 1024x760 from a page point of view but

    50px of 800x600 is dif than 50px of 1024x760...

    i always use percent when i can..

    sorry had to add this, ill bet you since your build by tables that all your tables are set to px not %..

    does that help
    Last edited by durangod; 11-22-2010 at 05:41 PM.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Since you will eventually do away with tables, why not wrap everything in a wrapper div. Then in your style sheet, set #wrapper div a width less that the width of your screen resolution, and then set margin to auto. Like so:

    Code:
    <body>
    <div id="wrapper">
    All your page content
    in here.
    
    </div>
    </body>
    
    
    CSS-----
    
    #wrapper{
         width: 960px;
         margin: auto;
    
    }

  • #4
    New Coder
    Join Date
    Mar 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    durangod, thanks. Yep, our tables are set with pixels -- not percent.

    teedoff -- isn't that what we're doing? (We're using a wrapper div)
    Please see durangod's post . . .

    Is this a worthwhile exercise, since our tables (site-wide) are set with pixels?

    Thanks guys.

  • #5
    Senior Coder
    Join Date
    Nov 2010
    Posts
    1,368
    Thanks
    262
    Thanked 32 Times in 31 Posts
    i could be wrong but i think your still going to run into issues even with the wrapper, it will help but i dont think it will be a total solution..


    dont know your situation completely but wanted to add this..

    not sure how big the site is or how labor intensive it would be to go in and change all the tables but if you do just remember dont get lost in the table and sub table layers..

    this might help you.

    lets say the top layer table is 100%, that is 100% of the whole page...

    now if i have a sub table that is 50% (half the page)and then another sub table that is 100%.
    then that third layer table is only 100% of 50% of the page, so basically its saying its 100% of half the page,
    does that make sense lol

    just fyi, hope you get it worked out ..

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by jmueller0823 View Post
    durangod, thanks. Yep, our tables are set with pixels -- not percent.

    teedoff -- isn't that what we're doing? (We're using a wrapper div)
    Please see durangod's post . . .

    Is this a worthwhile exercise, since our tables (site-wide) are set with pixels?

    Thanks guys.
    lol you are right. thats what I get for doing 10 things at once and not reading the entire post. I thought you were saying your pages were built with table layouts, and wanted everything to now be centered. Sorry.

  • #7
    New Coder
    Join Date
    Mar 2005
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guys, thanks for the reality check.

    I think it's best to wait, as the work would be significant -- ~ 20 templates, 4,000 pages . . .


  •  

    Posting Permissions

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