SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Position Absolute

    I usually avoid this like the black plague, but I was playing around with a CSS Zen garden layout and wondered how I could absolutely position #linkList and keep it's content on top of the left content. I really don't see a way around using absolute positioning in this case. I'm sure I need to add position relative at some point, just not sure how.

    An example can be found here:

    http://midwestwebdesign.net/zen/index.html

    Any help would be appreciated.
    Ryan Butler

    Midwest Web Design

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    and wondered how I could absolutely position #linkList and keep it's content on top of the left content
    You currently have #linkList on top of the other content, what is it you are wanting?

    Absolute positioning is relative to the first ancestor that has a position other than static - the default.
    So if you add position:relative; to #container and position #linkList absolutely top: 0; right: 0; it will be at the top corner of #container

    You can also make floated content overlap by giving a negative margin equal to the width and opposite to the direction of the float. e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .under {
    	float: left; width: 200px; margin-right: -201px; border: 1px solid red;
    }
    .over {
    	float: left; width: 220px;  border: 1px solid green
    }
    </style>
    </head>
    <body>
      <p class="under">Overlapping as if i'm not even there</p>
      <p class="over">I'm under here!</p>
    </body>
    </html>
    Last edited by markbrown4; Sep 25, 2007 at 22:16.

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I need a way to overlap content, because currently, the content in #linkList is interfering with my left content. If I were to use the float approach, how would that affect the positioning of the left content and right?
    Ryan Butler

    Midwest Web Design

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Well, I need a way to overlap content, because currently, the content in #linkList is interfering with my left content.
    No it's not, #linkList is absolutely positioned(removed from the flow) and it's not effecting the other content on the page one bit.

    Are you actually wanting the opposite, where the rest of the content doesn't go underneath your menu?
    You could use margins
    Code:
    #preamble, #explanation { margin-right: 250px}


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
  •