Pictures not coming together

Discussion in 'HTML' started by Thomas Scheiderich, Jun 13, 2004.

  1. I have a logo that was originally 625x100 pixels.

    The problem is that if I put it in browser it stretches the image.

    So what I did was slice the image into 3. The middle slice is just a solid
    color with a strip that is a solid color, so this is the piece I use to
    stretch, since it won't affect the picture.

    The problem is the 2 outside images look great, but the middle is showing at
    exactly the same size (even though I have the width as "100%" in the middle
    cell.

    What am I doing wrong?

    Here is a snippet of the table that has the image in it.

    ****************************************************************************
    ***************
    <tr height="100">
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0"
    summary="Layout Table">
    <tr>
    <td><img src="images/Contour_logo_intranet1_1x1.gif" width="496"
    height="100" hspace="0" vspace="0"></td>
    <td><img src="images/Contour_logo_intranet1_1x2.gif" width="100%"
    height="100" hspace="0" vspace="0"></td>
    <td><div align="right"><img
    src="images/Contour_logo_intranet1_1x3.gif" width="129" height="100"
    hspace="0" vspace="0"></div></td>
    </tr>
    </table></td>
    </tr>
    ****************************************************************************
    **************
    Thanks,

    Tom.
    Thomas Scheiderich, Jun 13, 2004
    #1
    1. Advertising

  2. Thomas Scheiderich

    Karl Groves Guest

    "Thomas Scheiderich" <> wrote in message
    news:...
    > I have a logo that was originally 625x100 pixels.
    >
    > The problem is that if I put it in browser it stretches the image.
    >
    > So what I did was slice the image into 3. The middle slice is just a

    solid
    > color with a strip that is a solid color, so this is the piece I use to
    > stretch, since it won't affect the picture.
    >
    > The problem is the 2 outside images look great, but the middle is showing

    at
    > exactly the same size (even though I have the width as "100%" in the

    middle
    > cell.
    >
    > What am I doing wrong?


    1) Using tables for layout
    2) using the "height" attribute in "tr"
    3) Using a "summary" that contains something as completely unhelpful as
    "Layout Table"
    4) Using "100%" as an image width
    5) Using "hspace" and "vspace"
    6) using images to create a visual effect that CSS can handle

    -Karl
    Karl Groves, Jun 13, 2004
    #2
    1. Advertising

  3. Thomas Scheiderich

    Richard Guest

    "Thomas Scheiderich" <> wrote in message
    news:...
    > I have a logo that was originally 625x100 pixels.
    >
    > The problem is that if I put it in browser it stretches the image.
    >
    > So what I did was slice the image into 3. The middle slice is just a

    solid
    > color with a strip that is a solid color, so this is the piece I use to
    > stretch, since it won't affect the picture.
    >
    > The problem is the 2 outside images look great, but the middle is showing

    at
    > exactly the same size (even though I have the width as "100%" in the

    middle
    > cell.
    >
    > What am I doing wrong?
    >


    Use a 3 column table instead.
    Make the master size 100% width. Make the center cell equal to width of the
    image.
    Now you'll have the image centered and it will not expand.
    It expands because you tell it to.
    <img src="name.gif" width=625">
    Oh and quit using those long image names. Just makes things more difficult
    for you to work with.
    KISS. Keep it simple stupid.

    logo1, logo2, logo3, would work better.
    Richard, Jun 13, 2004
    #3
  4. "Karl Groves" <> wrote in message
    news:cai5sn$b01$...
    >
    > "Thomas Scheiderich" <> wrote in message
    > news:...
    > > I have a logo that was originally 625x100 pixels.
    > >
    > > The problem is that if I put it in browser it stretches the image.
    > >
    > > So what I did was slice the image into 3. The middle slice is just a

    > solid
    > > color with a strip that is a solid color, so this is the piece I use to
    > > stretch, since it won't affect the picture.
    > >
    > > The problem is the 2 outside images look great, but the middle is

    showing
    > at
    > > exactly the same size (even though I have the width as "100%" in the

    > middle
    > > cell.
    > >
    > > What am I doing wrong?

    >
    > 1) Using tables for layout
    > 2) using the "height" attribute in "tr"
    > 3) Using a "summary" that contains something as completely unhelpful as
    > "Layout Table"
    > 4) Using "100%" as an image width
    > 5) Using "hspace" and "vspace"
    > 6) using images to create a visual effect that CSS can handle
    >

    I have an image that has some designs on the right and left side. The
    problem is that as the browser changes sizes, the image stretches and
    distorts.

    How is CSS going to solve this problem?

    Tom
    > -Karl
    >
    >
    Thomas Scheiderich, Jun 13, 2004
    #4
  5. Quoth the raven Thomas Scheiderich:

    > I have a logo that was originally 625x100 pixels.
    >
    > The problem is that if I put it in browser it stretches the image.


    Why? Oh... tables...

    Use your original one-piece image and this code:

    <div style="text-align: center;">
    <img src="images/yourbanner.gif" alt="<appropriate text>" />
    </div>

    Probably nothing else required here.

    --
    -bts
    -This space intentionally left blank.
    Beauregard T. Shagnasty, Jun 13, 2004
    #5
  6. "Richard" <Anonymous@127.001> wrote in message
    news:...
    >
    > "Thomas Scheiderich" <> wrote in message
    > news:...
    > > I have a logo that was originally 625x100 pixels.
    > >
    > > The problem is that if I put it in browser it stretches the image.
    > >
    > > So what I did was slice the image into 3. The middle slice is just a

    > solid
    > > color with a strip that is a solid color, so this is the piece I use to
    > > stretch, since it won't affect the picture.
    > >
    > > The problem is the 2 outside images look great, but the middle is

    showing
    > at
    > > exactly the same size (even though I have the width as "100%" in the

    > middle
    > > cell.
    > >
    > > What am I doing wrong?
    > >

    >
    > Use a 3 column table instead.
    > Make the master size 100% width. Make the center cell equal to width of

    the
    > image.
    > Now you'll have the image centered and it will not expand.
    > It expands because you tell it to.
    > <img src="name.gif" width=625">
    > Oh and quit using those long image names. Just makes things more difficult
    > for you to work with.
    > KISS. Keep it simple stupid.
    >
    > logo1, logo2, logo3, would work better.
    >
    >


    That is what I did (images/Contour_logo_intranet1_1x1.gif,
    images/Contour_logo_intranet1_1x2.gif,
    images/Contour_logo_intranet1_1x3.gif). The 625, was the original size,
    where I saw the image distort.

    I agree with the image names. I am just setting everything up with many
    images (not sure which I am going to use). When I am done I will make
    smaller names (also the slice program added the extra bytes to differentiate
    the 3 slices).

    As to making the last cell the one to expand, this won't work. My figure
    has images in the left as well as the right side. The middle is the part
    that has to stretch.

    Thanks,

    Tom.
    Thomas Scheiderich, Jun 13, 2004
    #6
  7. "Beauregard T. Shagnasty" <> wrote in message
    news:mZ1zc.158143$...
    > Quoth the raven Thomas Scheiderich:
    >
    > > I have a logo that was originally 625x100 pixels.
    > >
    > > The problem is that if I put it in browser it stretches the image.

    >
    > Why? Oh... tables...
    >
    > Use your original one-piece image and this code:
    >
    > <div style="text-align: center;">
    > <img src="images/yourbanner.gif" alt="<appropriate text>" />
    > </div>


    The point is I do want to stretch the image, without distorting the words
    and images inside. I need it to go from the left border to the right border
    no matter what size the browser window is. This was why I sliced the image.

    I believe your solution would put the image in the center of the page but
    not what I am trying to accomplish.

    Thanks,

    Tom.
    >
    > Probably nothing else required here.
    >
    > --
    > -bts
    > -This space intentionally left blank.
    Thomas Scheiderich, Jun 13, 2004
    #7
  8. Thomas Scheiderich

    informant Guest

    "Thomas Scheiderich" <> wrote in message
    news:...
    >
    > "Richard" <Anonymous@127.001> wrote in message
    > news:...
    > >
    > > "Thomas Scheiderich" <> wrote in message
    > > news:...
    > > > I have a logo that was originally 625x100 pixels.
    > > >
    > > > The problem is that if I put it in browser it stretches the image.
    > > >
    > > > So what I did was slice the image into 3. The middle slice is just a

    > > solid
    > > > color with a strip that is a solid color, so this is the piece I use

    to
    > > > stretch, since it won't affect the picture.
    > > >
    > > > The problem is the 2 outside images look great, but the middle is

    > showing
    > > at
    > > > exactly the same size (even though I have the width as "100%" in the

    > > middle
    > > > cell.
    > > >
    > > > What am I doing wrong?
    > > >

    > >
    > > Use a 3 column table instead.
    > > Make the master size 100% width. Make the center cell equal to width of

    > the
    > > image.
    > > Now you'll have the image centered and it will not expand.
    > > It expands because you tell it to.
    > > <img src="name.gif" width=625">
    > > Oh and quit using those long image names. Just makes things more

    difficult
    > > for you to work with.
    > > KISS. Keep it simple stupid.
    > >
    > > logo1, logo2, logo3, would work better.
    > >
    > >

    >
    > That is what I did (images/Contour_logo_intranet1_1x1.gif,
    > images/Contour_logo_intranet1_1x2.gif,
    > images/Contour_logo_intranet1_1x3.gif). The 625, was the original size,
    > where I saw the image distort.
    >
    > I agree with the image names. I am just setting everything up with many
    > images (not sure which I am going to use). When I am done I will make
    > smaller names (also the slice program added the extra bytes to

    differentiate
    > the 3 slices).
    >
    > As to making the last cell the one to expand, this won't work. My figure
    > has images in the left as well as the right side. The middle is the part
    > that has to stretch.
    >
    > Thanks,


    Best to ignore any "advice" from Richard the St00pid Bullis. Resident moron.
    informant, Jun 13, 2004
    #8
  9. Thomas Scheiderich

    Nik Coughin Guest

    Thomas Scheiderich wrote:
    > So what I did was slice the image into 3. The middle slice is just a
    > solid color with a strip that is a solid color, so this is the piece
    > I use to stretch, since it won't affect the picture.
    >


    http://www.nrkn.com/stretchyDiv/
    Nik Coughin, Jun 13, 2004
    #9
  10. Thomas Scheiderich

    Karl Groves Guest

    Karl Groves, Jun 14, 2004
    #10
  11. Thomas Scheiderich

    Nik Coughin Guest

    Karl Groves wrote:
    > "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    > news:Xj4zc.1903$...
    >> Thomas Scheiderich wrote:
    >>> So what I did was slice the image into 3. The middle slice is just
    >>> a solid color with a strip that is a solid color, so this is the
    >>> piece I use to stretch, since it won't affect the picture.
    >>>

    >>
    >> http://www.nrkn.com/stretchyDiv/

    >
    > Check that in Moz


    You're right. Fixed now:

    http://www.nrkn.com/stretchyDiv/

    Forgot to specify a height for the div, foolishly assuming that div expanded
    to fit their content.
    Nik Coughin, Jun 14, 2004
    #11
  12. Thomas Scheiderich

    Nik Coughin Guest

    Nik Coughin wrote:
    > Karl Groves wrote:
    >> "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    >> news:Xj4zc.1903$...
    >>> Thomas Scheiderich wrote:
    >>>> So what I did was slice the image into 3. The middle slice is just
    >>>> a solid color with a strip that is a solid color, so this is the
    >>>> piece I use to stretch, since it won't affect the picture.
    >>>>
    >>>
    >>> http://www.nrkn.com/stretchyDiv/

    >>
    >> Check that in Moz

    >
    > You're right. Fixed now:
    >
    > http://www.nrkn.com/stretchyDiv/
    >
    > Forgot to specify a height for the div, foolishly assuming that div
    > expanded to fit their content.


    ....which they would if I wasn't floating all of the content. Oops.
    Nik Coughin, Jun 14, 2004
    #12
  13. Thomas Scheiderich

    TechnoHippie Guest

    TechnoHippie, Jun 14, 2004
    #13
  14. "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    news:a_6zc.1964$...
    > Nik Coughin wrote:
    > > Karl Groves wrote:
    > >> "Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote in message
    > >> news:Xj4zc.1903$...
    > >>> Thomas Scheiderich wrote:
    > >>>> So what I did was slice the image into 3. The middle slice is just
    > >>>> a solid color with a strip that is a solid color, so this is the
    > >>>> piece I use to stretch, since it won't affect the picture.
    > >>>>
    > >>>
    > >>> http://www.nrkn.com/stretchyDiv/
    > >>
    > >> Check that in Moz

    > >
    > > You're right. Fixed now:
    > >
    > > http://www.nrkn.com/stretchyDiv/
    > >
    > > Forgot to specify a height for the div, foolishly assuming that div
    > > expanded to fit their content.

    >
    > ...which they would if I wasn't floating all of the content. Oops.


    I guess I asked for it when I asked to see in CSS. Didn't realize you could
    do it there.

    I ended up doing like so:

    ****************************************************************************
    *********
    <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"
    bordercolor="#000099">
    <tr height="100">
    <td><table width="100%" cellspacing="0" cellpadding="0" summary="Layout
    Table">
    <tr>
    <td width="496" height="100" ><img
    src="images/Contour_logo_intranet1_1x1.jpg" width="496" height="100"
    hspace="0" vspace="0"></td>
    <td width="100%"><img src="images/Contour_logo_intranet1_1x2.jpg"
    width="100%" height="100" hspace="0" vspace="0"></td>
    <td width="129" height="100" align="right"><img
    src="images/Contour_logo_intranet1_1x3.jpg" width="129" height="100"
    hspace="0" vspace="0"></td>
    </tr>
    </table></td>
    </tr>
    ****************************************************************************
    *********

    This works fine and will keep it at the moment as I am under the gun. But I
    am going to look at your solution and move it into the CSS page later.
    Since I have a template set up, it should propogate to the other pages fine.

    Thanks,

    Tom.
    Thomas Scheiderich, Jun 14, 2004
    #14
  15. Thomas Scheiderich

    Nik Coughin Guest

    Thomas Scheiderich wrote:
    >>>>>> So what I did was slice the image into 3. The middle slice is
    >>>>>> just a solid color with a strip that is a solid color, so this
    >>>>>> is the piece I use to stretch, since it won't affect the picture.


    Nik Coughlin wrote:
    >>> http://www.nrkn.com/stretchyDiv/


    Thomas Scheiderich wrote:
    > I guess I asked for it when I asked to see in CSS. Didn't realize
    > you could do it there.


    8><

    > This works fine and will keep it at the moment as I am under the gun.
    > But I am going to look at your solution and move it into the CSS page
    > later. Since I have a template set up, it should propogate to the
    > other pages fine.
    >
    > Thanks,
    >
    > Tom.


    If you don't want to try it with CSS yet at least simplify your table.

    Try this:

    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
    <td width="496" height="100"
    background="images/Contour_logo_intranet1_1x1.jpg"></td>
    <td background="images/Contour_logo_intranet1_1x2.jpg">&nbsp;</td>
    <td width="129" height="100"
    background="images/Contour_logo_intranet1_1x3.jpg"></td>
    </tr>
    </table>

    Example:

    http://www.nrkn.com/stretchyDiv/table.html
    Nik Coughin, Jun 14, 2004
    #15
    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. Richard

    slowly coming together

    Richard, Jan 6, 2005, in forum: HTML
    Replies:
    9
    Views:
    421
    Bazil
    Jan 6, 2005
  2. Richard

    Coming together so nicely now.

    Richard, Jan 22, 2005, in forum: HTML
    Replies:
    7
    Views:
    453
    Blinky the Shark
    Jan 23, 2005
  3. Steve Holden

    PyCon is Coming! PyCon is Coming!

    Steve Holden, Jan 5, 2006, in forum: Python
    Replies:
    0
    Views:
    308
    Steve Holden
    Jan 5, 2006
  4. Martin Raychev
    Replies:
    1
    Views:
    280
    Alvin Bruney [MVP]
    Mar 2, 2004
  5. Richard

    Coming together so nicely

    Richard, Jan 9, 2005, in forum: Javascript
    Replies:
    2
    Views:
    97
    Richard Cornford
    Jan 9, 2005
Loading...

Share This Page