DIV Positioning, question

Discussion in 'CSS' started by jmueller0823, Jan 18, 2011.

  1. #1
    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:
    *{ 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
    Code (markup):
    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 occurring?

    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.
     
    jmueller0823, Jan 18, 2011 IP
  2. atxsurf

    atxsurf Peon

    Messages:
    2,394
    Likes Received:
    21
    Best Answers:
    1
    Trophy Points:
    0
    #2
    because whoever invented css should be shot in the head
    it works differently in different browsers and has lot of other ambiguous crap I can;t comprehend
    as opposed to more descent technologies languages data translating such xslt
    good luck
     
    atxsurf, Jan 18, 2011 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Noway to blame just CSS, mostly older browser (read IE) is inept and interpret in a different way.

    Anyways, that's not the issue with your code. positioned with absolute value is causing.

    The main image holder of the page,
    
    <div style="position: [U]absolute[/U]; width: 249px; height: 115px; z-index: 2; left: 468px; top: 182px;" id="Layer1">
    
    Code (markup):
    No need of absolute positioning.
     
    radiant_luv, Jan 18, 2011 IP
  4. jmueller0823

    jmueller0823 Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #4
    Radiant, thanks.

    Could you elaborate please? Not sure what you mean.
     
    jmueller0823, Jan 20, 2011 IP
  5. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #5
    
    <div style="[COLOR="red"]position: absolute; [/COLOR]width: 249px; height: 115px; z-index: 2; left: 468px; top: 182px;" id="Layer1">
    
    Code (markup):
    Remove the part in red from the HTML mark up.
     
    radiant_luv, Jan 20, 2011 IP
  6. jmueller0823

    jmueller0823 Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #6
    Okay. I removed the "absolute positioning". The code looks like:

    <body>
    <div id="wrapper">
    
      <div style="top: 551px; left: 199px; z-index:1; border: 0px; width: 470px; height: 43px"> 
      // content
      </div>
    
    </div>
    </body>
    Code (markup):
    Wondering if that's correct. It seems that now, I cannot position the layer. Changing the 'top' or 'left' settings have no effect.

    Thanks.
     
    jmueller0823, Jan 22, 2011 IP
  7. Dodger

    Dodger Peon

    Messages:
    1,494
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    0
    #7
    You may not need to position the boxes. It depends on what is coming before and after it. But in the meantime, for that particular box you would want to change the position from absolute to relative.

    <div style="position: [color=red]relative[/color]; width: 249px; height: 115px; z-index: 2; left: 468px; top: 182px;" id="Layer1">
    Code (markup):
    The reason is simple. It was absolute before because the positioning was fixed for the entire page. You adjusted with with a centered wrapper div, now you have to base the position relative to that div, or the div it follows (in which case you may have to tweak the left and top attributes accordingly)
     
    Dodger, Jan 22, 2011 IP
  8. jmueller0823

    jmueller0823 Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #8
    Dodger, thanks (again). I'll give it a shot.
     
    jmueller0823, Jan 22, 2011 IP
  9. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #9
    Is there more best way to insult? one being ignorant on the subject but choose insult someone who is trying to help.
    When you do not have a element positioned , why would you need top or left or right for referene (That's basics)? try going through basics. First of all there is no need of that Block to be positioned if you know how to place and use the html elements. It's because the markup is wrong all efforts are to fix through CSS.

    And one doesn't even need of a relative positioning that block, why to have more styles/codes when it is not not required and can be done in a optmized manner.

    All I can see, DIV 1 is Relative, inside that DIV 2 Absolute and there are <br> pushing the <DIV1> so efforts to push the DIV1 using -Ve value for top. Remove all position and the <br>s , you'll have your issues sorted. anyways, remain at your own will, make it more complex layout even works, why not.
     
    Last edited: Jan 22, 2011
    radiant_luv, Jan 22, 2011 IP
  10. jmueller0823

    jmueller0823 Member

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #10
    Success!

    Follow-up question . . .

    --Please see this page: http://www.growth trac dot com/dating/
    --Note the bullet lists
    --The bullets are not indenting (they did before the page was centered)
    --The lists are simply:
    
    <ul style='list-style-image: url(http://d1tqw2pkoqqxbc.cloudfront.net/bullet3.gif)'>
    <li>content</li>
    </ul>
    Code (markup):
    Ideas anyone?

    Thanks.
     
    jmueller0823, Jan 27, 2011 IP