Professional Web Applications Themes

CSS: Relative Positioned Column Margin Problem - Macromedia Dynamic HTML

This should a simple one for someone with table-less CSS experience. I'm trying to mimic a look I've seen in a very simple and easy test case. I don't understand why the middle body column doesn't sit evenly between the two surrounding navigation columns on both sides? It currenlty sits way too high. If I hand enter 20 px for a top margin, it doesn't work either. Since it is relative, shouldn't it be picking that up from the navright? Thanks for your help. Chris Probably easiest just to cut and paste this into Dreamweaver: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  1. #1

    Default CSS: Relative Positioned Column Margin Problem

    This should a simple one for someone with table-less CSS experience. I'm trying
    to mimic a look I've seen in a very simple and easy test case. I don't
    understand why the middle body column doesn't sit evenly between the two
    surrounding navigation columns on both sides? It currenlty sits way too high.
    If I hand enter 20 px for a top margin, it doesn't work either. Since it is
    relative, shouldn't it be picking that up from the navright? Thanks for your
    help. Chris

    Probably easiest just to cut and paste this into Dreamweaver:


    <!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; cht=utf-8" />
    <title>Untitled Doent</title>

    <style>

    body {
    background:#006699;

    }

    .content {
    position:relative;
    margin: 0px;
    width: auto;
    min-width: 120px;
    z-index: 3;
    margin: 0 243px 20px 220px;
    padding: 10px;
    border: 1px solid black;
    background-color: white;
    }

    #navleft {
    position: absolute;
    margin: 0px;
    width: 170px;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    background-color: white;
    padding: 10px;
    z-index:2;
    }

    #navright {
    position:absolute;
    margin: 0px;
    width: 193px;
    top: 20px;
    right: 20px;
    border: 1px solid black;
    padding: 10px;
    background-color: white;
    z-index: 1;
    }

    </style>

    </head>


    <body>

    <div class="content">
    <h2>Center Column Body Headline</h2>
    <p>This is a whole bund of body copy that goes here. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
    tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
    purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
    venenatis enim nec quam. Cras faucibus, justo vel acsan aliquam, tellus dui
    fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
    sem placerat iaculis. Curabitur posuere, pede vitae lacinia acsan, enim nibh
    elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
    ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. .</p>
    </div>

    <div class="content">
    <h2>Center Column Body Headline</h2>
    <p>This is a whole bund of body copy that goes here. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
    tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
    purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
    venenatis enim nec quam. Cras faucibus, justo vel acsan aliquam, tellus dui
    fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
    sem placerat iaculis. Curabitur posuere, pede vitae lacinia acsan, enim nibh
    elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
    ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. .</p>
    </div>

    <div class="content">
    <h2>Center Column Body Headline</h2>
    <p>This is a whole bund of body copy that goes here. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
    tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
    purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
    venenatis enim nec quam. Cras faucibus, justo vel acsan aliquam, tellus dui
    fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
    sem placerat iaculis. Curabitur posuere, pede vitae lacinia acsan, enim nibh
    elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
    ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. .</p>
    </div>



    <div id="navleft">
    <h2>Navigation Left</h2>
    <ul>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    </ul>
    </div>


    <div id="navright">
    <h2>Navigation Right</h2>
    <p>This is a bunch of text that goes in this box. This is a bunch of text
    that goes in this box. This is a bunch of text that goes in this box. This is a
    bunch of text that goes in this box. This is a bunch of text that goes in this
    box. This is a bunch of text that goes in this box. This is a bunch of text
    that goes in this box. This is a bunch of text that goes in this box. This is a
    bunch of text that goes in this box. This is a bunch of text that goes in this
    box. This is a bunch of text that goes in this box. </p>
    </div>


    </body>
    </html>

    escargo Guest

  2. #2

    Default Re: CSS: Relative Positioned Column Margin Problem

    Sorry, this question should have been in the general forum and not dynamic.
    escargo Guest

  3. #3

    Default Re: Relative Positioned Column Margin Problem

    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
    ==================


    "escargo" <com> wrote in message
    news:fr6r1t$sc9$macromedia.com... 

    Murray Guest

  4. #4

    Default Re: Relative Positioned Column Margin Problem

    Thanks for the information on the different types. The examples were helpful.

    The answer to the problem is that I needed to make the body margin 0px and the
    ..content top margin 20px. This solved the problem.

    For anyone interested, here is the final updated code:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; cht=utf-8" />
    <title>Untitled Doent</title>

    <style>

    body {
    background:#006699;
    margin: 0;

    }

    .content {
    position:relative;
    width: auto;
    min-width: 120px;
    z-index: 3;
    margin: 20px 243px 20px 220px;
    padding: 10px;
    border: 1px solid black;
    background-color: white;
    }

    #navleft {
    position: absolute;
    margin: 0px;
    width: 170px;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    background-color: white;
    padding: 10px;
    z-index:2;
    }

    #navright {
    position:absolute;
    margin: 0px;
    width: 193px;
    top: 20px;
    right: 20px;
    border: 1px solid black;
    padding: 10px;
    background-color: white;
    z-index: 1;
    }

    </style>

    </head>


    <body>

    <div class="content">
    <h2>Center Column Body Headline</h2>
    <p>This is a whole bund of body copy that goes here. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
    tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
    purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
    venenatis enim nec quam. Cras faucibus, justo vel acsan aliquam, tellus dui
    fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
    sem placerat iaculis. Curabitur posuere, pede vitae lacinia acsan, enim nibh
    elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
    ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. .</p>
    </div>

    <div class="content">
    <h2>Center Column Body Headline</h2>
    <p>This is a whole bund of body copy that goes here. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
    tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
    purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
    venenatis enim nec quam. Cras faucibus, justo vel acsan aliquam, tellus dui
    fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
    sem placerat iaculis. Curabitur posuere, pede vitae lacinia acsan, enim nibh
    elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
    ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. .</p>
    </div>

    <div class="content">
    <h2>Center Column Body Headline</h2>
    <p>This is a whole bund of body copy that goes here. Lorem ipsum dolor sit
    amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget,
    tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae
    purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc
    venenatis enim nec quam. Cras faucibus, justo vel acsan aliquam, tellus dui
    fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
    sem placerat iaculis. Curabitur posuere, pede vitae lacinia acsan, enim nibh
    elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu,
    ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. .</p>
    </div>



    <div id="navleft">
    <h2>Navigation Left</h2>
    <ul>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    <li>Item Here</li>
    </ul>
    </div>


    <div id="navright">
    <h2>Navigation Right</h2>
    <p>This is a bunch of text that goes in this box. This is a bunch of text
    that goes in this box. This is a bunch of text that goes in this box. This is a
    bunch of text that goes in this box. This is a bunch of text that goes in this
    box. This is a bunch of text that goes in this box. This is a bunch of text
    that goes in this box. This is a bunch of text that goes in this box. This is a
    bunch of text that goes in this box. This is a bunch of text that goes in this
    box. This is a bunch of text that goes in this box. </p>
    </div>


    </body>
    </html>

    escargo Guest

Similar Threads

  1. Unwanted margin-top and margin-bottom styles
    By John Geddes in forum Macromedia Contribute General Discussion
    Replies: 6
    Last Post: May 20th, 06:32 PM
  2. <li>s get separed if contain a positioned <a>
    By giuseppe in forum Macromedia Dynamic HTML
    Replies: 2
    Last Post: January 4th, 03:49 PM
  3. doent relative/site root relative linking
    By Kindler Chase in forum Macromedia Dreamweaver
    Replies: 3
    Last Post: July 23rd, 08:38 PM
  4. Site relative or doent relative links prob.
    By Paul Anthony webforumsuser@macromedia.com in forum Macromedia Dreamweaver
    Replies: 0
    Last Post: July 21st, 08:38 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