X
xmp333
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.
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.