Image in a table in XHTML.

Discussion in 'HTML' started by showandbeshown@gmail.com, Dec 6, 2007.

  1. Guest

    Hi,

    I use xhtml and I need to create a simple table which consists of 2
    columns and 1 row. The firs column of the table will contain some text
    and the second one an image. The width of the both columns is fixed
    and the height of the row is defined by the amount of the text in the
    first column. I would like my image adjusts the hight of the row (i.e.
    automatically stretches if it is needed).

    Is that possible to do within xhtml? I now that I can set the height
    of the image explicitly. I need to do something like height=100%. But
    it seems to be not supported in xhtml.

    Thank you in advance.
     
    , Dec 6, 2007
    #1
    1. Advertising

  2. Guest

    I found something that looks like what i need:
    <img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>

    However, it does not work. :) Why? I do explicitly say that the image
    should take the 100% of the height and it does not take. You can see
    how it looks like here:
    http://www.showandbeshown.com/headtail.php
     
    , Dec 6, 2007
    #2
    1. Advertising

  3. rf Guest

    <> wrote in message
    news:...
    >I found something that looks like what i need:
    > <img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>


    > However, it does not work. :) Why? I do explicitly say that the image
    > should take the 100% of the height and it does not take. You can see
    > how it looks like here:
    > http://www.showandbeshown.com/headtail.php


    You should be using l.jpg as a background for that cell. It wall
    automatically repeat and fill up the cell.

    --
    Richard.
     
    rf, Dec 6, 2007
    #3
  4. Guest

    On Dec 5, 9:20 pm, "rf" <> wrote:
    > <> wrote in message
    >
    > news:...
    >
    > >I found something that looks like what i need:
    > > <img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>
    > > However, it does not work. :) Why? I do explicitly say that the image
    > > should take the 100% of the height and it does not take. You can see
    > > how it looks like here:
    > >http://www.showandbeshown.com/headtail.php

    >
    > You should be using l.jpg as a background for that cell. It wall
    > automatically repeat and fill up the cell.
    >
    > --
    > Richard.


    If I use <td background="image.jpg">, it helps only but only
    partially. Because, it looks like I want, but the document becomes
    "not valid xhtml document" since "there is not background attribute
    for the <td> element".
     
    , Dec 6, 2007
    #4
  5. rf Guest

    <> wrote in message
    news:...
    > On Dec 5, 9:20 pm, "rf" <> wrote:
    >> <> wrote in message
    >>
    >> news:...
    >>
    >> >I found something that looks like what i need:
    >> > <img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>
    >> > However, it does not work. :) Why? I do explicitly say that the image
    >> > should take the 100% of the height and it does not take. You can see
    >> > how it looks like here:
    >> >http://www.showandbeshown.com/headtail.php

    >>
    >> You should be using l.jpg as a background for that cell. It wall
    >> automatically repeat and fill up the cell.
    >>
    >> --
    >> Richard.

    >
    > If I use <td background="image.jpg">, it helps only but only
    > partially. Because, it looks like I want, but the document becomes
    > "not valid xhtml document" since "there is not background attribute
    > for the <td> element".


    Then specify it using CSS.

    XHTML is not viable on the web anyway. IE simply does not understand it and
    you are serving it up as as text/html so browsers are error correcting it
    back to HTML anyway.

    HTML 4.01 strict is the way to go.

    --
    Richard.
     
    rf, Dec 6, 2007
    #5
  6. dorayme Guest

    In article
    <
    m>,
    wrote:

    > Hi,
    >
    > I use xhtml and I need to create a simple table which consists of 2
    > columns and 1 row. The firs column of the table will contain some text
    > and the second one an image. The width of the both columns is fixed
    > and the height of the row is defined by the amount of the text in the
    > first column. I would like my image adjusts the hight of the row (i.e.
    > automatically stretches if it is needed).
    >
    > Is that possible to do within xhtml? I now that I can set the height
    > of the image explicitly. I need to do something like height=100%. But
    > it seems to be not supported in xhtml.
    >
    > Thank you in advance.


    Amazingly:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html>
    <head>
    <title>Fit to cell</title>
    <style type="text/css">
    * {margin: 0; padding: 0;}

    img {
    display: block;
    width: 10em;
    height: 100%;
    }

    td {
    width: 10em;
    padding: 0;
    border: 0px solid #000;
    }

    table {border-collapse: collapse;}
    </style>
    </head>
    <body>

    <table cellspacing="0"><tbody><tr>
    <td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Pellentesque augue.Lorem ipsum dolorLorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Pellentesque augue.Lorem ipsum
    dolorLorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Pellentesque augue.Lorem ipsum dolor </td>
    <td><img src="stretch.jpg" alt="" /></td>
    </tr></tbody></table>

    </body>
    </html>

    works, or at least gives the illusion, only in Safari 2.0.4 on a
    Mac.

    I think you will really require scripting for the img to reliably
    get the height of the left cell depending on the user font size
    etc...

    --
    dorayme
     
    dorayme, Dec 6, 2007
    #6
  7. Mark Guest

    wrote:
    > On Dec 5, 9:20 pm, "rf" <> wrote:
    >> <> wrote in message
    >>
    >> news:...
    >>
    >>> I found something that looks like what i need:
    >>> <img src="img/l.jpg" style="width: 100%; height: 100%" alt="" /></td>
    >>> However, it does not work. :) Why? I do explicitly say that the image
    >>> should take the 100% of the height and it does not take. You can see
    >>> how it looks like here:
    >>> http://www.showandbeshown.com/headtail.php

    >> You should be using l.jpg as a background for that cell. It wall
    >> automatically repeat and fill up the cell.
    >>
    >> --
    >> Richard.

    >
    > If I use <td background="image.jpg">, it helps only but only
    > partially. Because, it looks like I want, but the document becomes
    > "not valid xhtml document" since "there is not background attribute
    > for the <td> element".


    I'm guessing you want a fluid rounded corner box with transparent corners?

    If so, you could do it this way:

    http://www.lester1.eclipse.co.uk/1/

    It's ugly, but not as ugly as your table version.

    This uses a variation of the "sliding doors" technique, which basically
    uses a very wide corner image to span the entire width of the box and
    "slide out" when the box expands. Transparency causes quite a few issues
    with sliding doors, which is usually done using nested divs. That's why
    I had to resort to empty divs.

    There might be a more elegant way of doing this with transparent corners
    but I can't think of one.
     
    Mark, Dec 6, 2007
    #7
    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. Sean Jorden
    Replies:
    1
    Views:
    604
    laurie
    Aug 19, 2003
  2. Replies:
    7
    Views:
    905
  3. chronos3d
    Replies:
    9
    Views:
    793
    Andy Dingley
    Dec 5, 2006
  4. Usha2009
    Replies:
    0
    Views:
    1,143
    Usha2009
    Dec 20, 2009
  5. xhtml champs
    Replies:
    0
    Views:
    539
    xhtml champs
    Aug 1, 2011
Loading...

Share This Page