Fitting images to table cells

Discussion in 'HTML' started by kylejpatrick@yahoo.com, Apr 3, 2012.

  1. Guest

    Hi folks,

    I have a situation involving some art I created that isn't quite
    fitting into a table cell, despite both the art and the dimensions of
    the table cell are the same (607px by 66px). And I cannot figure out
    for the life of me why not. It seems like the righthand side of my
    art gets cut off.

    Here's a snippet of my HTML and CSS:

    <table width="950 px" border="0" align="center" cellpadding="0"
    cellspacing="0">
    <tr height="66 px">
    <td width="25 px" rowspan="2"> </td>
    <td width="318 px" rowspan="2" class="logo"><img src="images/BIG
    LOGO.jpg"></td>
    <td width="607 px" height="66 px" colspan="2"
    class="blueBarBottom">test1</td>
    </tr>

    <tr>
    <td width="582 px" class="table-main"> test2</td>
    <td width="25 px"> </td>
    </tr>
    </table>

    ..blueBarBottom{
    background-image:url(images/blueBarBottom.gif);
    background-repeat: no-repeat;

    }

    To see screenshots of what I want and what it ends up looking like,
    visit my blog at ouvreslesyeux.wordpress.com.

    Thanks!

    Kyle
    , Apr 3, 2012
    #1
    1. Advertising

  2. dorayme Guest

    In article
    <>,
    "" <> wrote:

    > Hi folks,
    >
    > I have a situation...
    >
    > Here's a snippet of my HTML and CSS:
    >
    > <table width="950 px" ...>
    > <tr height="66 px">


    "=950 px"? Use instead "=950"

    --
    dorayme
    dorayme, Apr 3, 2012
    #2
    1. Advertising

  3. dorayme Guest

    In article <>,
    dorayme <> wrote:

    > In article
    > <>,
    > "" <> wrote:
    >
    > > Hi folks,
    > >
    > > I have a situation...
    > >
    > > Here's a snippet of my HTML and CSS:
    > >
    > > <table width="950 px" ...>
    > > <tr height="66 px">

    >
    > "=950 px"? Use instead "=950"


    oops, let me say that again!

    Instead of

    width="950 px"

    use

    width="950"

    And I don't think height on TRs is kosher.

    Check with a good validator and follow all the leads.

    --
    dorayme
    dorayme, Apr 4, 2012
    #3
  4. 2012-04-04 2:01, dorayme wrote:

    > Instead of
    >
    > width="950 px"
    >
    > use
    >
    > width="950"


    Yeah, right, but it doesn't really matter, except removing an error
    message from a validator's report, so that you could focus on other
    errors. If you tried to fix the page, that is.

    Browsers just ignore the " px" part.

    A fixed width of 950 pixels is usually tells that the page should not be
    debugged but redesigned.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Apr 4, 2012
    #4
  5. dorayme Guest

    In article <jlgifn$e5m$>,
    "Jukka K. Korpela" <> wrote:

    > 2012-04-04 2:01, dorayme wrote:
    >
    > > Instead of
    > >
    > > width="950 px"
    > >
    > > use
    > >
    > > width="950"

    >
    > Yeah, right, but it doesn't really matter, except removing an error
    > message from a validator's report, so that you could focus on other
    > errors. If you tried to fix the page, that is.
    >


    It matters in the way that shiny buttons, correctly held rifles and
    proud upright stances matter when soldiers in training march on the
    parade ground. It matters in the way perfectly cleaned rifles in
    peacetime matter. If war comes, these soldiers will survive better and
    they will die better.

    --
    dorayme
    dorayme, Apr 4, 2012
    #5
  6. On Apr 3, 9:08 pm, "" <>
    wrote:
    > Hi folks,
    >
    > I have a situation involving some art I created that isn't quite
    > fitting into a table cell, despite both the art and the dimensions of
    > the table cell are the same (607px by 66px).  And I cannot figure out
    > for the life of me why not.  It seems like the righthand side of my
    > art gets cut off.
    >
    > Here's a snippet of my HTML and CSS:
    >
    > <table width="950 px" border="0" align="center" cellpadding="0"
    > cellspacing="0">
    >   <tr height="66 px">
    >     <td width="25 px" rowspan="2"> </td>
    >     <td width="318 px" rowspan="2" class="logo"><img src="images/BIG
    > LOGO.jpg"></td>
    >     <td width="607 px" height="66 px" colspan="2"
    > class="blueBarBottom">test1</td>
    >   </tr>
    >
    >   <tr>
    >      <td width="582 px" class="table-main"> test2</td>
    >      <td width="25 px"> </td>
    >   </tr>
    > </table>
    >
    > .blueBarBottom{
    >         background-image:url(images/blueBarBottom.gif);
    >         background-repeat: no-repeat;
    >
    > }
    >
    > To see screenshots of what I want and what it ends up looking like,
    > visit my blog at ouvreslesyeux.wordpress.com.
    >
    > Thanks!
    >
    > Kyle


    I've had a look at the site and I cannot figure out what you are
    talking about.
    In the first picture labelled "Here’s what I need it to look like
    (ignore the cell borders):", I cannot see a curve on the bottom right
    of the blue graphic.
    Captain Paralytic, Apr 4, 2012
    #6
  7. Guest

    On Apr 3, 7:01 pm, dorayme <> wrote:
    > In article <>,
    >
    >  dorayme <> wrote:
    > > In article
    > > <>,
    > >  "" <> wrote:

    >
    > > > Hi folks,

    >
    > > > I have a situation...

    >
    > > > Here's a snippet of my HTML and CSS:

    >
    > > > <table width="950 px" ...>
    > > >   <tr height="66 px">

    >
    > > "=950 px"? Use instead "=950"

    >
    > oops, let me say that again!
    >
    > Instead of
    >
    > width="950 px"
    >
    > use
    >
    > width="950"
    >
    > And I don't think height on TRs is kosher.
    >
    > Check with a good validator and follow all the leads.
    >
    > --
    > dorayme


    Thanks! I'll try it.
    , Apr 11, 2012
    #7
  8. Guest

    On Apr 4, 5:30 am, Captain Paralytic <> wrote:
    > On Apr 3, 9:08 pm, "" <>
    > wrote:
    >
    >
    >
    >
    >
    >
    >
    >
    >
    > > Hi folks,

    >
    > > I have a situation involving some art I created that isn't quite
    > > fitting into a table cell, despite both the art and the dimensions of
    > > the table cell are the same (607px by 66px).  And I cannot figure out
    > > for the life of me why not.  It seems like the righthand side of my
    > > art gets cut off.

    >
    > > Here's a snippet of my HTML and CSS:

    >
    > > <table width="950 px" border="0" align="center" cellpadding="0"
    > > cellspacing="0">
    > >   <tr height="66 px">
    > >     <td width="25 px" rowspan="2"> </td>
    > >     <td width="318 px" rowspan="2" class="logo"><img src="images/BIG
    > > LOGO.jpg"></td>
    > >     <td width="607 px" height="66 px" colspan="2"
    > > class="blueBarBottom">test1</td>
    > >   </tr>

    >
    > >   <tr>
    > >      <td width="582 px" class="table-main"> test2</td>
    > >      <td width="25 px"> </td>
    > >   </tr>
    > > </table>

    >
    > > .blueBarBottom{
    > >         background-image:url(images/blueBarBottom.gif);
    > >         background-repeat: no-repeat;

    >
    > > }

    >
    > > To see screenshots of what I want and what it ends up looking like,
    > > visit my blog at ouvreslesyeux.wordpress.com.

    >
    > > Thanks!

    >
    > > Kyle

    >
    > I've had a look at the site and I cannot figure out what you are
    > talking about.
    > In the first picture labelled "Here’s what I need it to look like
    > (ignore the cell borders):", I cannot see a curve on the bottom right
    > of the blue graphic.


    Captain, I'll see if I can zoom the images and repost so you can see
    what I'm talking about. I'll write later tonight.
    , Apr 11, 2012
    #8
  9. Guest

    On Apr 3, 7:01 pm, dorayme <> wrote:
    > In article <>,
    >
    >  dorayme <> wrote:
    > > In article
    > > <>,
    > >  "" <> wrote:

    >
    > > > Hi folks,

    >
    > > > I have a situation...

    >
    > > > Here's a snippet of my HTML and CSS:

    >
    > > > <table width="950 px" ...>
    > > >   <tr height="66 px">

    >
    > > "=950 px"? Use instead "=950"

    >
    > oops, let me say that again!
    >
    > Instead of
    >
    > width="950 px"
    >
    > use
    >
    > width="950"
    >
    > And I don't think height on TRs is kosher.
    >
    > Check with a good validator and follow all the leads.
    >
    > --
    > dorayme


    Dorayme,

    I made the suggested change but no dice :(
    , Apr 14, 2012
    #9
  10. Guest

    On Apr 4, 12:25 am, "Jukka K. Korpela" <> wrote:
    > 2012-04-04 2:01, dorayme wrote:
    > > Instead of

    >
    > > width="950 px"

    >
    > > use

    >
    > > width="950"

    >
    > Yeah, right, but it doesn't really matter, except removing an error
    > message from a validator's report, so that you could focus on other
    > errors. If you tried to fix the page, that is.
    >
    > Browsers just ignore the " px" part.
    >
    > A fixed width of 950 pixels is usually tells that the page should not be
    > debugged but redesigned.
    >
    > --
    > Yucca,http://www.cs.tut.fi/~jkorpela/


    Yucca,

    I assume you're talking about using some sort of flexible width as
    opposed to fixed width cells... And that probably would take care of
    the problem.. I was hoping to stick to a width 950 px in order to
    ensure consistency across several templates me and my business partner
    are designing... is there any particular fix you had in mind? I'm all
    ears. -K
    , Apr 14, 2012
    #10
  11. Guest

    Hey all,

    I figured it out. The "padding" CSS property in one cell was pushing
    adjacent cells further out. Which is fine, but how do I code a
    webpage so that one cell has an image with padding, and the other
    cells and their art "flex" - i.e. without having to go to the adjacent
    cells and having to edit their art or edit HTML/CSS?

    K
    , Apr 15, 2012
    #11
  12. dorayme Guest

    In article
    <>,
    "" <> wrote:

    > Hey all,
    >
    > I figured it out. The "padding" CSS property in one cell was pushing
    > adjacent cells further out. Which is fine, but how do I code a
    > webpage so that one cell has an image with padding, and the other
    > cells and their art "flex" - i.e. without having to go to the adjacent
    > cells and having to edit their art or edit HTML/CSS?


    Best to do this. Mark up using no or very few style attributes. Class
    whatever you want to style. And style those classes in separate CSS
    blocks, linked externally or in the head of the document.

    Now, about table and padding and flexibility: You class the TD you
    want padding on and you give the appropriate padding in the CSS.

    <table>
    <tr>
    <td class="padding">stuff<td>stuff</td> <td>stuff</td>...
    </tr>

    (You would choose more appropriate names for the classes)

    table {width: ...;}
    td {padding: 0;}
    td.padding {padding: ...;}

    The table will expand to the width specified for table in the CSS. The
    TD of class "padding" will have the padding you want, and even the
    width you might want if you specify a width too. The other cells don't
    need anything at all to expand, they will have no padding. The browser
    will distribute and divide other cells over the remaining space to
    give a satisfactory result. The content of all the cells can affect
    the result.

    If you do not specify widths at all, not even for the table element,
    the space taken will shrexpand to tightly fit the content, leave it to
    the browser to do this.

    There is a slight irony when we criticise table layout for its
    inflexibility in that it is one of the cleverest elements around in
    terms of flexibility, all handled by the browser. Of course, its
    flexibility and inflexibility are in respect to different things, that
    is why the irony is not at all large.

    --
    dorayme
    dorayme, Apr 15, 2012
    #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. Carl Gilbert
    Replies:
    0
    Views:
    907
    Carl Gilbert
    Jul 20, 2005
  2. manios76
    Replies:
    5
    Views:
    15,881
  3. MrC

    Images in Table Cells

    MrC, Oct 5, 2004, in forum: HTML
    Replies:
    3
    Views:
    830
    Dan Abrey
    Oct 6, 2004
  4. CO2
    Replies:
    0
    Views:
    390
  5. Robert W.

    Fitting a table inside an ASP Panel

    Robert W., Mar 30, 2006, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    737
Loading...

Share This Page