Pictures not coming together

T

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.

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.
 
K

Karl Groves

Thomas Scheiderich said:
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
 
R

Richard

Thomas Scheiderich said:
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.
 
T

Thomas Scheiderich

Karl Groves said:
showing

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
 
B

Beauregard T. Shagnasty

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.
 
T

Thomas Scheiderich

Richard said:
showing

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.
 
T

Thomas Scheiderich

Beauregard T. Shagnasty said:
Quoth the raven Thomas Scheiderich:


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.
 
I

informant

Thomas Scheiderich said:
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.
 
T

Thomas Scheiderich

Nik Coughin said:
...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.
 
N

Nik Coughin

Thomas said:
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top