HTML Table Question

Discussion in 'HTML' started by NvrBst, Jan 10, 2008.

  1. NvrBst

    NvrBst Guest

    This is probably a basic question but seems to be hard for me to find.

    How do you tell a cell to take up all the vertical space it can? (By
    default the 1st cell does it but I want the 3rd to). style="height:
    100%;" doesn't work and can't find a "vertical-align:justify;"
    option. Below is what my table looks like.

    1 2
    3 4
    5 6

    1/3/5 are all merged with rowspan=2. Cell 2 has to fit its data.
    Cell 4 has to be right under Cell 2 always. I want Cell 6 to take up
    any extra room with blank space so that Cell 1 or 4 arn't stretched
    (Cell 4 has special background).


    Note:
    1 2
    3 4

    This situation would also be fine (1/3 merged). It works the way I
    want it to when Cell 2 is higher than the data in 1/3. But when data
    in Cell 2 is small then Cell 2 gets stretched which I'd like to
    advoid.

    Thanks

    NB
     
    NvrBst, Jan 10, 2008
    #1
    1. Advertising

  2. NvrBst

    dorayme Guest

    In article
    <
    m>,
    NvrBst <> wrote:

    > This is probably a basic question but seems to be hard for me to find.
    >
    > How do you tell a cell to take up all the vertical space it can? (By
    > default the 1st cell does it but I want the 3rd to). style="height:
    > 100%;" doesn't work and can't find a "vertical-align:justify;"
    > option. Below is what my table looks like.
    >
    > 1 2
    > 3 4
    > 5 6
    >
    > 1/3/5 are all merged with rowspan=2. Cell 2 has to fit its data.
    > Cell 4 has to be right under Cell 2 always. I want Cell 6 to take up
    > any extra room with blank space so that Cell 1 or 4 arn't stretched
    > (Cell 4 has special background).
    >
    >
    > Note:
    > 1 2
    > 3 4
    >
    > This situation would also be fine (1/3 merged). It works the way I
    > want it to when Cell 2 is higher than the data in 1/3. But when data
    > in Cell 2 is small then Cell 2 gets stretched which I'd like to
    > advoid.
    >



    Excuse me while I pray:

    Dearest God Almighty, greatest of all HTML authors, Please make a
    subscriber who has a complicated question supply a f*ing url.
    thank you.

    PS. And wipe all those tut tuts from the faces of your most
    faithful servants.

    --
    dorayme
     
    dorayme, Jan 11, 2008
    #2
    1. Advertising

  3. On Jan 10, 7:13 pm, dorayme <> wrote:
    > Excuse me while I pray:
    > Dearest God Almighty, greatest of all HTML authors, Please make a
    > subscriber who has a complicated question supply a f*ing url.
    > thank you.


    Whats a flying url?
     
    Travis Newbury, Jan 11, 2008
    #3
  4. NvrBst

    NvrBst Guest

    On Jan 10, 4:13 pm, dorayme <> wrote:
    > In article
    > <
    > m>,
    >
    >
    >
    >
    >
    >  NvrBst <> wrote:
    > > This is probably a basic question but seems to be hard for me to find.

    >
    > > How do you tell a cell to take up all the vertical space it can? (By
    > > default the 1st cell does it but I want the 3rd to).  style="height:
    > > 100%;" doesn't work and can't find a "vertical-align:justify;"
    > > option.  Below is what my table looks like.

    >
    > > 1 2
    > > 3 4
    > > 5 6

    >
    > > 1/3/5 are all merged with rowspan=2.  Cell 2 has to fit its data.
    > > Cell 4 has to be right under Cell 2 always.  I want Cell 6 to take up
    > > any extra room with blank space so that Cell 1 or 4 arn't stretched
    > > (Cell 4 has special background).

    >
    > > Note:
    > > 1 2
    > > 3 4

    >
    > > This situation would also be fine (1/3 merged).  It works the way I
    > > want it to when Cell 2 is higher than the data in 1/3.  But when data
    > > in Cell 2 is small then Cell 2 gets stretched which I'd like to
    > > advoid.

    >
    > Excuse me while I pray:
    >
    > Dearest God Almighty, greatest of all HTML authors, Please make a
    > subscriber who has a complicated question supply a f*ing url.
    > thank you.
    >
    > PS. And wipe all those tut tuts from the faces of your most
    > faithful servants.
    >
    > --
    > dorayme- Hide quoted text -
    >
    > - Show quoted text -


    Hehe sorry don't have a URL yet... I was able to acomplish what I
    want by seperating column 1 and column 2 into 2 seperate tables and
    then putting both tables into a new table. If someone has a more
    elegant solution please tell. Below is how my solution looks like in
    code form if it helps

    <table style:"vertial-align: top;"><tr>
    <td> <table><tr><td>*Menu*</td></tr></table> </td>
    <td> <table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
    table> </td>
    </tr></table>


    Using 3 tables isn't that elegant though... This is what I'd like it
    to look like, what it was before (In code form)
    <table>
    <tr>
    <td rowspan="3">*Menu*</td>
    <td>*Data1*</td>
    </tr>
    <tr><td>*Data2*</td></tr>
    <tr><td style="vertial-align:justify;"></td></tr>
    </table>

    What doesn't work in the this way is the "vertical-align:justify;"
    line. I've tried setting the cells above it to "height: auto;" (which
    is suppose to give it the min size they can be) and then leaving the
    last cell with no height set but that didn't work either.

    NB
     
    NvrBst, Jan 11, 2008
    #4
  5. dorayme wrote:

    > Excuse me while I pray:
    >
    > Dearest God Almighty, greatest of all HTML authors, Please make a
    > subscriber who has a complicated question supply a f*ing url.
    > thank you.


    Hallelujah!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 11, 2008
    #5
  6. NvrBst

    dorayme Guest

    In article
    <
    m>,
    Travis Newbury <> wrote:

    > On Jan 10, 7:13 pm, dorayme <> wrote:
    > > Excuse me while I pray:
    > > Dearest God Almighty, greatest of all HTML authors, Please make a
    > > subscriber who has a complicated question supply a f*ing url.
    > > thank you.

    >
    > Whats a flying url?


    I reckon this is a trick question.

    --
    dorayme
     
    dorayme, Jan 11, 2008
    #6
  7. NvrBst wrote:

    > Hehe sorry don't have a URL yet...


    Well you can upload an example. Use your ISP's personal webspace or some
    free server...

    I was able to acomplish what I
    > want by seperating column 1 and column 2 into 2 seperate tables and
    > then putting both tables into a new table. If someone has a more
    > elegant solution please tell. Below is how my solution looks like in
    > code form if it helps
    >
    > <table style:"vertial-align: top;"><tr>
    > <td> <table><tr><td>*Menu*</td></tr></table> </td>
    > <td> <table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
    > table> </td>
    > </tr></table>
    >
    >
    > Using 3 tables isn't that elegant though... This is what I'd like it
    > to look like, what it was before (In code form)
    > <table>
    > <tr>
    > <td rowspan="3">*Menu*</td>
    > <td>*Data1*</td>
    > </tr>
    > <tr><td>*Data2*</td></tr>
    > <tr><td style="vertial-align:justify;"></td></tr>
    > </table>
    >
    > What doesn't work in the this way is the "vertical-align:justify;"
    > line. I've tried setting the cells above it to "height: auto;" (which
    > is suppose to give it the min size they can be) and then leaving the
    > last cell with no height set but that didn't work either.



    1) There is no value "justify" for property "vertical-align". Valid values:

    baseline | sub | super | top | text-top | middle | bottom | text-bottom
    | <percentage> | <length> | inherit


    Anyway if you wish to duplicate your three table layout with one, then
    you need colspan 2 not 3

    <table>
    <tr><td rowspan="2">*Menu*</td><td>*Data1*</td></tr>
    <tr><td>*Data2*</td></tr>
    </table>


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 11, 2008
    #7
  8. NvrBst

    dorayme Guest

    In article
    <
    >,

    NvrBst <> wrote:

    > On Jan 10, 4:13 pm, dorayme:


    > > Excuse me while I pray:
    > >

    >
    > Hehe sorry don't have a URL yet... I was able to acomplish what I
    > want by seperating column 1 and column 2 into 2 seperate tables and
    > then putting both tables into a new table. If someone has a more
    > elegant solution please tell. Below is how my solution looks like in
    > code form if it helps
    >
    > <table style:"vertial-align: top;"><tr>
    > <td> <table><tr><td>*Menu*</td></tr></table> </td>
    > <td> <table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
    > table> </td>
    > </tr></table>
    >
    >
    > Using 3 tables isn't that elegant though... This is what I'd like it
    > to look like, what it was before (In code form)
    > <table>
    > <tr>
    > <td rowspan="3">*Menu*</td>
    > <td>*Data1*</td>
    > </tr>
    > <tr><td>*Data2*</td></tr>
    > <tr><td style="vertial-align:justify;"></td></tr>
    > </table>
    >
    > What doesn't work in the this way is the "vertical-align:justify;"
    > line. I've tried setting the cells above it to "height: auto;" (which
    > is suppose to give it the min size they can be) and then leaving the
    > last cell with no height set but that didn't work either.
    >


    This the sort of thing you want:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    table {border-collapse: collapse;}
    td {padding: 1em; border:1px solid;}
    h1 {font-size: 1.2em; margin-top: 0; padding-top: 0;}
    </style>
    </head>

    <body>
    <table>
    <tr>
    <td rowspan="2" >
    <h1>Menu</h1>
    <ul>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    </ul>
    </td>
    <td>*Data1*</td></tr>
    <tr><td>*Data2*</td></tr>
    </table>

    </body>
    </html>

    ?

    I don't see why I should be the sucker all the time who supplies
    the urls <g>

    --
    dorayme
     
    dorayme, Jan 11, 2008
    #8
  9. NvrBst

    NvrBst Guest

    On Jan 10, 4:53 pm, "Jonathan N. Little" <>
    wrote:
    > NvrBst wrote:
    > > Hehe sorry don't have a URL yet...  

    >
    > Well you can upload an example. Use your ISP's personal webspace or some
    > free server...
    >
    > I was able to acomplish what I
    >
    >
    >
    >
    >
    > > want by seperating column 1 and column 2 into 2 seperate tables and
    > > then putting both tables into a new table.  If someone has a more
    > > elegant solution please tell.  Below is how my solution looks like in
    > > code form if it helps

    >
    > > <table style:"vertial-align: top;"><tr>
    > > <td>  <table><tr><td>*Menu*</td></tr></table>  </td>
    > > <td>  <table><tr><td>*Data1*</td></tr><tr><td>*Data2*</td></tr></
    > > table>  </td>
    > > </tr></table>

    >
    > > Using 3 tables isn't that elegant though...  This is what I'd like it
    > > to look like, what it was before (In code form)
    > > <table>
    > > <tr>
    > > <td rowspan="3">*Menu*</td>
    > > <td>*Data1*</td>
    > > </tr>
    > > <tr><td>*Data2*</td></tr>
    > > <tr><td style="vertial-align:justify;"></td></tr>
    > > </table>

    >
    > > What doesn't work in the this way is the "vertical-align:justify;"
    > > line.  I've tried setting the cells above it to "height: auto;" (which
    > > is suppose to give it the min size they can be) and then leaving the
    > > last cell with no height set but that didn't work either.

    >
    > 1) There is no value "justify" for property "vertical-align". Valid values:
    >
    > baseline | sub | super | top | text-top | middle | bottom | text-bottom
    > | <percentage> | <length> | inherit
    >
    > Anyway if you wish to duplicate your three table layout with one, then
    > you need colspan 2 not 3
    >
    > <table>
    > <tr><td rowspan="2">*Menu*</td><td>*Data1*</td></tr>
    > <tr><td>*Data2*</td></tr>
    > </table>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com- Hide quoted text -
    >
    > - Show quoted text -



    The Example I gave above was this though (So I think I'd need
    rowspan=3).
    <table>
    <tr><td rowspan="3">*Menu*</td> <td>*Data1*</td> </tr>
    <tr><td>*Data2*</td></tr>
    <tr><td style="vertial-align:justify;"></td></tr>
    </table>

    I need the "vertial-align:justify;" cell so that vertical stretching
    doesn't occur in the *Data1* and *Data2* cells. I know there is no
    justify for vertical alignment but I stated it because that is the
    kind of effect I need.

    If I use your example (using rowspan=2) then I'd have the problem (as
    labled in the inital post) of *Data2* cell being stretched when *Data1*
    +*Data2* height is less than *Menu*

    NB
     
    NvrBst, Jan 11, 2008
    #9
  10. NvrBst wrote:

    > I need the "vertial-align:justify;" cell so that vertical stretching
    > doesn't occur in the *Data1* and *Data2* cells. I know there is no
    > justify for vertical alignment but I stated it because that is the
    > kind of effect I need.
    >
    > If I use your example (using rowspan=2) then I'd have the problem (as
    > labled in the inital post) of *Data2* cell being stretched when *Data1*
    > +*Data2* height is less than *Menu*


    Maybe what the real problem is that you are using a table for layout
    when you should be using something else. If you rowspan the left column
    cell and the right column you add data that expand the cells vertically
    it is "natural" table behavior for the left column rowspan'ed cell to
    also expand vertically

    Now looking into my crystal ball I see that the left cell you put the
    word "menu" so chances are you have a *list* of menu items. If it a list
    you should use a list! If you want it side by side with your data then
    float it left. Google "2 column css layout template"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 11, 2008
    #10
  11. NvrBst

    NvrBst Guest

    On Jan 10, 5:47 pm, "Jonathan N. Little" <>
    wrote:
    > NvrBst wrote:
    > > I need the "vertial-align:justify;" cell so that vertical stretching
    > > doesn't occur in the *Data1* and *Data2* cells.  I know there is no
    > > justify for vertical alignment but I stated it because that is the
    > > kind of effect I need.

    >
    > > If I use your example (using rowspan=2) then I'd have the problem (as
    > > labled in the inital post) of *Data2* cell being stretched when *Data1*
    > > +*Data2* height is less than *Menu*

    >
    > Maybe what the real problem is that you are using a table for layout
    > when you should be using something else. If you rowspan the left column
    > cell and the right column you add data that expand the cells vertically
    > it is "natural" table behavior for the left column rowspan'ed cell to
    > also expand vertically
    >
    > Now looking into my crystal ball I see that the left cell you put the
    > word "menu" so chances are you have a *list* of menu items. If it a list
    > you should use a list! If you want it side by side with your data then
    > float it left. Google "2 column css layout template"
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Ahh, something tables can't do? Okay :) CSS approach looks like its
    the same thing as the table approach though (except using 3 DIV's
    instead of 3 TABLE's). Maybe DIV has performance improvments? I'll
    look into it a bit.

    Thanks

    NB
     
    NvrBst, Jan 11, 2008
    #11
  12. NvrBst

    NvrBst Guest

    On Jan 10, 6:34 pm, NvrBst <> wrote:
    > On Jan 10, 5:47 pm, "Jonathan N. Little" <>
    > wrote:
    >
    >
    >
    >
    >
    > > NvrBst wrote:
    > > > I need the "vertial-align:justify;" cell so that vertical stretching
    > > > doesn't occur in the *Data1* and *Data2* cells.  I know there is no
    > > > justify for vertical alignment but I stated it because that is the
    > > > kind of effect I need.

    >
    > > > If I use your example (using rowspan=2) then I'd have the problem (as
    > > > labled in the inital post) of *Data2* cell being stretched when *Data1*
    > > > +*Data2* height is less than *Menu*

    >
    > > Maybe what the real problem is that you are using a table for layout
    > > when you should be using something else. If you rowspan the left column
    > > cell and the right column you add data that expand the cells vertically
    > > it is "natural" table behavior for the left column rowspan'ed cell to
    > > also expand vertically

    >
    > > Now looking into my crystal ball I see that the left cell you put the
    > > word "menu" so chances are you have a *list* of menu items. If it a list
    > > you should use a list! If you want it side by side with your data then
    > > float it left. Google "2 column css layout template"

    >
    > > --
    > > Take care,

    >
    > > Jonathan
    > > -------------------
    > > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

    >
    > Ahh, something tables can't do?  Okay :)  CSS approach looks like its
    > the same thing as the table approach though (except using 3 DIV's
    > instead of 3 TABLE's).  Maybe DIV has performance improvments?  I'll
    > look into it a bit.
    >
    > Thanks
    >
    > NB- Hide quoted text -
    >
    > - Show quoted text -


    Oww you weren't suggesting 3 DIV's. What I have is a "asp:Menu" and a
    "asp:ContentPlaceHolder" (in a master file). You were suggesting
    applying the CSS styles directly to those. I see now, that should
    work I think. I'll try it tomorrow when I get back.

    Thanks :)

    NB
     
    NvrBst, Jan 11, 2008
    #12
  13. On Jan 10, 7:42 pm, dorayme <> wrote:
    > > > Dearest God Almighty, greatest of all HTML authors, Please make a
    > > > subscriber who has a complicated question supply a f*ing url.
    > > > thank you.

    > > Whats a flying url?

    > I reckon this is a trick question.


    I was just filling in the " * "
     
    Travis Newbury, Jan 11, 2008
    #13
  14. NvrBst

    Sid Guest

    On Fri, 11 Jan 2008 11:13:56 +1100, dorayme
    <> wrote:

    : Dearest God Almighty, greatest of all HTML authors, Please make a
    : subscriber who has a complicated question supply a f*ing url.
    : thank you.


    Amen to that.

    Sid
     
    Sid, Jan 11, 2008
    #14
  15. NvrBst

    NvrBst Guest

    On Jan 11, 2:52 am, Sid <> wrote:
    > On Fri, 11 Jan 2008 11:13:56 +1100, dorayme
    >
    > <> wrote:
    >
    > : Dearest God Almighty, greatest of all HTML authors, Please make a
    > : subscriber who has a complicated question supply a f*ing url.
    > : thank you.
    >
    > Amen to that.
    >
    > Sid


    LOL you all act like this is the most complicated question ever...
    The first post was 5 sentances with ASCII art! ASCII art is worth
    1000 URL links! hehe

    Applying the CSS style to the asp:Menu object with the
    "float:left;" (Didn't know CSS has a property like this, thanks) works
    exactly like I wanted it :) I still had to put *Data1* / *Data2* into
    a table (*Data2* needs a background and boarder so it had to be in a
    table, I think).

    I think jona just mixed up when you were typing (the example you gave
    was backwards IE: if left column is rowspaned and a cell in right
    column gets lots of data then its not "natural" for left column to
    expand... its impossbles for it not too). I do find it slightly
    "unnatural" that when the left rowspaned column gets lots of data that
    I'm unable to tell which cell is to expand in the right column. I'd
    expect all the cells to expand equally, or by default the last cell
    only; but what was happening in IE7 was the 1st cell only was
    expanding and the last 2 just had their "auto" height. I wanted 3rd
    cell in the right column expanding and the first 2 to have the "auto"
    height :p

    But with the CSS its the way I want it, and more elegant to boot :)
    Thank you all for you help.

    NB
     
    NvrBst, Jan 11, 2008
    #15
  16. NvrBst wrote:

    > LOL you all act like this is the most complicated question ever...
    > The first post was 5 sentances with ASCII art! ASCII art is worth
    > 1000 URL links! hehe


    No, actually seen the source in situ is worth a 100,000 ASCII art
    postings. There we see what the OP actually did not what they think they
    did. Also we see how the server's part that may be at play.

    >
    > Applying the CSS style to the asp:Menu object with the
    > "float:left;"


    Whatever asp:Menu object is, what we need is the output HTML that is way
    a URL is important. It would be like try to guess the problem of a PHP
    object... $myObject->menu() what is important is resultant outputted HTML


    > (Didn't know CSS has a property like this, thanks) works
    > exactly like I wanted it :)


    Maybe http://www.w3.org/TR/CSS21/propidx.html might assist you.

    > I still had to put *Data1* / *Data2* into
    > a table (*Data2* needs a background and boarder so it had to be in a
    > table, I think).


    No, not necessarily. You can style other block elements with backgrounds
    and borders. If the "data" is tabular in nature then use a TABLE. If
    paragraphs then P, is a list then UL or OL, else DIV might apply.
    >
    > I think jona just mixed up when you were typing (the example you gave
    > was backwards IE: if left column is rowspaned and a cell in right
    > column gets lots of data then its not "natural" for left column to
    > expand... its impossbles for it not too). I do find it slightly
    > "unnatural" that when the left rowspaned column gets lots of data that
    > I'm unable to tell which cell is to expand in the right column. I'd
    > expect all the cells to expand equally, or by default the last cell
    > only; but what was happening in IE7 was the 1st cell only was
    > expanding and the last 2 just had their "auto" height. I wanted 3rd
    > cell in the right column expanding and the first 2 to have the "auto"
    > height :p


    No, if you have

    <table>
    <tr><td rowspan="2">A1</td><td>B1</td><tr>
    <tr><td>B2</td></tr>
    </table>


    +----+----+
    | | B1 |
    | A1 |----+
    | | B2 |
    +----+----+

    If you add data to B1 and|or B2 that expands the height of the table,
    the rowspan'ed A1 must expand to the combined height of the cells B1 +
    B2 even if A1 have very little content. That is how a table works.
    However if A1 is a floated block element then

    +----+----+
    | A1 | B1 |
    |----+ |
    | |
    +---------+
    | B2 |
    +---------+

    or

    +----+----+
    | A1 | B1 |
    |----+ |
    | |
    +----+
    | B2 |
    +----+

    can be accomplish.

    >
    > But with the CSS its the way I want it, and more elegant to boot :)
    > Thank you all for you help.


    True in many cases.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 11, 2008
    #16
  17. NvrBst

    dorayme Guest

    In article
    <
    m>,
    Travis Newbury <> wrote:

    > On Jan 10, 7:42 pm, dorayme <> wrote:
    > > > > Dearest God Almighty, greatest of all HTML authors, Please make a
    > > > > subscriber who has a complicated question supply a f*ing url.
    > > > > thank you.
    > > > Whats a flying url?

    > > I reckon this is a trick question.

    >
    > I was just filling in the " * "


    I still think it is a trick.

    --
    dorayme
     
    dorayme, Jan 11, 2008
    #17
  18. NvrBst

    NvrBst Guest

    On Jan 11, 11:28 am, "Jonathan N. Little" <>
    wrote:
    > NvrBst wrote:
    > > LOL you all act like this is the most complicated question ever...
    > > The first post was 5 sentances with ASCII art!  ASCII art is worth
    > > 1000 URL links! hehe

    >
    > No, actually seen the source in situ is worth a 100,000 ASCII art
    > postings. There we see what the OP actually did not what they think they
    > did. Also we see how the server's part that may be at play.
    >
    >
    >
    > > Applying the CSS style to the asp:Menu object with the
    > > "float:left;"

    >
    > Whatever asp:Menu object is, what we need is the output HTML that is way
    > a URL is important. It would be like try to guess the problem of a PHP
    > object... $myObject->menu() what is important is resultant outputted HTML
    >
    > > (Didn't know CSS has a property like this, thanks) works
    > > exactly like I wanted it :)  

    >
    > Maybehttp://www.w3.org/TR/CSS21/propidx.htmlmight assist you.
    >
    > > I still had to put *Data1* / *Data2* into
    > > a table (*Data2* needs a background and boarder so it had to be in a
    > > table, I think).

    >
    > No, not necessarily. You can style other block elements with backgrounds
    > and borders. If the "data" is tabular in nature then use a TABLE. If
    > paragraphs then P, is a list then UL or OL, else DIV might apply.
    >
    >
    >
    > > I think jona just mixed up when you were typing (the example you gave
    > > was backwards IE: if left column is rowspaned and a cell in right
    > > column gets lots of data then its not "natural" for left column to
    > > expand... its impossbles for it not too).  I do find it slightly
    > > "unnatural" that when the left rowspaned column gets lots of data that
    > > I'm unable to tell which cell is to expand in the right column.  I'd
    > > expect all the cells to expand equally, or by default the last cell
    > > only; but what was happening in IE7 was the 1st cell only was
    > > expanding and the last 2 just had their "auto" height.  I wanted 3rd
    > > cell in the right column expanding and the first 2 to have the "auto"
    > > height :p

    >
    > No, if you have
    >
    > <table>
    > <tr><td rowspan="2">A1</td><td>B1</td><tr>
    > <tr><td>B2</td></tr>
    > </table>
    >
    > +----+----+
    > |    | B1 |
    > | A1 |----+
    > |    | B2 |
    > +----+----+
    >
    > If you add data to B1 and|or B2 that expands the height of the table,
    > the rowspan'ed A1 must expand to the combined height of the cells B1 +
    > B2 even if A1 have very little content. That is how a table works.
    > However if A1 is a floated block element then
    >
    > +----+----+
    > | A1 | B1 |
    > |----+    |
    > |         |
    > +---------+
    > |   B2    |
    > +---------+
    >
    > or
    >
    > +----+----+
    > | A1 | B1 |
    > |----+    |
    >       |    |
    >       +----+
    >       | B2 |
    >       +----+
    >
    > can be accomplish.
    >
    >
    >
    > > But with the CSS its the way I want it, and more elegant to boot :)
    > > Thank you all for you help.

    >
    > True in many cases.
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Ahh two more questions. Your "Scenario C" was very simular to what I
    wanted... For future reference, how would you accomplish this with a
    2x2 table? All Cells are simply fitting their data (height wise).
    +----+----+
    | A1 | B1 |
    | +----+
    | | B2 |
    | +----+
    | |
    +----+

    But it looks like this if B1 contains is lots of data
    +----+----+
    | A1 | B1 |
    | | |
    | | |
    | | |
    | | |
    +----+ |
    | |
    +----+
    | B2 |
    +----+


    And my 2nd question, nothing to do with above; Is there a CSS Property
    that would tell the object not to wrap to the next line. Right now I
    have

    <asp:Menu style="float:left;" /><TABLE style="???"><tr><td>*Data1*</
    td></tr><tr><td>*Data2*</td></tr></TABLE>

    Problem is when the window shirnks the table wraps down under the menu
    - I want it to just make a vertical scrollbar instead of wrapping.
    Way I'm thinking is ???="position:absolute; margin-left:180px;". I
    don't like setting margin-left:180px since it has to be updated each
    time the font of the menu changes.

    Thanks
    NB
     
    NvrBst, Jan 11, 2008
    #18
  19. NvrBst wrote:

    > And my 2nd question, nothing to do with above; Is there a CSS Property
    > that would tell the object not to wrap to the next line. Right now I
    > have
    >
    > <asp:Menu style="float:left;" /><TABLE style="???"><tr><td>*Data1*</

    ^^^^^^^^
    Still have no idea what HTML this "asp:Menu" represents, if you are
    *not* going to supply a URL then at least insert what the ASP output
    would be...

    > td></tr><tr><td>*Data2*</td></tr></TABLE>
    >
    > Problem is when the window shirnks the table wraps down under the menu


    Yep that what floats do when blocks don't fit!

    > - I want it to just make a vertical scrollbar instead of wrapping.
    > Way I'm thinking is ???="position:absolute; margin-left:180px;". I
    > don't like setting margin-left:180px since it has to be updated each
    > time the font of the menu changes.


    #1 defining *text* blocks in "px" pixels is a *bad* idea. If user has a
    different font size (and yes they can do that and you cannot prevent
    them) then the text will not fit within your containers and the design
    will break. I should use "em" that is proportion to the font used.

    #2 "position:absolute" also a bad idea especially for novices that do
    not know how to use it properly. Can screw up printing your page...

    One way is to set the min-width of your container. Now <=IE6 will not
    support "min-width" and there are some workarounds that you can Google
    for, or say "screw it!" Works in "real" modern web browsers and now in
    IE7 and maybe soon we can "adieu!" to IE6 and it's younger siblings
    (Can't wait for IE7's passing too)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="content-language" content="en-us">

    <title>Use min-width</title>

    <style type="text/css">
    /* use 'em' adjust for min width without wrapping */
    body { min-width: 20em; overflow: auto; }

    ul.menu { float: left; list-style: none; margin: 1em; padding: 0; }
    ul.menu li { margin: 0; padding: 0; }

    table { border: 2px solid black; border-collapse: collapse; }
    th, td { border: 1px solid black; padding: 0 .25em; }

    </style>

    </head>
    <body>
    <ul class="menu">
    <li>Menu item1</li>
    <li>Menu item2</li>
    <li>Menu item3</li>
    <li>Menu item4</li>
    <li>Menu item5</li>
    <li>Menu item6</li>
    </ul>

    <table>
    <tr><th>Row</th><th>Value A</th><th>Value B</th></tr>
    <tr><td>0</td><td>A0</td><td>B0</td></tr>
    <tr><td>1</td><td>A1</td><td>B1</td></tr>
    <tr><td>2</td><td>A2</td><td>B2</td></tr>
    <tr><td>3</td><td>A3</td><td>B3</td></tr>
    <tr><td>4</td><td>A4</td><td>B4</td></tr>
    <tr><td>5</td><td>A5</td><td>B5</td></tr>
    <tr><td>6</td><td>A6</td><td>B6</td></tr>
    <tr><td>7</td><td>A7</td><td>B7</td></tr>
    <tr><td>8</td><td>A8</td><td>B8</td></tr>
    <tr><td>9</td><td>A9</td><td>B9</td></tr>
    <tr><td>10</td><td>A10</td><td>B10</td></tr>
    <tr><td>11</td><td>A11</td><td>B11</td></tr>
    <tr><td>12</td><td>A12</td><td>B12</td></tr>
    <tr><td>13</td><td>A13</td><td>B13</td></tr>
    <tr><td>14</td><td>A14</td><td>B14</td></tr>
    <tr><td>15</td><td>A15</td><td>B15</td></tr>
    <tr><td>16</td><td>A16</td><td>B16</td></tr>
    <tr><td>17</td><td>A17</td><td>B17</td></tr>
    <tr><td>18</td><td>A18</td><td>B18</td></tr>
    <tr><td>19</td><td>A19</td><td>B19</td></tr>
    <tr><td>20</td><td>A20</td><td>B20</td></tr>
    <tr><td>21</td><td>A21</td><td>B21</td></tr>
    <tr><td>22</td><td>A22</td><td>B22</td></tr>
    <tr><td>23</td><td>A23</td><td>B23</td></tr>
    <tr><td>24</td><td>A24</td><td>B24</td></tr>
    <tr><td>25</td><td>A25</td><td>B25</td></tr>
    <tr><td>26</td><td>A26</td><td>B26</td></tr>
    <tr><td>27</td><td>A27</td><td>B27</td></tr>
    <tr><td>28</td><td>A28</td><td>B28</td></tr>
    <tr><td>29</td><td>A29</td><td>B29</td></tr>
    </table>
    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jan 11, 2008
    #19
  20. NvrBst

    NvrBst Guest

    Ahh. Problem with the min-width would be my that it creates a vertical
    scroll (size of the largest width in *Data1*), when 99% of the time
    *Data1* is small -> would have to set it dynamically each time the
    data in *Data1* changes so that the scroll bar doesn't appear when its
    not needed (more work than its worth).

    The 3 table method, or the position absolute both work though so I'll
    fiddle around with those.

    Thanks NB
     
    NvrBst, Jan 12, 2008
    #20
    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. David Williams
    Replies:
    2
    Views:
    1,140
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. Beffmans
    Replies:
    1
    Views:
    5,398
    John Timney \(ASP.NET MVP\)
    Jul 8, 2005
  3. Rio
    Replies:
    4
    Views:
    1,203
  4. vitay
    Replies:
    8
    Views:
    554
    Stan McCann
    Nov 9, 2006
  5. Geary
    Replies:
    2
    Views:
    729
    =?ISO-8859-1?Q?G=F6ran_Andersson?=
    Jul 12, 2007
Loading...

Share This Page