Chapter 8 problem displaying sidebar

shilohcoder · February 19th, 2011, 12:53 PM

Great book; using it in a Web Development course at a University.

I had everything through Chapter 8 working beautifully and decided to add another image to the Banner.ascx to give the students a different example. The image was too large, so I deleted it. Since then, the sidebar is 'wrapping' to the left under the cpmaincontent. I didn't change anything else i.e. the css or any code. I did removed the <style> code that was inserted with the image. The background image for the sidebar is also 'gone.' I have recreated the banner control and reinserted it into the master page, all to no avail. I don't know where to look! Thanks for your help. How do I paste a screen shot?

Imar · February 19th, 2011, 01:15 PM

Hi there,

I don't think you can paste screen shots here. But you could upload one here: http://imageshack.us/ and link to it.

Can you also post your code for the page that contained the banner? Also, did you verify that none of your CSS selectors has a changed width? Finally, do you see any in-line styles or embedded styles in your page or controls that you didn't add?

Imar

shilohcoder · February 19th, 2011, 01:52 PM

Thank you for the quick response. I am using monochrome and darkgrey just as they came to me; and I'm sure I didn't make any changes between pasting the new image and deleting it. Here's the source for the banner

Code:

<%@ Control Language="VB" AutoEventWireup="true" CodeFile="Banner.ascx.vb" Inherits="Controls_Banner" %>

<asp:Panel ID="VerticalPanel" runat="server" >
    <a href="http://p2p.wrox.com" target="_blank" runat="server" id="VerticalLink">
    <asp:Image ID="Image1" runat="server" AlternateText="This is a sample banner"
         ImageUrl="~/Images/Banner120x240.gif" />
    </a>
</asp:Panel>
<asp:Panel ID="HorizontalPanel" runat="server" >
    <a href="http://p2p.wrox.com" target="_blank" runat="server" id = "HorizontalLink">
    <asp:Image ID="Image2" runat="server" AlternateText="This is a sample banner"
         ImageUrl="~/Images/Banner468x60.gif" />
    </a>
</asp:Panel>

Here's the vb code

Code:

Partial Class Controls_Banner
  Inherits System.Web.UI.UserControl

  Public Property DisplayDirection As Direction

  Public Property NavigateUrl() As String
    Get
      Dim _navigateUrl As Object = ViewState("NavigateUrl")
      If _navigateUrl IsNot Nothing Then
        Return CType(_navigateUrl, String)
      Else
        Return "http://p2p.wrox.com"  ' Return a default value
      End If
    End Get
    Set(ByVal Value As String)
      ViewState("NavigateUrl") = Value
    End Set
  End Property

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    HorizontalPanel.Visible = False
    VerticalPanel.Visible = False
    Select Case DisplayDirection
      Case Direction.Horizontal
        HorizontalPanel.Visible = True
                HorizontalLink.HRef = NavigateUrl

      Case Direction.Vertical
        VerticalPanel.Visible = True
                VerticalLink.HRef = NavigateUrl
    End Select
  End Sub
End Class

I will upload the screen shot as well.

Again, thank you!

shilohcoder · February 19th, 2011, 02:00 PM

Here's the link to the screenshot.
http://img197.imageshack.us/i/shiloh...creenshot.jpg/

Imar · February 19th, 2011, 02:05 PM

Could it be that you're assigning the wrong DisplayDirection (or none at all) to the banner? Looks like this left column actually contains the Horizontal, not the Vertical banner.

Check the code that sets up the banner below the theme drop down. It should have its direction set to Vertical.

Hope this helps,

Imar

shilohcoder · February 19th, 2011, 02:22 PM

Thank you, I didn't have a direction selected. That fixed it. I'm still wondering why the image for monochrome sidebar has disappeared. Here's the sidebar description in the css. The image is located in the App_Theme/Monochrome folder and I even copied it to the root, as well.

font-size: 0.8em;
color: White;
background-image: url(Images/Sidebar.jpg);
background-repeat: no-repeat;
background-color: #7773A1;
width: 142px;
min-height: 500px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
float: left;

shilohcoder · February 19th, 2011, 07:50 PM

Nevermind last; I think I messed up the monochrome css somewhere along the way; a new copy fixed that image problem. Thanks again for your help!