I am seeking to use the list control, as that will, I believe, give me the level of flexibility I am going to need to display my web page as I want. I am though, taking it in stages to get to the final page.
I am using the Grid option of List View.
I have defined a list view and the design view looks just how I would want it. A data record from the database shown on each row of the grid, but when I run it, I get a row showing the first field, a row showing the second field, and then a row showing the third and fourth field.
The data is all correct and what is in the database, but it just isn't laid out how I want it.
I have posted below the aspx markup, and the lines I added to styles.css.
The rows are quite tall because the next step is to pull in some image thumbnails, but that's the next step. The displayed page is picking up the height setting from styles.css.
Publishers.aspx
Code:
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/Site.master" AutoEventWireup="false" CodeFile="Publishers.aspx.vb" Inherits="_Publishers" %>
<asp:Content ID="PublishersPageHead" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="PublishersBcrumb" ContentPlaceHolderID="cpBcrumb" Runat="Server">
</asp:Content>
<asp:Content ID="PublishersMainContent" ContentPlaceHolderID="cpMainContent" Runat="Server">
<h1 align="center" style="color: #0066CC">How and Why Wonder Books</h1>
<asp:Label ID="PublishersInstructions" runat="server"
BorderWidth="1px" Font-Names="Calibri" Font-Size="Large"
Text="Click on a publisher to see the list of titles produced under that imprint, click on a thumbnail to see details of that series type."
Width="1020px" CssClass="InstructionsHeader"></asp:Label>
<br />
<br />
<br />
<asp:ListView ID="ListView1" runat="server" DataSourceID="EntityDataSource1">
<ItemTemplate>
<tr style="">
<td width="180">
<asp:Label ID="Publisher_NameLabel" runat="server"
Text='<%# Eval("Publisher_Name") %>' />
</td>
<td width="160">
<asp:Label ID="Place_of_PublicationLabel" runat="server"
Text='<%# Eval("Place_of_Publication") %>' />
</td>
<td width="80">
<asp:Label ID="Series_PublishedLabel" runat="server"
Text='<%# Eval("Series_Published") %>' />
</td>
<td width="50">
<asp:Label ID="Num_Sers_PublishedLabel" runat="server"
Text='<%# Eval("Num_Sers_Published") %>' />
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table class="ItemPlaceholderContainer">
<tr runat="server" style="">
<th runat="server" width="180" align="center">
Publisher</th>
<th runat="server" width="160" align="center">
Place</th>
<th runat="server" width="80" align="center">
Series Published</th>
<th runat="server" width="50" align="center">
# of Series</th>
</tr>
<tr ID="itemPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td id="TD_Publisher" runat="server" style="" class="ItemPlaceholderContainer">
</td>
<td id="TD_Place" runat="server" style="" class="ItemPlaceholderContainer">
</td>
<td id="TD_Series_Pub" runat="server" style="" class="ItemPlaceholderContainer">
</td>
<td id="TD_Series_Count" runat="server" style="" class="ItemPlaceholderContainer">
</td>
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
<asp:EntityDataSource ID="EntityDataSource1" runat="server"
ConnectionString="name=How_and_Why_Wonder_BooksEntities"
DefaultContainerName="How_and_Why_Wonder_BooksEntities"
EnableFlattening="False" EntitySetName="Publishers"
EntityTypeFilter="Publisher"
Select="it.[Publisher_Name], it.[Place_of_Publication], it.[Series_Published], it.[Num_Sers_Published]">
</asp:EntityDataSource>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:Button ID="PublishersHome" runat="server" Text="Home"
CssClass="HomeButtons" PostBackUrl="~/Default.aspx"/>
<br />
<br />
</asp:Content>
<asp:Content ID="PublishersFooter" ContentPlaceHolderID="cpFooter" Runat="Server">
</asp:Content>
styles.css - the three new items just added
Code:
.ItemPlaceholderContainer
{
width: 600px;
list-style-type:none;
clear:both;
}
.ItemPlaceholderContainer td
{
height: 145px;
float: left;
}
.ItemPlaceholderContainer td img
{
width: 95px;
margin: 10px 10px 10px 0;
}
I have posted screen images of the VWD view of the web page and the browser view (Firefox) at the free images server - FreeImageHosting.net as follows -
VWD view of screen:
http://www.freeimagehosting.net/imag...46515caef9.jpg
Browser view of screen:
http://www.freeimagehosting.net/imag...10c0ab395a.jpg
I look forward to replies, with many thanks in anticipation.
Best regards
Philip
Grid Option in ListView Control
Float left was the problem
