SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple I know but how do I center this?

    I am trying to learn CSS and haven't touched it in a looonnnnngg time. Trying to export out of PS CS3 and when I do I tried centering it as a test and can't?

    Can someone tell me what I am doing wrong
    thanks

    http://media-creations.net/test/1.html

  2. #2
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Your images are positioned absolute. You need to make 'em absolute to the parent.
    So add position: relative to #container.

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, how do you write that?

  4. #4
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    #container {
    text-align: left;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    }

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for reply. It worked!! I am trying to understand why that is though.
    Even though the container is supposed to position/control everything it couldn't because the images were absolute. So they were taken out of the flow....separate from the container box is that right?

    By adding the "position: relative;" style in the container does that make all things in the container even if positioned differently relative? I don't get the parent thing?
    Thanks

  6. #6
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Position absolute, is actually RELATIVE to its parent.

    However because your parent (#container) has no position defined, it is inherited from its parents, and so on, in your case its the view port. Thus it positioned itself off of it,

    position relative doesn't pull the content out from the document flow, so it acts as an anchor from which its childs can position off of. Since you centered it, its children are centered.

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got it thanks


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
  •