SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    597
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Position Absolute

    Hello,

    I know I believe I've done this before I'm using position: absolute for a div 1000px wide then giving it a margin of auto to center it but it doesnt center it.

    Here is the URL

    http://modocom.ca/amp

    The div is the Steve div with the illustration in it, I'm trying to get it so the whole div is centered but doesnt seem to work, I'm sure I'm missing something minor, cant just think of it right now.

    Thanks,

    Mike

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    AP elements do not center with auto margins, they are removed from the normal page flow.

    Have a look here to see how to center a fixed width AP element.

    If your AP div is nested in a wrapping div then you will need to use position:relative; on the wrapping div to establish a containing block.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    597
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect!!! Thanks!!!

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2009
    Posts
    597
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    One other question now, back to the same URL...

    http://modocom.ca/amp/

    If you roll over the Illustration Speech bubble pops up, is it possible to make the speech bubble visible first using the way I did it, maybe just for 5 seconds or something then go away then come up everytime you rollover the illustration. Also I have the triangle at the bottom of the speech bubble is it possible to position it on the side of the speech bubble instead of the bottom.

    Thanks,

    Mike

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    is it possible to make the speech bubble visible first using the way I did it, maybe just for 5 seconds or something then go away
    You really need JavaScript for that sort of thing.

    I have the triangle at the bottom of the speech bubble is it possible to position it on the side of the speech bubble instead of the bottom.
    Yes. Modify your code thus:

    Code:
    a.tip:hover span:after {
      position: absolute;
      display: block;
      content: ""; 
      border-color:  transparent rgba(0,0,0,.6) transparent transparent;
      border-style: solid;
      border-width: 10px;
      height:0;
      width:0;
      position:absolute;
      top: 20px;
      left:-20px;
    }

  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use below code to center align.
    margin:0 auto;

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,585
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by 2Good View Post
    I use below code to center align.
    margin:0 auto;
    Yup, that's great ... but, as pointed out above, that doesn't work on elements that are positioned absolutely.

  8. #8
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yup, that's great ... but, as pointed out above, that doesn't work on elements that are positioned absolutely.
    Maybe this one help you which i quoted from yahoo answers.

    You really shouldn't use inline styling like that. I suggest you give the div a class name like this -

    <div class="some">SOME</div>

    Then in your external css file, do this -

    .some {
    position: absolute;
    top:20px;
    text-align:center;
    }

    If you create a classname and assign it to any number of divs then need to change something, you can edit that style in your css file once.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Rayzur View Post
    AP elements do not center with auto margins, they are removed from the normal page flow.
    Actually Ray auto margins will center absolute elements as long as they have a width defined and are also left:0 and right:0 and then auto margins will work.

    e.g.
    Code:
    #AP-centered {
    	position: absolute;
    	width: 250px;
    	height:200px;
    	background:red;
    	left:0;
    	right:0;
    	margin:auto;
    }
    People used to think that auto margins didn't work on absolute elements because IE7 and under got it wrong but was fixed in IE8+. Other browsers have always centred using auto margins as long as width and left:0 and right:0 are also defined.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Actually Ray auto margins will center absolute elements as long as they have a width defined and are also left:0 and right:0 and then auto margins will work.

    e.g.
    Code:
    #AP-centered {
    	position: absolute;
    	width: 250px;
    	height:200px;
    	background:red;
    	left:0;
    	right:0;
    	margin:auto;
    }
    People used to think that auto margins didn't work on absolute elements because IE7 and under got it wrong and wouldn't centre but this was fixed in IE8+. Other browsers have always centred using auto margins as long as width and left:0 and right:0 are also defined.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Actually Ray auto margins will center absolute elements as long as they have a width defined and are also left:0 and right:0 and then auto margins will work.
    Hi Paul,
    Thanks for pointing that out, I stand corrected. I always forget about that because I never use it.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,775
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi Paul,
    Thanks for pointing that out, I stand corrected. I always forget about that because I never use it.
    Yes most people don't know about it because IE7 and under never supported it and therefore did not come into common use. However these days it can be used now that ie7 support is low and avoids the element sliding off the page when the negative margin technique is used on a fluid page wrapper.


Bookmarks

Posting Permissions

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