In my ASP project, I have incorporated JavaScript and CSS code that I obtained from JonDesign's SmoothGallery demo website. Now, I am trying to move the p tag containing the summary out of the div. Here is the current code snippet:
<div id="myGallery">
<asp:Repeater ID="HeadLinesRepeater" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<div class="imageElement">
<h3><%# Eval("Title") %></h3>
<div>
<p><%# Eval("Summary") %></p>
</div>
<a href='<%# "/NewsBody.aspx?NewsId=" + Eval("ID") %>' title="Read More" class="open"></a>
<img class="full" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' />
<img class="thumbnail" src='<%# "/Img/news/" + Eval("ID") + ".jpg" %>' style="width: 100px; height: 75px" />
</div>
</ItemTemplate>
</asp:Repeater>
</div>
CSS:
.jdGallery .slideInfoZone p {
float: right;
margin-bottom: 10px;
z-index: 1000000;
position: absolute;
margin-left: 92px;
width: 300px;
right: 670px;
top: 220px;
font-family: Tahoma;
font-size: 10pt !important;
text-align: justify;
color: white !important;
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
I found that changing the position to fixed resolves the issue, but when the site is viewed on different resolutions, it becomes disordered and overlaps with other divs. This project is for my university, so any help would be greatly appreciated.