Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3
This is the forum to discuss the Wrox book Beginning ASP.NET 3.5: In C# and VB by Imar Spaanjaars; ISBN: 9780470187593
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old March 31st, 2009, 11:12 AM
Authorized User
 
Join Date: Jan 2009
Posts: 51
Thanks: 0
Thanked 0 Times in 0 Posts
Default Page not expanding with Photo Album

I followed the Gig pics example in Chapter 13 and it worked fine for the PlanetWrox site, yet when I tried to use it on my site, the page doesn't expand when the photos are added, the cpMainContent area stays the same and the footer expands. Any idea why this is happening? Here is the code and the css.

Code:
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
        DataSourceID="LinqDataSource1" DataTextField="Name" DataValueField="Id">
    </asp:DropDownList>
    <asp:LinqDataSource ID="LinqDataSource1" runat="server" 
        ContextTypeName="MyDataContext" Select="new (Id, Name)" 
        TableName="PhotoAlbums">
    </asp:LinqDataSource>
    <asp:ListView ID="ListView1" runat="server" DataKeyNames="Id" 
        DataSourceID="LinqDataSource2">
        <ItemTemplate>
            <li style="">
            <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
            <asp:Label ID="DescriptionLabel" runat="server" 
                    Text='<%# Eval("Description") %>' />
        </li>
        </ItemTemplate>
        <LayoutTemplate>
            <ul class="itemContainer">
                <li ID="itemPlaceholder" runat="server" />
                </ul>
                <div style="">
                    <asp:DataPager ID="DataPager1" runat="server" PageSize="3">
                        <Fields>
                            <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True" 
                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                            <asp:NumericPagerField />
                            <asp:NextPreviousPagerField ButtonType="Button" ShowLastPageButton="True" 
                                ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        </Fields>
                    </asp:DataPager>
                </div>
            </LayoutTemplate>
        </asp:ListView>
        <asp:LinqDataSource ID="LinqDataSource2" runat="server" 
            ContextTypeName="MyDataContext" TableName="Pictures" 
            Where="PhotoAlbumId == @PhotoAlbumId">
            <WhereParameters>
                <asp:ControlParameter ControlID="DropDownList1" Name="PhotoAlbumId" 
                    PropertyName="SelectedValue" Type="Int32" />
            </WhereParameters>
        </asp:LinqDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
css
Code:
body 
{
    margin:0 auto;
    width: 800px;
 font-family: Geneva, Arial, Helvetica, sans-serif;
 color: #000066;
 background-color: #FFCCCC;
}
p
{
    text-align: left;
    margin-left:15px;
    margin-right:15px;
}
#PageWrapper {
 width:800px;
 background-color: white;
 border: 1px solid black;
 margin-top: 15px;
 }
 
 #Header
{
 background-color: #fff;
 width: 800px;
 height: 133px;
}
.HeaderLink
{
 width: 800px; 
 height: 133px; 
 display: block; 
}
#MenuWrapper
{
 width: 800px;
 height: 22px;
 padding-top: 7px;
}
#MenuWrapper a
{
  color: #000;
}
.MainMenu
{
 border-top: 1px solid black;
 border-bottom: 1px solid black;
 width: 800px;
 height: 21px;
 background-color : #ffcccc;
 text-align: left;
}
#MainContent
{
 font-size: 0.8em;
 width: 800px;
 background-color: #e1e1e1;
 min-height: 400px;
 border-bottom: 1px solid black;
 padding-top: 25px;
 text-align:left;
}
#Footer {
 clear:both;
 text-align: center;
 font-size: 0.7em;
 color: #000033;
}
#Footer a{
 text-align: right;
 text-decoration: none;
 color: #000033;
}
#Footer a:hover{
 text-decoration: underline;
 color: #6FBC22;
}
.StaticMenuItemStyle, .StaticMenuItemStyle a 
{
    margin-left: 5px;
 font-size: 13px;
 font-weight: bold;
 text-decoration: none;
}
.itemContainer
{
  text-align: left;
  width: 600px;
  list-style-type: none;
}
.itemContainer li
{
  text-align: left;
  height: 280px;
  width: 200px;
  float: left;
}
.itemContainer li img
{
  text-align: left;
  width: 150px;
  margin: 10px 20px 10px 0;
}
here is the master page

