www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] how the heck to center with absolute position

  1. #1
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82

    resolved [RESOLVED] how the heck to center with absolute position

    ok here's my css, I have been looking all over the blasted internet for how to center something in an absolute position but nothing is working..

    Code:
    <div style="position:absolute; width:100%; height:341px;">
          <img src="pics/clinic1.jpg" width="910" id="clinic1" style="position:absolute; top:0; margin-left:auto; margin-right:auto;"/>
          <img src="pics/clinic2.jpg" width="910" id="clinic2" style="position:absolute; top:0; margin-left:auto; margin-right:auto;"/>
            </div>
    I have a script that fades in and out between the images but I needed to know how to put them both in the same spot on the page (centered) so that the effect works right... right now they just appear in the same spot but I cant get them to center. Help??

  2. #2
    Join Date
    Mar 2011
    Posts
    1,140
    Your code looks like you may not have a good understanding of position:absolute, but it's hard to tell from a code snippet that you may have edited to present here. For example, there's no 'top' or 'left' properties in the <div> and you've got it set to width:100%. That's almost self-contradictory unless you only need to control the vertical position of the <div>.

    As shown, you'd probably get something close to what you want by removing the 'position' property from the <img> tags. With those tags set to position:absolute, the margin settings are ineffective. position:absolute removes the element from the normal document flow, so there's nothing for the margins to be aligned against. It might even be best to remove everything in the 'style' attribute of the <div> tag. My advice would be to start with:
    Code:
    <div style="text-align:center;">
          <img src="pics/clinic1.jpg" id="clinic1" style="width:910px;"/>
          <img src="pics/clinic2.jpg" id="clinic2" style="width:910px;"/>
    </div>
    and see if that's closer to what you want.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82
    well they are centered now, but they are appearing as static, as if there is a <br> inbetween them.. they are still fading in and out, but I need them to appear as if they are layered on top of each other. and with style="top:0px;" it wouldn't work because there is no positioning applied to the image other than static if I do it that way.

  4. #4
    Join Date
    Mar 2012
    Posts
    1,556
    margin is the wrong attribute for absolute positioning. Use left and right for horizontal positioning, top and bottom for vertical. E.g.

    position:absolute;
    left:auto;
    right:auto;

  5. #5
    Join Date
    Mar 2011
    Posts
    1,140
    I didn't realize you wanted these images on top of each other. It reminded me of a trick I'd learned a while ago using a negative margin on positioned elements. Try:
    Code:
    <style type="text/css">
    #clinicBox { position:relative; top:0; left:0; height:341px; }
    #clinicBox img { position:absolute; top:0; left:50%; width:910px; margin-left:-455px; }
    #clinic1 { z-index:1; }
    #clinic2 { z-index:2; }
    </style>
    <div id="clinicBox">
          <img src="pics/clinic1.jpg" id="clinic1"/>
          <img src="pics/clinic2.jpg" id="clinic2"/>
    </div>
    This code should keep the images centered no matter how wide or narrow the containing <div> is set, and the images will be stacked on top of one another.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Oct 2011
    Location
    Hamilton, Ontario
    Posts
    82
    thx to everyone... doing this:
    Code:
    position:absolute; right:auto; left:auto;
    didn't work, but I did figure out a work around... it works great
    Code:
    <div style="position:absolute; text-align:center; width:98%; height:341px; top:0px;" align='center'>
                <img src="pics/clinic1.jpg" width="910" id="clinic1"/></div>
            <div style="position:absolute; text-align:center; width:98%; height:341px; top:0px;" align='center'>
                <img src="pics/clinic2.jpg" width="910" id="clinic2"/></div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles