#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Enschede, The Netherlands
    Posts
    31
    Rep Power
    13

    position an image within a textblock with css


    Is there a way to position an image 'absolute' in a textblock using css?
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    <html>
    <head>
    <title>untitled</title>
    </head>
    <body>
    <div style="position:relative;font-size:24px;">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    <img style="position:absolute;left:0px;top:0px;" src="http://forums.devshed.com/images/devtitle.gif">
    </div>
    </body>
    </html>

    Keep in mind that absolute positioning removes the element from the document flow, putting it in its own plane above non-absolutely positioned content, with no space cleared for it. Maybe this is more like what you wanted(?):

    <html>
    <head>
    <title>untitled</title>
    </head>
    <body>
    <div style="position:relative;font-size:24px;">
    <img style="position:relative;float:left;" src="http://forums.devshed.com/images/devtitle.gif">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    </body>
    </html>

    http://www.webreference.com/html/tutorial18/
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Enschede, The Netherlands
    Posts
    31
    Rep Power
    13
    Yes, but I also want to give the image a left and top value. When I do this, the image is placed over the text.

    Can I give the image a left and top value?
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16

    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    #box {
    position: relative;
    width: 570px;
    font: 200 16px helvetica;
    padding: 5px;
    border: 1px black solid;
    }

    #pic {
    position: relative;
    float: left;
    margin: 10px 26px 10px 17px;
    border: 3px silver groove;
    }

    </style>
    </head>
    <body>
    <div id="box">
    <img id="pic" src="http://forums.devshed.com/images/devtitle.gif" />
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </div>
    </body>
    </html>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    Enschede, The Netherlands
    Posts
    31
    Rep Power
    13
    Yes, but when I change the left and top value of the pic with a script and it's placed over the text, this text should alter. Now the image floats over the text, while the text should float around it.

IMN logo majestic logo threadwatch logo seochat tools logo