Code:
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="~/Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div id="PageWrapper" align="center">
        <div id="Header"><a class="HeaderLink" href="~/index.aspx" runat="server">
        <img src="/Images/header.jpg" width="733" height="132" border="0" alt="header" />
            </a></div>
        <div id="MenuWrapper">
            <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
                DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False">
            <DynamicMenuStyle CssClass="DynamicMenuStyle" />
            <StaticSelectedStyle CssClass="StaticSelectedStyle" />
            <StaticMenuItemStyle ItemSpacing="10px" CssClass="StaticMenuItemStyle" />
            <DynamicHoverStyle CssClass="DynamicHoverStyle" />
            <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
            <StaticHoverStyle CssClass="StaticHoverStyle" />
            </asp:Menu>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" 
                ShowStartingNode="False" />
        </div>
        <div id="MainContent">
            <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" 
                Font-Size="0.8em" PathSeparator=" &gt;">
                <PathSeparatorStyle Font-Bold="True" ForeColor="#507CD1" />
                <CurrentNodeStyle ForeColor="#333333" />
                <NodeStyle Font-Bold="True" ForeColor="#284E98" />
                <RootNodeStyle Font-Bold="True" ForeColor="#507CD1" />
            </asp:SiteMapPath><br />
            <div id="login">
            <asp:LoginName ID="LoginName1" runat="server" FormatString="Welcome {0}!" />
            <asp:LoginView ID="LoginView1" runat="server">
                <RoleGroups>
                    <asp:RoleGroup Roles="Manager">
                        <ContentTemplate>
                            <asp:HyperLink ID="HyperLink1" runat="server" 
                                NavigateUrl="~/Management/Default.aspx">Manage Site</asp:HyperLink> or
                                <asp:LoginStatus ID="LoginStatus2" runat="server" />
                        </ContentTemplate>
                    </asp:RoleGroup>
                </RoleGroups>
                <LoggedInTemplate>
                    (<asp:LoginStatus ID="LoginStatus1" runat="server" />)
                </LoggedInTemplate>
            </asp:LoginView>
            </div>
            <br />
        <asp:ContentPlaceHolder id="cpMainContent" runat="server">  
        </asp:ContentPlaceHolder>
    </div>
            <div id="Footer">About Us | Contact Us | Disclaimer</div>
    </div>
    </form>
</body>
</html>

Last edited by areed24; March 31st, 2009 at 11:15 AM..
Reply With Quote
  #2 (permalink)  
Old March 31st, 2009, 03:44 PM
Imar's Avatar
Wrox Author
Points: 72,019, Level: 100
Points: 72,019, Level: 100 Points: 72,019, Level: 100 Points: 72,019, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,075
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

It's a bit difficult to see for me as there's a) a lot of code and b) you made some modifications which make the project incompatible with mine, but I think you can fix it by adding a clear on the div right above the pager bar. E.g. change this:

<div style="">
<asp:DataPager ID="DataPager1" runat="server" PageSize="3">

to this:

<div style="" style="clear: both">
<asp:DataPager ID="DataPager1" runat="server" PageSize="3">

Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
  #3 (permalink)  
Old April 1st, 2009, 07:37 AM
Authorized User
 
Join Date: Jan 2009
Posts: 51
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thank you thank you thank you. I can't tell you how much time I put in going back and forth on the css to see why that was happening. Can you tell me why that worked? Also, when you delete items from the photo album, it deletes the item from the database, but not the Gigs folder. Is there a way to delete the items from the gigs folder when it is deleted from the database?
Reply With Quote
  #4 (permalink)  
Old April 2nd, 2009, 03:26 PM
Imar's Avatar
Wrox Author
Points: 72,019, Level: 100
Points: 72,019, Level: 100 Points: 72,019, Level: 100 Points: 72,019, Level: 100
Activity: 100%
Activity: 100% Activity: 100% Activity: 100%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,075
Thanks: 80
Thanked 1,587 Times in 1,563 Posts
Default

In the original design, I use float: left on the MainContent and SideBar divs to float them next to each other. To end the float and return to normal, I added clear: both to the Footer div.

In your case, you didn't have the exact setup so the div didn't end the float correctly. You were still having floats for the list items. Adding a div that clears the float put things back to normal again, causing the footer to be placed below the list items.

Hope this helps,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Photo Album Questions m3ben BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 1 April 4th, 2007 12:12 PM
paging in photo album xperre BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 1 April 2nd, 2007 03:32 PM
Error posting photo to photo album abel714 BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 10 February 5th, 2007 03:07 AM
Wrox Photo Album Help rsearing BOOK: ASP.NET 2.0 Instant Results ISBN: 978-0-471-74951-6 6 September 27th, 2006 02:30 PM



All times are GMT -4. The time now is 08:29 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.