Coupling Text & Images?

Hi,


I'm trying to create a page with image/text layouts similar to comic
books or story-boards. First, I tried adding text directly to the
image via an image editor, but resizings degraded the text quality, so
I decided to use "real" text. This meant coupling the text and the
images.

To couple them, I tried using tables to make sure that text and images
stayed together. Unfortunately, the table layout kept on getting
corrupted by the image. It was weird, the table would occasionally get
resized beyond the image's bound, and at other times, the image would
ignore the cell size. Here's what I was trying to do to get 4 images
per line w/ annotated text at the top of each image:

<p align=center>
<table width=100%border=1 cellpadding=0 cellspacing=0
bordercolor=black>
<tr>
<td width=24%>Some sample Text</td>
<td width=24%>Some more sample text</td>
<td width=24%>Third text</td>
<td width=24%>Final text</td>
</tr>
<tr>
<td width=24%><img src="img1.jpg" width=24%></td>
<td width=24%><img src="img2.jpg" width=24%></td>
<td width=24%><img src="img3.jpg" width=24%></td>
<td width=24%><img src="img4.jpg" width=24%></td>
</tr>
</table>

The actual source is more complex than this, but I hope you get the
idea.

Any ideas how to get this to work? If the table idea won't do it, then
what would you recommend for what I'm trying to achieve?

I'm using IE 6.0.2+ with the latest service packs. As long as the
solution will work in IE, portability doesn't matter.
Thanks in Advance.

xmp333@yahoo.com

wrote:

> Hi,
>
>
> I'm trying to create a page with image/text layouts similar to comic
> books or story-boards. First, I tried adding text directly to the
> image via an image editor, but resizings degraded the text quality, so
> I decided to use "real" text. This meant coupling the text and the
> images.
>
> To couple them, I tried using tables to make sure that text and images
> stayed together. Unfortunately, the table layout kept on getting
> corrupted by the image. It was weird, the table would occasionally get
> resized beyond the image's bound, and at other times, the image would
> ignore the cell size. Here's what I was trying to do to get 4 images
> per line w/ annotated text at the top of each image:
>
> <p align=center>
> <table width=100%border=1 cellpadding=0 cellspacing=0
> bordercolor=black>
> <tr>
> <td width=24%>Some sample Text</td>
> <td width=24%>Some more sample text</td>
> <td width=24%>Third text</td>
> <td width=24%>Final text</td>
> </tr>
> <tr>
> <td width=24%><img src="img1.jpg" width=24%></td>
> <td width=24%><img src="img2.jpg" width=24%></td>
> <td width=24%><img src="img3.jpg" width=24%></td>
> <td width=24%><img src="img4.jpg" width=24%></td>
> </tr>
> </table>
>
> The actual source is more complex than this, but I hope you get the
> idea.
>
> Any ideas how to get this to work? If the table idea won't do it, then
> what would you recommend for what I'm trying to achieve?
>
> I'm using IE 6.0.2+ with the latest service packs. As long as the
> solution will work in IE, portability doesn't matter.
> Thanks in Advance.

http://www.alistapart.com/articles/imagemap/
should give you the ideas you need. It's links positioned with CSS above an
image. Of course, you don't have to use links -- plain old text can be
used just as well.
--
mbstevens http://www.mbstevens.com

wrote:

> I'm using IE 6.0.2+ with the latest service packs. As long as the
> solution will work in IE, portability doesn't matter.

Don't get us started.

Hi All,


I managed to figure out the answer -- or at least a work-around. Don't
use percentages for sizing. For example, here's one that works:

<table border=0 cellspacing=5 cellpadding=5 align=center>
<tr>
<td width=190 align=center bgcolor=yellow><b>Test 1</td>
<td width=190 align=center bgcolor=yellow><b>Test 2</td>
<td width=190 align=center bgcolor=yellow><b>Test 3</td>
</tr>
<tr>
<td align=center valign=top><img src="img1.jpg" width=250
border=1></td>
<td align=center valign=top><img src="img2.jpg" width=250
border=1></td>
<td align=center valign=top><img src="img3.jpg" width=250
border=1></td>
</tr>
</table>

Thanks to everyone who constructively replied to my post.