5x5 rounded-corner table

Discussion in 'HTML' started by MRe, Sep 30, 2009.

  1. MRe

    MRe Guest

    Hi,

    [short]

    Trying to get a 5x5 cell table to have variable size along middle
    row/column and fixed size along all other rows/columns, but instead am
    getting variable size in second and second-last rows/columns. Middle
    3x3 cells span as 1 cell. Example code at the end of message..

    [long]

    I'm using tables to get a rounded-corner look by putting images in
    each of the cells. I can get this working fine in a 3x3 table, but I
    want to use very big rounded corners. In a 3x3 table this means huge
    borders.

    What I want to do is a 5x5 table. This allows me to break the corner
    image across multiple cells (removing the redundant space), and means
    I have 3x3 cells for body, maximizing the amount of space I can use
    for content.

    When I attempt this however, I can't get the middle row/column to
    stretch to fill the space, instead, the second and second-last rows/
    columns stretch evenly to meet in the middle (hiding the middle row/
    column).

    Example code below..

    Thank you for any help solving this..

    Kind regards,
    Eliott

    ~~ example ~~
    Here's what I've got..

    <table>
    <tr><td style="min-width:35px; min-height: 35px; max-width:35px; max-
    height: 35px; width: 35px; height: 35px; background: url(inc/img/
    mainborder_nw.png);"></td>
    <td style="min-width:78px; min-height: 35px; max-width:78px; max-
    height: 35px; width: 78px; height: 35px; background: url(inc/img/
    mainborder_nwn.png);"></td>
    <td style=" min-height: 35px; max-
    height: 35px; height: 35px; background: url(inc/img/
    mainborder_n.png) repeat-x;"></td>
    <td style="min-width:78px; min-height: 35px; max-width:78px; max-
    height: 35px; width: 78px; height: 35px; background: url(inc/img/
    mainborder_nen.png);"></td>
    <td style="min-width:35px; min-height: 35px; max-width:35px; max-
    height: 35px; width: 35px; height: 35px; background: url(inc/img/
    mainborder_ne.png);"></td>
    </tr>
    <tr><td style="min-width:35px; min-height: 78px; max-width:35px; max-
    height: 78px; width: 35px; height: 78px; background: url(inc/img/
    mainborder_wnw.png);"></td>
    <td style="background: url(inc/img/mainborder.png) repeat;"
    colspan="3" rowspan="3">
    <p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
    jflkdajldkasjd lsajflsa jflkdajldkas</p>
    <p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
    jflkdajldkasjd lsajflsa jflkdajldkas</p>
    <p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
    jflkdajldkasjd lsajflsa jflkdajldkas</p>
    <p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
    jflkdajldkasjd lsajflsa jflkdajldkas</p>
    <p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
    jflkdajldkasjd lsajflsa jflkdajldkas</p>
    <p>jd lsajflsa jflkdajldkasjd lsajflsa jflkdajldkasjd lsajflsa
    jflkdajldkasjd lsajflsa jflkdajldkas</p>
    </td>
    <td style="min-width:35px; min-height: 78px; max-width:35px; max-
    height: 78px; width: 35px; height: 78px; background: url(inc/img/
    mainborder_ene.png);"></td>
    </tr>
    <tr><td style="min-width:35px; max-width:35px; width: 35px;
    background: url(inc/img/mainborder_w.png) repeat-y;"></td>
    <td style="min-width:35px; max-width:35px; width: 35px; background:
    url(inc/img/mainborder_e.png) repeat-y;"></td>
    </tr>
    <tr><td style="min-width:35px; min-height: 78px; max-width:35px; max-
    height: 78px; width: 35px; height: 78px; background: url(inc/img/
    mainborder_wsw.png);"></td>
    <td style="min-width:35px; min-height: 78px; max-width:35px; max-
    height: 78px; width: 35px; height: 78px; background: url(inc/img/
    mainborder_ese.png);"></td>
    </tr>
    <tr><td style="min-width:35px; min-height: 35px; max-width:35px; max-
    height: 35px; width: 35px; height: 35px;background: url(inc/img/
    mainborder_sw.png);"></td>
    <td style="min-width:78px; min-height: 35px; max-width:78px; max-
    height: 35px; width: 78px; height: 35px;background: url(inc/img/
    mainborder_sws.png);"></td>
    <td style=" min-height: 35px; max-
    height: 35px; height: 35px;background: url(inc/img/
    mainborder_s.png) repeat-x;"></td>
    <td style="min-width:78px; min-height: 35px; max-width:78px; max-
    height: 35px; width: 78px; height: 35px;background: url(inc/img/
    mainborder_ses.png);"></td>
    <td style="min-width:35px; min-height: 35px; max-width:35px; max-
    height: 35px; width: 35px; height: 35px;background: url(inc/img/
    mainborder_se.png);"></td>
    </tr>
    </table>
    MRe, Sep 30, 2009
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed MRe <> writing in
    news::

    > Hi,
    >
    > [short]
    >
    > Trying to get a 5x5 cell table to have variable size along middle
    > row/column and fixed size along all other rows/columns, but instead am
    > getting variable size in second and second-last rows/columns. Middle
    > 3x3 cells span as 1 cell. Example code at the end of message..
    >


    Please do not post markup. Post a URL with your latest efforts.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Sep 30, 2009
    #2
    1. Advertising

  3. MRe

    MRe Guest

    > Please do not post markup.  Post a URL with your latest efforts.

    Hi Adrienne,

    Sorry for posting markup, but thank you for the solution! In making
    up a minimal example page to host, I found it works as expected. There
    is something else in my page causing the problem, heh.

    Thank you,
    Kind regards,
    Eliott
    MRe, Sep 30, 2009
    #3
  4. Gazing into my crystal ball I observed MRe <> writing in
    news::

    >> Please do not post markup.  Post a URL with your latest efforts.

    >
    > Hi Adrienne,
    >
    > Sorry for posting markup, but thank you for the solution! In making
    > up a minimal example page to host, I found it works as expected. There
    > is something else in my page causing the problem, heh.
    >
    > Thank you,


    Well, if you have other problems here's a few other things to do:
    1. Validate your markup - a lot of times, you may have seen the same
    markup error 50 times, but you just don't notice it. Machines do. So
    validate markup [http://validator.w3.org], and CSS
    [http://jigsaw.w3.org/css-validator/]
    2. Make sure you are using the correct DocType
    [http://www.w3.org/TR/html401/struct/global.html#version-info]
    3. Come back here with a URL if you still have issues.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Sep 30, 2009
    #4
  5. MRe

    dorayme Guest

    In article
    <>,
    MRe <> wrote:

    > > Please do not post markup.  Post a URL with your latest efforts.

    >
    > Hi Adrienne,
    >
    > Sorry for posting markup, but thank you for the solution! In making
    > up a minimal example page to host, I found it works as expected. There
    > is something else in my page causing the problem, heh.
    >


    Phew! I was mildly tempted but thought, fad, this unquestionably should
    be a URL. And as I was thinking this, Adrienne suggested a URL. Often
    the case that the discipline of making a public effort in a URL will
    solve or at least sharpen the problem.

    --
    dorayme
    dorayme, Sep 30, 2009
    #5
  6. On Sep 30, 3:50 pm, Adrienne Boswell <> wrote:

    > >   Trying to get a 5x5 cell table to have variable size along middle
    > > row/column and fixed size along all other rows/columns, but instead am
    > > getting variable size in second and second-last rows/columns. Middle
    > > 3x3 cells span as 1 cell. Example code at the end of message..

    >
    > Please do not post markup.  Post a URL with your latest efforts.


    Or you can post it like that: http://lua.pastey.net/126045
    Paste it here http://lua.pastey.net/ and click 'paste'.
    Jan C. Faerber, Oct 4, 2009
    #6
  7. MRe

    MRe Guest

    On Oct 4, 1:41 am, "Jan C. Faerber" <> wrote:
    > On Sep 30, 3:50 pm, Adrienne Boswell <> wrote:
    >
    > > >   Trying to get a 5x5 cell table to have variable size along middle
    > > > row/column and fixed size along all other rows/columns, but instead am
    > > > getting variable size in second and second-last rows/columns. Middle
    > > > 3x3 cells span as 1 cell. Example code at the end of message..

    >
    > > Please do not post markup.  Post a URL with your latest efforts.

    >
    > Or you can post it like that:http://lua.pastey.net/126045
    > Paste it herehttp://lua.pastey.net/and click 'paste'.


    Ha, that's neat; adding that site to my favourites. Thank you :)

    Kind regards,
    Eliott
    MRe, Oct 4, 2009
    #7
  8. Jan C. Faerber wrote:
    > On Sep 30, 3:50 pm, Adrienne Boswell <> wrote:
    >
    >> Please do not post markup. Post a URL with your latest efforts.

    >
    > Or you can post it like that: http://lua.pastey.net/126045
    > Paste it here http://lua.pastey.net/ and click 'paste'.


    Interesting, although the big help with giving us a URL is that we can
    see the HTML in action, rather than just the source code.

    Cheers,
    Nige

    --
    Nigel Moss
    http://www.nigenet.org.uk
    Replace "spamfree" in email address with "nigel" to reply
    "Your mother ate my dog!", "Not all of him"
    nice.guy.nige, Oct 4, 2009
    #8
  9. On Oct 4, 7:16 pm, "nice.guy.nige" <> wrote:

    > > Paste it here http://lua.pastey.net/and click 'paste'.

    >
    > Interesting, although the big help with giving us a URL is that we can
    > see the HTML in action, rather than just the source code.
    >
    > Cheers,
    > Nige


    Yes, Mrs. Boswell was mentioning that probably because in
    that code you miss the pics on your desktop and it would be
    pretty much work to add some to get an impression of the page
    ( - not of the pic's content).
    But e.g. php will not be shown in the source code in your browser.
    Jan C. Faerber, Oct 4, 2009
    #9
    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. Francisco J. Jurado

    Rounded corners in menu Table and Bottons

    Francisco J. Jurado, May 31, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    598
    John Timney \(Microsoft MVP\)
    May 31, 2004
  2. Cogito

    A Table with rounded corners

    Cogito, May 13, 2005, in forum: HTML
    Replies:
    5
    Views:
    670
    david m wicker
    May 21, 2005
  3. Replies:
    9
    Views:
    838
    Tim Roberts
    Mar 17, 2006
  4. Goruav
    Replies:
    0
    Views:
    312
    Goruav
    Jan 8, 2009
  5. RahulH

    Rounded corner button

    RahulH, Oct 31, 2005, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    162
    Phillip Williams
    Nov 2, 2005
Loading...

Share This Page