Running text through an image

Discussion in 'HTML' started by Fokke Nauta, Feb 23, 2012.

  1. Fokke Nauta

    Fokke Nauta Guest

    Hi all,

    I have a table with cells. In one of the cells there is text. I also put an
    image there:

    <img class="photo" align="right" src="image.gif" width="150" height="159"
    border="0">

    In the embedded CSS style I have displaced the image so it will partly be in
    another cell:

    ..photo {
    position: relative;
    top: -110px;
    }

    This works well. The problem is, that the text wraps around the area where
    the image is.
    How can I get the text running through this area?

    You can see an example in www.pc3.nl/test/example.htm
    Although the images are not there, you can see the area's where the images
    are. It's about the image in the upper right corner. I want the text in the
    top of the grey cell running
    through the image area.

    Many thanks in advance.

    With best regards,
    Fokke Nauta
     
    Fokke Nauta, Feb 23, 2012
    #1
    1. Advertising

  2. 2012-02-23 11:07, Fokke Nauta wrote:

    > In the embedded CSS style I have displaced the image so it will partly be in
    > another cell:

    - -
    > The problem is, that the text wraps around the area where
    > the image is.
    > How can I get the text running through this area?


    You would need to use absolute positioning then. In relative
    positioning, the positioned element affects normally to the flow of the
    contents, just in the displaced position. In absolute positioning (which
    is in reality just _different_ relative positioning), the positioned
    element works "out-of-the-flow", possibly overlaying other contents.

    > You can see an example in www.pc3.nl/test/example.htm
    > Although the images are not there, you can see the area's where the images
    > are.


    Well not quite, on Firefox I don't see the positioned image area, unless
    I tell the browser to draw a border around it. It's useful to use dummy
    images during testing.

    Anyway, absolute positioning is trickier. You could wrap the <img>
    element in a <div> (inside the table cell - the extra element is needed
    because cells don't like to be positioned), set position: relative on
    the <div> and position: absolute and e.g. a suitable top value on the
    <img> element. The positioned element will then appear topmost (in the z
    direction), i.e. if there is text in the same area of the window, the
    text will be under the image and thus not visible. To make the text
    appear on top of the image (in z direction), you need to set position:
    relative on an element containing the text and assign a larger z-index
    value to it than to the <img>.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Feb 23, 2012
    #2
    1. Advertising

  3. Fokke Nauta

    Fokke Nauta Guest

    "Jukka K. Korpela" <> wrote in message
    news:ji51li$smg$...
    > 2012-02-23 11:07, Fokke Nauta wrote:
    >
    >> In the embedded CSS style I have displaced the image so it will partly be
    >> in
    >> another cell:

    > - -
    >> The problem is, that the text wraps around the area where
    >> the image is.
    >> How can I get the text running through this area?

    >
    > You would need to use absolute positioning then. In relative positioning,
    > the positioned element affects normally to the flow of the contents, just
    > in the displaced position. In absolute positioning (which is in reality
    > just _different_ relative positioning), the positioned element works
    > "out-of-the-flow", possibly overlaying other contents.
    >
    >> You can see an example in www.pc3.nl/test/example.htm
    >> Although the images are not there, you can see the area's where the
    >> images
    >> are.

    >
    > Well not quite, on Firefox I don't see the positioned image area, unless I
    > tell the browser to draw a border around it. It's useful to use dummy
    > images during testing.
    >
    > Anyway, absolute positioning is trickier. You could wrap the <img> element
    > in a <div> (inside the table cell - the extra element is needed because
    > cells don't like to be positioned), set position: relative on the <div>
    > and position: absolute and e.g. a suitable top value on the <img> element.
    > The positioned element will then appear topmost (in the z direction), i.e.
    > if there is text in the same area of the window, the text will be under
    > the image and thus not visible. To make the text appear on top of the
    > image (in z direction), you need to set position: relative on an element
    > containing the text and assign a larger z-index value to it than to the
    > <img>.
    >
    > --
    > Yucca, http://www.cs.tut.fi/~jkorpela/


    Hi Jukka,

    Thanks for your quick response.
    I have replaced the file for a file with images now. I looked at it with IE
    and did not realize that FF doesn't show the image area by nature.

    I'm not quite getting what you mean with "set position: relative on the
    <div> and position: absolute and e.g. a suitable top value on the <img>
    element. ". Could you give me an example of how to code this?

    Fokke
     
    Fokke Nauta, Feb 23, 2012
    #3
  4. Fokke Nauta

    Fokke Nauta Guest

    "dorayme" <> wrote in message
    news:...
    > In article <>,
    > "Fokke Nauta" <> wrote:
    >
    >> "Jukka K. Korpela" ...

    > ...
    >> did not realize that FF doesn't show the image area by nature.
    >>

    >
    > There are ways for the area to show, one being to add a style of
    > border to the img element.


    Sometimes you don't want a border, specifically with transparent gif's.

    >> I'm not quite getting what you mean with "set position: relative on the
    >> <div> and position: absolute and e.g. a suitable top value on the <img>
    >> element. ". Could you give me an example of how to code this?
    >>

    >
    > If you position some element absolutely and there is no ancestor that
    > is positioned absolutely or relatively, the element will be positioned
    > in relation to the viewport. Otherwise it will take as its reference
    > the nearest positioned ancestor.
    >
    > <http://dorayme.netweaver.com.au/absolutely_relative_to_nearest_positio
    > ned_ancestor.html>


    Thanks. I am familiar with this, but I didn't understand what Jukka meant.

    > There are some differences among browsers on things in this area with
    > tables. Consider these styles:
    >
    > body {margin: 0;}
    > .parent {position: relative; background: red; width: 200px; height:
    > 200px;}
    > .child {background: black; width: 100px; height: 100px; position:
    > absolute; top: 0; right: 0;}
    >
    > with HTML of
    >
    > <div class="parent">
    > <div class="child"></div>
    > </div>
    >
    > Similar in FF and Safari and probably many other browsers.
    >
    > But try HTML of
    >
    > <table>
    > <tr>
    > <td class="parent">
    > <div class="child"></div>
    > </td>
    > </tr>
    > </table>
    > </body>
    > </html>
    >
    > Just saying that there are a few tricky areas in this matter.
    >
    > --
    > dorayme


    I already had a cont <div> for the page, so it was easy to create an
    absolute <div>. I've done that before but didn't realize it would solve my
    problem here, as I wasn't aware that an image could cross a cell border.

    Anyway, you made it clear and I got it done.

    ..cont {
    margin: auto;
    width: 600px;
    position: relative;
    z-index: 1;
    }
    ..layer1 {
    width:120px;
    height:138px;
    position:absolute;
    left:460px;
    top:50px;
    z-index:1;
    }

    <div class="layer1"><img src="picture.gif" width="120" height="128"
    border="0"></div>

    See www.pc3.nl/test/example.htm.

    I will test it in a range of browsers.

    Thanks, to Jukka as well.

    Best regards,
    Fokke
     
    Fokke Nauta, Feb 23, 2012
    #4
  5. Fokke Nauta

    Neil Gould Guest

    dorayme wrote:
    >
    > If you position some element absolutely and there is no ancestor that
    > is positioned absolutely or relatively, the element will be positioned
    > in relation to the viewport. Otherwise it will take as its reference
    > the nearest positioned ancestor.
    >
    > <http://dorayme.netweaver.com.au/absolutely_relative_to_nearest_positio
    > ned_ancestor.html>
    >
    > There are some differences among browsers on things in this area with
    > tables. Consider these styles:
    >

    Also differences with width settings. Although the copy in your table says
    the CSS is:
    ..one {
    position: relative;
    color: #000;
    background: #cfc;
    width: 800px;
    height: 10em;
    padding: .5em;
    }

    The source code reads:.one {
    position: relative;
    color: #000;
    background: #ffc;
    max-width: 900px;
    padding: .5em;
    }

    The result is the IE ignores the max-width instruction and fills the
    viewport. A descrete width, as in the first copy, would render the same in
    FF, IE, Safari, etc.

    --
    best regards,

    Neil
     
    Neil Gould, Feb 23, 2012
    #5
  6. Fokke Nauta

    dorayme Guest

    In article <ji5f1k$f4i$>,
    "Neil Gould" <> wrote:

    > dorayme wrote:

    ....
    > > <http://dorayme.netweaver.com.au/absolutely_relative_to_nearest_positio
    > > ned_ancestor.html>
    > >

    ....
    > ... Although the copy in your table says
    > the CSS is:


    > .one {
    > position: relative;
    > color: #000;
    > background: #cfc;
    > width: 800px;
    > height: 10em;
    > padding: .5em;
    > }
    >
    > The source code reads:.one {
    > position: relative;
    > color: #000;
    > background: #ffc;
    > max-width: 900px;
    > padding: .5em;
    > }
    >


    > The result is the IE ignores the max-width instruction and fills the
    > viewport. A descrete width, as in the first copy, would render the same in
    > FF, IE, Safari, etc.



    Thanks for drawing my attention to this, perhaps I later inserted the
    max-width without recording the fact in the pre. I have left the
    max-width in but renamed a few things while at it and added a phrase.
    That IE 6 ignores the max width is probably not too important, it
    still seems to illustrate the main point being made in the two urls
    (the other linked from the above).

    --
    dorayme
     
    dorayme, Feb 23, 2012
    #6
  7. Fokke Nauta

    dorayme Guest

    In article <>,
    "Fokke Nauta" <> wrote:

    > "dorayme" <> wrote in message
    > news:...
    > > In article <>,
    > > "Fokke Nauta" <> wrote:
    > >
    > >> "Jukka K. Korpela" ...

    > > ...
    > >> did not realize that FF doesn't show the image area by nature.
    > >>

    > >
    > > There are ways for the area to show, one being to add a style of
    > > border to the img element.

    >
    > Sometimes you don't want a border, specifically with transparent gif's.


    Just mentioned so that you could see it for testing. I am afraid I
    have not been following the specifics of what you are doing on this
    occasion.

    mmm... that reminds me... I suppose you can't have transparent
    borders. You can have borders of the same colour as the background in
    some situations, I have actually done this as a quick fix of some
    problems, probably to outfox IE!

    --
    dorayme
     
    dorayme, Feb 23, 2012
    #7
  8. Fokke Nauta

    dorayme Guest

    In article <>,
    dorayme <> wrote:

    > mmm... that reminds me... I suppose you can't have transparent
    > borders. You can have borders of the same colour as the background in
    > some situations, I have actually done this as a quick fix of some
    > problems, probably to outfox IE!


    I pressed post by mistake, before adding on this - really! You can use
    transparent and it will appear as the colour of the background of the
    element given the style.

    --
    dorayme
     
    dorayme, Feb 23, 2012
    #8
  9. On Feb 23, 11:11 am, "Fokke Nauta" <> wrote:
    > "dorayme" <> wrote in message
    >
    > news:...
    >
    > > In article <>,
    > > "Fokke Nauta" <> wrote:

    >
    > >> "Jukka K. Korpela" ...

    > > ...
    > >>  did not realize that FF doesn't show the image area by nature.

    >
    > > There are ways for the area to show, one being to add a style of
    > > border to the img element.

    >
    > Sometimes you don't want a border, specifically with transparent gif's.
    >
    > >> I'm not quite getting what you mean with "set position: relative on the
    > >> <div> and position: absolute and e.g. a suitable top value on the <img>
    > >> element. ". Could you give me an example of how to code this?

    >
    > > If you position some element absolutely and there is no ancestor that
    > > is positioned absolutely or relatively, the element will be positioned
    > > in relation to the viewport. Otherwise it will take as its reference
    > > the nearest positioned ancestor.

    >
    > > <http://dorayme.netweaver.com.au/absolutely_relative_to_nearest_positio
    > > ned_ancestor.html>

    >
    > Thanks. I am familiar with this, but I didn't understand what Jukka meant..
    >
    >
    >
    >
    >
    > > There are some differences among browsers on things in this area with
    > > tables. Consider these styles:

    >
    > > body {margin: 0;}
    > > .parent {position: relative; background: red; width: 200px; height:
    > > 200px;}
    > > .child {background: black; width: 100px; height: 100px; position:
    > > absolute; top: 0; right: 0;}

    >
    > > with HTML of

    >
    > > <div class="parent">
    > > <div class="child"></div>
    > > </div>

    >
    > > Similar in FF and Safari and probably many other browsers.

    >
    > > But try HTML of

    >
    > > <table>
    > > <tr>
    > > <td class="parent">
    > > <div class="child"></div>
    > > </td>
    > > </tr>
    > > </table>
    > > </body>
    > > </html>

    >
    > > Just saying that there are a few tricky areas in this matter.

    >
    > > --
    > > dorayme

    >
    > I already had a cont <div> for the page, so it was easy to create an
    > absolute <div>. I've done that before but didn't realize it would solve my
    > problem here, as I wasn't aware that an image could cross a cell border.
    >
    > Anyway, you made it clear and I got it done.
    >
    > .cont {
    >  margin: auto;
    >  width: 600px;
    >  position: relative;
    >  z-index: 1;}
    >
    > .layer1 {
    >  width:120px;
    >  height:138px;
    >  position:absolute;
    >  left:460px;
    >  top:50px;
    >  z-index:1;
    >
    > }
    >
    > <div class="layer1"><img src="picture.gif" width="120" height="128"
    > border="0"></div>
    >
    > Seewww.pc3.nl/test/example.htm.
    >
    > I will test it in a range of browsers.
    >
    > Thanks, to Jukka as well.
    >
    > Best regards,
    > Fokke- Hide quoted text -
    >
    > - Show quoted text -


    Thanks. I am familiar with this, but I didn't understand what Jukka
    meant.


    HistoryJukka is an old variant of the name Johannes, a biblical name
    spread over to Finland through Sweden with the introduction of
    Christianity. Jukka remained a nickname for people registered by
    authorities as Johan, Johannes, Juho etc., and did not appear in
    official records until the late 19th century. [1] The name was added
    to the official list of first names in the Finnish almanac managed by
    the Almanac Office at the University of Helsinki in 1950, and its name
    day is June 24, also the name day of Johannes and other variants, and
    the traditional midsummer day, or Juhannus

    Nothing to do with HTML
     
    Michael Yardley, Feb 24, 2012
    #9
  10. Fokke Nauta

    Fokke Nauta Guest

    "Michael Yardley" <> wrote in message
    news:...

    <cut>

    >> Thanks. I am familiar with this, but I didn't understand what Jukka
    >> meant.



    >HistoryJukka is an old variant of the name Johannes, a biblical name
    >spread over to Finland through Sweden with the introduction of
    >Christianity. Jukka remained a nickname for people registered by
    >authorities as Johan, Johannes, Juho etc., and did not appear in
    >official records until the late 19th century. [1] The name was added
    >to the official list of first names in the Finnish almanac managed by
    >the Almanac Office at the University of Helsinki in 1950, and its name
    >day is June 24, also the name day of Johannes and other variants, and
    >the traditional midsummer day, or Juhannus
    >
    >Nothing to do with HTML


    Thanks. This is always interesting stuff.
    I once had a colleague whose name was Jukka. He came from Finland.

    I expressed myself wrong. I should have written: "I didn't understand what
    Jukka tried to explain".

    Fokke
     
    Fokke Nauta, Feb 24, 2012
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Brian Henry
    Replies:
    5
    Views:
    10,053
    Steven Cheng[MSFT]
    Aug 3, 2004
  2. Replies:
    1
    Views:
    527
    Adrienne Boswell
    Mar 10, 2006
  3. John Abel

    Sending Through ^] Through telnetlib

    John Abel, Jan 23, 2004, in forum: Python
    Replies:
    2
    Views:
    368
  4. Laszlo Zsolt Nagy
    Replies:
    1
    Views:
    1,392
    Kartic
    Jan 26, 2005
  5. iwasjoeking
    Replies:
    9
    Views:
    631
    dorayme
    Jun 10, 2008
Loading...

Share This Page