i cant seem to work out how to do this...think you could help

Discussion in 'HTML' started by ben, Aug 26, 2005.

  1. ben

    ben Guest

    hi again,

    im migrating my site from tables to divs/css. ive run into a problem
    though. i need to have a layout, like this,

    <table width="100%">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>

    where the content in the cells can cause it to make it wider than its
    original width, without causing the table to extend over its 100%
    width, or break onto a new line. i can make a layout like that in css,
    but if you overfill one of the 'cells' it just bumps the next 'cells'
    onto the next line - which isnt an option.

    if there is a way to make the divs have variable widths without
    affecting the others, could you please help me out?

    ben
     
    ben, Aug 26, 2005
    #1
    1. Advertising

  2. In article <>,
    "ben" <> wrote:

    > hi again,
    >
    > im migrating my site from tables to divs/css. ive run into a problem
    > though. i need to have a layout, like this,
    >
    > <table width="100%">
    > <tr>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > </tr>
    > <tr>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > <td>&nbsp;</td>
    > </tr>
    > </table>
    >
    > where the content in the cells can cause it to make it wider than its
    > original width, without causing the table to extend over its 100%
    > width, or break onto a new line. i can make a layout like that in css,
    > but if you overfill one of the 'cells' it just bumps the next 'cells'
    > onto the next line - which isnt an option.
    >
    > if there is a way to make the divs have variable widths without
    > affecting the others, could you please help me out?
    >
    > ben


    URL?
    You appear to be using a table to create whitespace. A less egregious
    example would be to replace all that with <br><br>. I'd probably put the
    margin-bottom on the element above it at 2em using CSS. Or it's own
    block element at a margin-top of 2em.
    Or I misunderstood your question which I've done plenty of times before.

    leo

    --
    <http://web0.greatbasin.net/~leo/
     
    Leonard Blaisdell, Aug 26, 2005
    #2
    1. Advertising

  3. ben

    ben Guest

    lol, no, that table was an example, the actual previous one is far too
    big to post here. but the idea is that the widths are fluid (?), so
    when the content of the cell is too large, it automatically deducts the
    available width from the remaining cells not using it
     
    ben, Aug 26, 2005
    #3
  4. ben

    Mark Parnell Guest

    Previously in alt.html, ben <> said:

    Please quote the relevant parts of the message you are replying to.

    > lol, no, that table was an example, the actual previous one is far too
    > big to post here. but the idea is that the widths are fluid (?), so
    > when the content of the cell is too large, it automatically deducts the
    > available width from the remaining cells not using it


    display:table-cell; would probably do exactly what you are looking for.
    Unfortunately it's not supported by IE at all.

    Look into min-width and max-width (also not supported by IE, but there
    are workarounds available). You may be able to work something out with
    those. You could at least set the max-width on all 4 sections so that
    they don't add up to more than 100%. Getting them to always fill 100% of
    the width could be difficult though.

    Perhaps with a URL of the page in question, we may be able to suggest
    something more appropriate.

    --
    Mark Parnell
    http://clarkecomputers.com.au
    alt.html FAQ :: http://html-faq.com/
     
    Mark Parnell, Aug 26, 2005
    #4
  5. In article <>,
    "ben" <> wrote:

    > lol, no, that table was an example, the actual previous one is far too
    > big to post here. but the idea is that the widths are fluid (?), so
    > when the content of the cell is too large, it automatically deducts the
    > available width from the remaining cells not using it


    With a table width of 100% and no other constrictions, your td cells
    will expand to the maximum of the content width within them that
    conforms to the constriction of 100% width of the entire table and keeps
    them inline to one another. That is, the longest td will define the
    width of all others in it's column. If the table is at 100% and there
    are no width attributes defined for tr or td, the table width will grow
    or shrink and td content will drop down to fill the available
    constricted space in it's column depending on the size of the browser
    window.
    If you want to define column size, you will have to discuss overflow and
    stuff that I'm not familiar with, with those that use it in their CSS.
    Otherwise, give your table a width of 100% and make sure you have no
    other width restrictions in tr or td. Your table will grow or shrink
    depending on the window size of your visitors. No CSS required.

    leo

    --
    <http://web0.greatbasin.net/~leo/
     
    Leonard Blaisdell, Aug 26, 2005
    #5
  6. ben

    ben Guest

    problem is, i am trying to avoid tables ("css is this years table, its
    this seasons must have"). i think in this situation, ive run into a
    wall, i did come up with some code, but obviously, the column width
    changes between each row, so it defys the point, whereas with a table
    as simple as this, it does my job...

    print("
    <table>
    <tr>
    <td>Username</td>
    <td>Full Name</td>
    <td>Gaming Nick</td>
    <td>Address</td>
    <td>Email</td>
    <td>Matric No.</td>
    <td>Last Login</td>
    <td>$8</td>
    </tr>
    ");

    LOOP SECTION STARTS HERE

    print("
    <tr>
    <td>$desiredusername</td>
    <td>$fullname</td>
    <td>$gamingnick</td>
    <td>$flat</td>
    <td>$emailaddress</td>
    <td>$umetric</td>
    <td>$lastlogin</td>
    <td>$8</td>
    </tr>
    ");

    LOOP SECTION ENDS HERE

    print("</table>");


    with tables, it displays perfect, but even with the CSS i tried at, it
    really began to collapse when encountering about the 4th loop (dont
    know why). my CSS option was as follows (obv. it wasnt working)

    div#evencol {
    width: 12.44%;
    float: left;
    background: #333333;
    text-align: center;
    }
    div#oddcol {
    width: 12.44%;
    float: left;
    background: #333333;
    text-align: center;
    }
    div#title {
    background-color: #333333;
    width: 100%;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    }
    div#main {
    background-color: #333333;
    width: 100%;
    text-align: center;
    color: #90EE90;
    }

    print("
    <div id=\"title\">
    <div id=\"evencol\">
    Username
    </div>
    <div id=\"oddcol\">
    Full Name
    </div>
    <div id=\"evencol\">
    Gaming Nick
    </div>
    <div id=\"oddcol\">
    Flat
    </div>
    <div id=\"evencol\">
    Email
    </div>
    <div id=\"oddcol\">
    Matric. No.
    </div>
    <div id=\"evencol\">
    Last Login
    </div>
    <div id=\"oddcol\">
    Membership Status
    </div>
    </div>
    ");

    LOOP STARTS

    print("
    <div id=\"main\">
    <div id=\"evencol\">
    <p>$desiredusername</p>
    </div>
    <div id=\"oddcol\">
    <p>$fullname</p>
    </div>
    <div id=\"evencol\">
    <p>$gamingnick</p>
    </div>
    <div id=\"oddcol\">
    <p>$flat</p>
    </div>
    <div id=\"evencol\">
    <p>$emailaddress</p>
    </div>
    <div id=\"oddcol\">
    <p>$umetric</p>
    </div>
    <div id=\"evencol\">
    <p>$lastlogin</p>
    </div>
    <div id=\"oddcol\">
    <p>$8
    </div>
    </div>
    ");

    LOOP ENDS


    i dont know if you can understand my botched code, but i seriously am
    doubting the ability to pull of a display with CSS such as this,
    without requiring pages upon pages of code - which defys the point of
    using it.
     
    ben, Aug 26, 2005
    #6
  7. ben

    Mark Parnell Guest

    Mark Parnell, Aug 26, 2005
    #7
  8. In article <>,
    "ben" <> wrote:

    > problem is, i am trying to avoid tables ("css is this years table, its
    > this seasons must have").


    No, tabular data still requires tables. Since you've thrown in printing
    and some partial scripting to do the deed, I'm not qualified to answer
    your question.

    <snip stuff>

    > i dont know if you can understand my botched code, but i seriously am
    > doubting the ability to pull of a display with CSS such as this,
    > without requiring pages upon pages of code - which defys the point of
    > using it.


    CSS suggests style to your content. It is not a scripting or programming
    language. Maybe someone else will come up with a method of achieving
    what you want. Sorry I couldn't help.

    leo

    --
    <http://web0.greatbasin.net/~leo/
     
    Leonard Blaisdell, Aug 26, 2005
    #8
  9. ben

    ben Guest

    i have settled for tables then.

    thanks for your help !
     
    ben, Aug 26, 2005
    #9
  10. ben wrote:

    > i have settled for tables then.
    >
    > thanks for your help !
    >

    If your data is tabular then use tables! The anti-tables movement is for
    when your are using table to layout columns of data or place images. In
    the past it was done as a hack because there was not any other tools,
    now there is CSS. Go a head, use a table when your data requires it.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 26, 2005
    #10
  11. ben

    ben Guest

    ok, i used a table.....but i have a little issue, i have tried to
    represent this using CSS, but i just haven't a clue. i keep getting
    errors in Firefox (whereas IE renders fine).

    <table width=\"100%\">
    <tr>
    <td align=\"left\" class=\"newstitle\">$subject</td>
    <td align=\"right\" class=\"newstitle\">$date</td>
    </tr>
    </table>
     
    ben, Aug 27, 2005
    #11
  12. ben wrote:
    > ok, i used a table.....but i have a little issue, i have tried to
    > represent this using CSS, but i just haven't a clue. i keep getting
    > errors in Firefox (whereas IE renders fine).

    1: I am you have been told before, please *quote* the part of the
    previous message that you are referring to. It help maintain the
    continuity of the 'conversation'

    2: Define: 'quoting in message', its that text above my text with the
    leading '>' that is the part of your message to which I am replying to.

    >
    > <table width=\"100%\">
    > <tr>
    > <td align=\"left\" class=\"newstitle\">$subject</td>
    > <td align=\"right\" class=\"newstitle\">$date</td>
    > </tr>
    > </table>
    >


    3: What is this some sort of Perl|PHP code? (I am assuming because of
    what looks like variables with the '$'. What's with the \" if this is
    your HTML don't escape the quotes...brings me to #4

    4: Where is the URL. If we could see your code, we might be able to help
    you here. If you do not understand what you are doing your example may
    not be accurately representing what your really are doing in practice.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Aug 27, 2005
    #12
    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. Jack Schafer
    Replies:
    1
    Views:
    539
    Joe Smith
    Apr 23, 2004
  2. Luke -
    Replies:
    3
    Views:
    302
    sloan
    Oct 23, 2006
  3. Replies:
    2
    Views:
    3,300
    Ron Natalie
    Aug 11, 2006
  4. Nagaraj
    Replies:
    1
    Views:
    892
    Lionel B
    Mar 1, 2007
  5. David Mark
    Replies:
    17
    Views:
    249
    David Mark
    Mar 23, 2010
Loading...

Share This Page