Results 1 to 4 of 4
  1. #1
    Join Date
    Mar 2005
    Location
    Nantes, France
    Posts
    21

    [CSS] div relative positionning

    Hello
    i've got two questions :
    1. is it possible to have a good div positionning relative to an object of my page ? (the problem there is that when i use position: relative with 2 or more layers following, their content is took into account and the positionning is not from relative to the same location of the page for each of them)

    http://img73.imageshack.us/img73/4969/sanstitre11cz.gif


    2. it is possible to have "inline" divs which contains <br /> and tables (so they contains lines breaks). I use positionning for 2 or more divs followings. When i put display: inline or i replace <div by <span those line breaks are took into account and the positionning is not from the same line for all of them. I would have those divs like pictures in which i can put what i want

    thanks

  2. #2
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,222
    2. I believe if you declare position:absolute on a block-level element and do not set left and top coordinates you will achieve the desired effect
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  3. #3
    Join Date
    Mar 2005
    Location
    Nantes, France
    Posts
    21
    2. i can't do that.
    Explanation : i want to put dynamically "bubbles" of contents on a chronological plank, i calculate the spacing between bubbles, if they are superimposed i put the bubble down, else i let it on the same line
    without any line breaks, there is no problem, i can have :
    bubble1 bubble2......bubble4
    .......................bubble3

    but with line breaks, the alignment of next bubbles is based on the bottom of the previous one (and incidentally absolutely breaks div contents, i don't understand why)

    on the picture below, you can see what i get (all bubbles are directly followings)

    no dispaly directive :
    http://img145.imageshack.us/img145/6...stitre16nf.gif


    display: inline (the only difference)
    http://img145.imageshack.us/img145/1...stitre26ev.gif

  4. #4
    Join Date
    Mar 2005
    Location
    Nantes, France
    Posts
    21
    (in fact, i cant position my layers horizontally with them apparently being top aligned)


    PHP Code:
    <div style="display: inline; position: relative; left: 125px; top: 0px; width: 200px; z-index: 1;">
    <
    img src="images/bulle-haut.gif" width="200" height="21">
    <
    table cellspacing="0" cellpadding="0" border="0" width="200" style="background-image: url('images/bulle-fond.gif');">
    <
    tr><td align="center" class="small">action1<br />
    action2<br />
    action3</td></tr>
    </
    table>
    <
    img src="images/bulle-bas.gif" width="200" height="6">
    </
    div>

    <
    div style="display: inline; position: relative; left: 275px; top: 0px; width: 200px; z-index: 1;">
    <
    img src="images/bulle-haut.gif" width="200" height="21">
    <
    table cellspacing="0" cellpadding="0" border="0" width="200" style="background-image: url('images/bulle-fond.gif');">
    <
    tr><td align="center" class="small">action1<br />
    action2<br />
    action3</td></tr>
    </
    table>
    <
    img src="images/bulle-bas.gif" width="200" height="6">
    </
    div>

    <
    div style="display: inline; position: relative; left: 365px; top: 0px; width: 200px; z-index: 1;">
    <
    img src="images/bulle-haut.gif" width="200" height="21">
    <
    table cellspacing="0" cellpadding="0" border="0" width="200" style="background-image: url('images/bulle-fond.gif');">
    <
    tr><td align="center" class="small">azertyuiopqsdfghjklmwxcvbn<br />
    azertyuiopqsdfghjklmwxcvbn<br />
    azertyuiopqsdfghjklmwxcvbn<br />
    azertyuiopqsdfghjklmwxcvbn<br />
    azertyuiopqsdfghjklmwxcvbn</td></tr>
    </
    table>
    <
    img src="images/bulle-bas.gif" width="200" height="6">
    </
    div>

    <
    div style="display: inline; position: relative; left: 575px; top: 0px; width: 200px; z-index: 1;">
    <
    img src="images/bulle-haut.gif" width="200" height="21">
    <
    table cellspacing="0" cellpadding="0" border="0" width="200" style="background-image: url('images/bulle-fond.gif');">
    <
    tr><td align="center" class="small">action1<br />
    action2<br />
    action3</td></tr>
    </
    table>
    <
    img src="images/bulle-bas.gif" width="200" height="6">
    </
    div
    Last edited by tubededentifrice; 07-09-2005 at 12:49 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •