Professional Web Applications Themes

CSS and Absolute vs. relative position - Macromedia Dynamic HTML

1. I'm finding that when I use absolute position to place a table on a page, it changes the user's ability to highlight the text in that table or cell. (i.e. what happens is that they go to highlight and other parts of the page end up being selected, not what the users is trying to highlight) When I switch the page to using relative positioning for tables, this problem goes away. Is there a reason this is happening? 2. Absolute positioning obviously gives me more precision over where elements are placed. I don't seem to understand how relative positioning ...

  1. #1

    Default CSS and Absolute vs. relative position

    1. I'm finding that when I use absolute position to place a table on a page,
    it changes the user's ability to highlight the text in that table or cell.
    (i.e. what happens is that they go to highlight and other parts of the page end
    up being selected, not what the users is trying to highlight)

    When I switch the page to using relative positioning for tables, this problem
    goes away.

    Is there a reason this is happening?


    2. Absolute positioning obviously gives me more precision over where elements
    are placed. I don't seem to understand how relative positioning works. What
    is it *relative* to? Does someone know a good, simple, tutorial that will
    help me understand CSS, positioning, etc.?


    3. I have a page that I'd like to have one object in the top left corner and
    one in the top right corner. The page is fluid. How do I get each object into
    their respective corners?

    Thank you.


    michael munson
    org

    tgwarrior31 Guest

  2. #2

    Default Re: CSS and Absolute vs. relative position

    This may help you understand positioning a bit -

    There are 4 different types of positioning:
    Absolute
    Relative
    Fixed
    Static

    Here is a brief explanation of each kind of positioning (with regard to
    placement of elements on the page only)....

    Position:absolute (or A/P elements)
    -----------------------
    This does several things -
    1. It 'removes' the element from the flow of the code on the page so that
    it can no longer influence the size or position of any other page element
    (except for those contained within it, of course).

    2. The absolutely positioned element takes its position from the position of
    its closest PARENT *positioned* element - in the absence of any explicitly
    positioned parent, this will default to the <body> tag, which is always
    positioned
    at 0,0 in the browser viewport.

    This means that it doesn't matter where in the HTML code the layer's code
    appears (between <body> and </body>), its location on the screen will not
    change (this assumes that you have not positioned the A/P element within
    a table or another A/P element, of course). Furthermore, the space in
    which
    this element would have appeared were it not positioned is not preserved
    on the screen. In other words, absolutely positioned elements don't take
    up any space on the page. In fact, they FLOAT over the page.

    Position:relative (or R/P elements)
    ----------------------
    In contrast to absolute positioning, a relatively positioned page element is
    *not* removed from the flow of the code on the page, so it will use the
    spot
    where it would have appeared based on its position in the code as its
    zero point reference. If you then supply top, right, bottom, or left
    positions
    to the style for this element, those values will be used as offsets from
    its
    zero point.

    This means that it DOES matter where in the code the relatively positioned
    element appears (, as it will be positioned in that location (factoring in
    the offsets) on the screen (this is true for any placement in the code).
    Furthermore, the space where this element would have appeared is
    preserved in the display, and can therefore affect the placement of
    succeeding elements. This means that the taller a relatively
    positioned element is, the more space it forces on the page.

    Position:static
    -------------------
    As with relative position, static positions also "go with the flow". An
    element with a static position cannot have values for offsets (top, right,
    left, bottom) or if it has them, they will be ignored. Unless explicitly
    positioned, all div elements default to static positioning.

    Position:fixed
    ------------------
    A page element with this style will not scroll as the page content scrolls.
    Support for this in elements other than page backgrounds is quirky

    There are several other things you need to know:

    1. ANY page element can be positioned - paragraphs, tables, images, lists,
    etc.
    2. The <div> tag is a BLOCK level tag. This means that if it is not
    positioned or explicitly styled otherwise, a) it will always begin on a new
    line on the screen, and b) it will always force content to a new line below
    it, and c) it will always take up the entire width of its container (i.e.,
    width:100%).
    3. The placement of A/P elements *can* affect the BEHAVIOR of other
    elements
    on the page. For example, a 'layer' placed over a hyperlink will mask that
    hyperlink.

    You can see a good example of the essential difference between absolute and
    relative positioning here -

    http://www.great-web-sights.com/g_layersdemo.asp

    You can see a good demonstration of why using layers for a page layout tool
    is dangerous here -

    http://www.great-web-sights.com/g_layer-overlap.asp


    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    ==================


    "tgwarrior31" <com> wrote in message
    news:futv3h$gil$macromedia.com... 

    Murray Guest

  3. #3

    Default Re: CSS and Absolute vs. relative position

    Thanks for your explanation. I think i already understood the basics of what
    you wrote, however....

    Here are two examples -- one of relative positioning (
    http://www.forge-forward.org/HIV/ ) and one of absolute positioning (
    http://www.forge-forward.org/transviolence/nopitytshirt.php ).

    The one with absolute positioning doesn't allow end users to cut and paste
    text.

    I also realized that in BOTH cases, the object positioned is a table rather
    than just a block of code that is formatted with CSS.

    Does it matter that a TABLE is being positioned vs. anything else?

    (I wish I could better articulate what the issue is.)

    Thanks for your help.

    michael munson
    org

    tgwarrior Guest

  4. #4

    Default Re: CSS and Absolute vs. relative position

    Cut and paste text? Where? Why?
     

    No. Positioning is positioning whether it's a <p> or a <table> or a <div>.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs, Tutorials & Resources
    ==================


    "tgwarrior" <com> wrote in message
    news:fv64l9$5kt$macromedia.com... 

    Murray Guest

Similar Threads

  1. Absolute vs. Relative Paths?
    By Westmatrix99 in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 2
    Last Post: April 16th, 05:19 PM
  2. absolute or relative _x/_y coordinates
    By Vevmesteren webforumsuser@macromedia.com in forum Macromedia Flash Actionscript
    Replies: 2
    Last Post: January 27th, 09:16 PM
  3. Combining an absolute and relative Url
    By Joe in forum PHP Development
    Replies: 3
    Last Post: January 9th, 04:10 PM
  4. require and do - absolute vs relative - let me try again
    By Derf in forum PERL Miscellaneous
    Replies: 2
    Last Post: October 7th, 01:54 AM

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
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139