10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

Can Someone Help with Absolute Positioning

by JayGreen
8 replies
  • WEB DESIGN
    • |
I'm trying to float div tags from an image rather than top and left. Is this possible?
Thanks for help in advance.
#absolute #positioning
  • Profile picture of the author Istvan Horvath
    I'm trying to float div tags from an image
    You need to explain this...
    Signature

    {{ DiscussionBoard.errors[3958874].message }}
    • Profile picture of the author JayGreen
      Thanks for helping and I'll try to explain this.
      For example: this <div style="position: absolute; top: 670px; left: 200px;">content</div> will float content from upper left corner of the browser to point specified. I would like to tell browser the starting point (from an image) for floating tags.
      Let me explain a little of what I"m doing. I've designed a php include ajax survey. When user interact with the ajax survey, a new question loads. Each question uses floating div tags to display some of the content. The problem: if I update content around the survey, the height and width of the page may change. So I would have to update ALL survey questions to reflect new floating division positions. Since survey questions can number in the hundreds, this would be a ton of work.
      It would be easier if I could tell my browser where to start floating div tags.
      {{ DiscussionBoard.errors[3959231].message }}
  • Profile picture of the author ussher
    yes it is, you need to give the parent div relative positioning, then the sub elements of that positioned absolutely will be absolute in relation to the parent.
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3959226].message }}
    • Profile picture of the author JayGreen
      Originally Posted by ussher View Post

      yes it is, you need to give the parent div relative positioning, then the sub elements of that positioned absolutely will be absolute in relation to the parent.
      Could you give me an example of this? Thanks.
      {{ DiscussionBoard.errors[3959240].message }}
    • Profile picture of the author JayGreen
      Originally Posted by ussher View Post

      yes it is, you need to give the parent div relative positioning, then the sub elements of that positioned absolutely will be absolute in relation to the parent.
      Got it, thanks for the advice. Worked wonderfully!
      {{ DiscussionBoard.errors[3959346].message }}
  • Profile picture of the author ussher
    Nice one!

    Yeah that can be real easy to trip over to if you start to use absolute stuff in lower levels where there is a relative div above. Confused me more than once.
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3959777].message }}
  • Profile picture of the author Saranya2011
    Can anyone explain it briefly..
    {{ DiscussionBoard.errors[3960903].message }}
  • Profile picture of the author ussher
    Its hard to explain it any more briefly than the posts above, their pretty short, but here is some code to play with:

    <div style="background-color: red; width: 500px; height: 500px; position: relative;">some div<div style="position:absolute;top:10px;right:10px;">ano ther thing</div></div>

    if the top div does _not_ have position:relative on it, the inner div will be positioned relative to the top of the page. so ten pixels down from the top and ten pixels in from the right OF THE SCREEN. but if you add the relative to the parent div then the absolute positioning will be relative to the box it is in.

    so ten pixels down from the top and ten pixels in from the right OF THE PARENT DIV.

    hows that?
    Signature

    "Jamroom is a Profile Centric CMS system suitable as a development framework for building entire communities. Highly modular in concept. Suitable for enterprise level development teams or solo freelancers."

    - jamroom.net
    Download Jamroom free: Download
    {{ DiscussionBoard.errors[3960928].message }}

Trending Topics