Formatting Repeater oontrol output

[Pitcairnia]

We have been using a repeater to spit out images to a page and our seperator
is simply a non-breaking space. This is the style we need because it adjusts
nicely for the users resolution and width of their browser window. Heres the
basic code

<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<img src="<%=ServerTag Goes Here%>">
</ItemTemplate>
<SeparatorTemplate>

</SeparatorTemplate>
</asp:Repeater>

Now, our requirement has changed to require a caption be displayed
immediately below the image, but we still want the same basic layout. In
other words if the browser window is wide and gets resized narrower, the
images and captions 'drop down' to still fit within the window, and vice
versa.

I have tried two basic approaches to this. The first puts a table inside
the item template that holds both the image and the caption as in the
following:

<asp:Repeater with attributes here>
<ItemTemplate>
<table>
<tr>
<td>
<img src="<%=ServerTag Goes Here%>">
<br>
<%# DataBinder.Eval(Container, "DataItem.Caption")%>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>

The second approach uses the code above without the table structure: just
image and a break and the caption. Both approaches create output that is
essentially one-column. Additionally, we cannot use the ItemTemplate with
AlternatingItemTemplate to produce the output because two-column output, for
us, is really no better than one-column output. It nees to be 'dynamic' to
the browser window size and resolution.

I am hoping that someone can provide an HTML trick for the html in the
ItemTemplate. Or, perhaps there is some attibute or setting that I am not
seeing. I considered the DatGrid and the DataList. The grid is out because
it by definition is columns and rows, right. The DataList has the
RepeatLayout = Flow (versus table) but I messed with that for quite some time
and couldnt get it to work right either.

Any help appreciated,

David

[Bubba Earl JimBob Joe]

After much experimentation, we determined that by wrapping the
image,break,and caption in a span tag with the float attribute set to
left, we ALMOST got the exact formatting we wanted. With the previous
technique the images aligned in a row along their bottom, since all
images are different sizes it looks slightly better than aligning them
at the top of each row.

Regards,
David T

Pitcairnia wrote:

We have been using a repeater to spit out images to a page and our seperator is simply a non-breaking space. This is the style we need because it adjusts nicely for the users resolution and width of their browser window. Heres the basic code

<asp:Repeater id="Repeater1" runat="server">
<ItemTemplate>
<img src="<%=ServerTag Goes Here%>">
</ItemTemplate>
<SeparatorTemplate>

</SeparatorTemplate>
</asp:Repeater>

Now, our requirement has changed to require a caption be displayed
immediately below the image, but we still want the same basic layout. In other words if the browser window is wide and gets resized narrower, the images and captions 'drop down' to still fit within the window, and vice versa.

I have tried two basic approaches to this. The first puts a table inside the item template that holds both the image and the caption as in the following:

<asp:Repeater with attributes here>
<ItemTemplate>
<table>
<tr>
<td>
<img src="<%=ServerTag Goes Here%>">
<br>
<%# DataBinder.Eval(Container, "DataItem.Caption")%>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>

The second approach uses the code above without the table structure: just image and a break and the caption. Both approaches create output that is essentially one-column. Additionally, we cannot use the ItemTemplate with AlternatingItemTemplate to produce the output because two-column output, for us, is really no better than one-column output. It nees to be 'dynamic' to the browser window size and resolution.

I am hoping that someone can provide an HTML trick for the html in the ItemTemplate. Or, perhaps there is some attibute or setting that I am not seeing. I considered the DatGrid and the DataList. The grid is out because it by definition is columns and rows, right. The DataList has the
RepeatLayout = Flow (versus table) but I messed with that for quite some time and couldnt get it to work right either.

Any help appreciated,

David