Deploying Website Help

Mr_Bont · January 23rd, 2012, 05:57 PM

Hello there,

I am following the instructions in chapter 19 and I ran my site by typing in localhost into my web browser. The site comes up but, but none of the pics are showing. Not the header, side bar, or even the pics I put in an album. Any help is much appreciated.

Thanks,

Matt

Imar · January 23rd, 2012, 07:44 PM

Hi Matt,

When you look at the final HTML in the browser, what do you see? Can you post the HTML? How are the images referenced in the HTML code and in the CSS files?

Cheers,

Imar

Mr_Bont · January 24th, 2012, 02:41 PM

Here is the HTML code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
	Planet Wrox
</title>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" /><link href="App_Themes/Monochrome/Monochrome.css" type="text/css" rel="stylesheet" /><style type="text/css">
	/* <![CDATA[ */
	#Menu1 img.icon { border-style:none;vertical-align:middle; }
	#Menu1 img.separator { border-style:none;display:block; }
	#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
	#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
	#Menu1 ul.dynamic { z-index:1; }
	#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
	#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
	#Menu1 a.popout-dynamic { background:url("/WebResource.axd?d=Wey_bFC8Ouz68MpnMPBKRyg9aXELaK0iOIcDSsiOtTQ6KrQBTZJOwGVQkQwH5ZxbdW0o0bTlDh0SQ0SFIwAlthzdZFX7P6QU2rww7ycU7_w1&t=634611231807680760") no-repeat right center;padding-right:14px; }
	/* ]]> */
</style></head>
<body>
  <form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWCAIFDzwrAA0CAA8WAh4LXyFEYXRhQm91bmRnZAwUKwAGBRMwOjAsMDoxLDA6MiwwOjMsMDo0FCsAAhYQHgRUZXh0BQRIb21lHgVWYWx1ZQUESG9tZR4LTmF2aWdhdGVVcmwFDS9EZWZhdWx0LmFzcHgeB1Rvb2xUaXAFEkdvIHRvIHRoZSBob21lcGFnZR4HRW5hYmxlZGceClNlbGVjdGFibGVnHghEYXRhUGF0aAUNL2RlZmF1bHQuYXNweB4JRGF0YUJvdW5kZ2QUKwACFhAfAQUHUmV2aWV3cx8CBQdSZXZpZXdzHwMFFS9SZXZpZXdzL0RlZmF1bHQuYXNweB8EBR5SZXZpZXdzIHB1Ymxpc2hlZCBvbiB0aGlzIHNpdGUfBWcfBmcfBwUVL3Jldmlld3MvZGVmYXVsdC5hc3B4HwhnFCsAAwUHMDowLDA6MRQrAAIWEB8BBQhCeSBHZW5yZR8CBQhCeSBHZW5yZR8DBRgvUmV2aWV3cy9BbGxCeUdlbnJlLmFzcHgfBAUcQWxsIFJldmlld3MgR3JvdXBlZCBieSBHZW5yZR8FZx8GZx8HBRgvcmV2aWV3cy9hbGxieWdlbnJlLmFzcHgfCGdkFCsAAhYQHwEFC0FsbCBSZXZpZXdzHwIFC0FsbCBSZXZpZXdzHwMFES9SZXZpZXdzL0FsbC5hc3B4HwQFC0FsbCBSZXZpZXdzHwVnHwZnHwcFES9yZXZpZXdzL2FsbC5hc3B4HwhnZBQrAAIWEB8BBQhHaWcgUGljcx8CBQhHaWcgUGljcx8DBQ0vUGhvdG9BbGJ1bXMvHwQFDEFsbCBHaWcgUGljcx8FZx8GZx8HBQ0vcGhvdG9hbGJ1bXMvHwhnFCsAAwUHMDowLDA6MRQrAAIWEB8BBQhHaWcgUGljcx8CBQhHaWcgUGljcx8DBRkvUGhvdG9BbGJ1bXMvRGVmYXVsdC5hc3B4HwQFDEFsbCBHaWcgUGljcx8FZx8GZx8HBRkvcGhvdG9hbGJ1bXMvZGVmYXVsdC5hc3B4HwhnZBQrAAIWEB8BBQlOZXcgQWxidW0fAgUJTmV3IEFsYnVtHwMFEy9OZXdQaG90b0FsYnVtLmFzcHgfBAUmQ3JlYXRlIGEgbmV3IFBob3RvIEFsYnVtIHdpdGggR2lnIFBpY3MfBWcfBmcfBwUTL25ld3Bob3RvYWxidW0uYXNweB8IZ2QUKwACFhAfAQUFQWJvdXQfAgUFQWJvdXQfAwUTL0Fib3V0L0RlZmF1bHQuYXNweB8EBQ9BYm91dCB0aGlzIFNpdGUfBWcfBmcfBwUTL2Fib3V0L2RlZmF1bHQuYXNweB8IZxQrAAQFCzA6MCwwOjEsMDoyFCsAAhYQHwEFCkNvbnRhY3QgVXMfAgUKQ29udGFjdCBVcx8DBRMvQWJvdXQvQ29udGFjdC5hc3B4HwQFCkNvbnRhY3QgVXMfBWcfBmcfBwUTL2Fib3V0L2NvbnRhY3QuYXNweB8IZ2QUKwACFhAfAQUIQWJvdXQgVXMfAgUIQWJvdXQgVXMfAwUTL0Fib3V0L0Fib3V0VXMuYXNweB8EBQhBYm91dCBVcx8FZx8GZx8HBRMvYWJvdXQvYWJvdXR1cy5hc3B4HwhnZBQrAAIWEB8BBQpNeSBQcm9maWxlHwIFCk15IFByb2ZpbGUfAwUPL015UHJvZmlsZS5hc3B4HwQFCm10IFByb2ZpbGUfBWcfBmcfBwUPL215cHJvZmlsZS5hc3B4HwhnZBQrAAIWEB8BBQVMb2dpbh8CBQVMb2dpbh8DBQsvTG9naW4uYXNweB8EBRdMb2cgaW4gdG8gdGhpcyB3ZWIgc2l0ZR8FZx8GZx8HBQsvbG9naW4uYXNweB8IZ2RkAgcPPCsACQIADxYEHg1OZXZlckV4cGFuZGVkZx4HVmlzaWJsZWhkBxAWABYAZGQCDw8QZGQWAWZkAhEPZBYEZg8PFgIfCmdkFgICAQ8WAh4EaHJlZgUTaHR0cDovL3AycC53cm94LmNvbWQCAg8PFgIfCmhkZGQszNJENHuKxJdrKgoWdMYE3fCTOp/pXTbDstGALp3Vhw==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=hRTuy-V6dAaM24DZ9WmrKmFQfOKfeqJvdSPHYKftxfsjfCyaqc-AMf7g9AMSy_iXAUAt_wO8hw5zNNi5s0E7EzNzCuimsyS1gVVux4qYBEs1&amp;t=634611231807680760" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=dPVRVQhObGl_XYHORoDutdBBXmwiF-Z2-JPVkuc7AL0hV-ArPimBKcjf_rzGUChSqa7_AlNek5zCgIf1KdM_StHdp2REzf_yT45TR0nCoE6nB9AYpCLgSM0mZiqBpVuKRieDcshGIP7kqinFyDPU6A2&amp;t=68c4b60a" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=qDgRyh5iWgYLgf3Bqho7qoV_PE-wooFvyWi8SM3cbEk4lI12h1ScZIoEy70bgLMl-wkAHH_bY8N6GOOZIAPLSj3TRLtA2OPF1VHtCdRXzkAkh-5xQN-CN2C7YFfR5rz17-4ccU5QFSprOa9T_cTKEaszHPhCe9BTAMIR5M1pKSyCYymKaTPixaJ7bPGqRX1Q0&amp;t=ffffffff940d030f" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="/ScriptResource.axd?d=xg8Gndr2iHJ9Qu1VE79vH8jK0b8GKx8m52f2gyHzV2fOvJUk5IVsTiTmegpIzZpWUEhSKE3P6kT1yFgPTZPrpb2qSaSdi2PhlLW0_dcn1l4KaCCkZWmS8w9htuUWT3FCr8i1F2O1r3miWj2m0LHA4hBW5bEs_etkhzDK6hg2bQiGSJP6XtiigizaZFKx9zG50&amp;t=ffffffff940d030f" type="text/javascript"></script>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<div class="aspNetHidden">

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALGhr0eApTDyagEAoqp+KcOApDH3PgHYHE96WESNsuMAH7lwsSYMUg7BkB+DrkKeiJ/eei+608=" />
</div>
  <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>

  <div id="PageWrapper">
    <div id="Header"><a href="./" id="A1"></a></div>
    <div id="MenuWrapper">

      <a href="#Menu1_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=XJJb9GGeR4PW1rAXYQHUp8wynMZ2pSgPd3TeTsbiGJ3pmCw0aEE-xofB1TMuVwlLRF20fNr4TuA9rrWaXe4bOyP_sys59e0hFfHO9mKBKig1&amp;t=634611231807680760" width="0" height="0" style="border-width:0px;" /></a><div class="MainMenu" id="Menu1">
	<ul class="level1">
		<li><a title="Go to the homepage" class="level1" href="/Default.aspx">Home</a></li><li><a title="Reviews published on this site" class="level1" href="/Reviews/Default.aspx">Reviews</a><ul class="level2">
			<li><a title="All Reviews Grouped by Genre" class="level2" href="/Reviews/AllByGenre.aspx">By Genre</a></li><li><a title="All Reviews" class="level2" href="/Reviews/All.aspx">All Reviews</a></li>
		</ul></li><li><a title="All Gig Pics" class="level1" href="/PhotoAlbums/">Gig Pics</a><ul class="level2">
			<li><a title="All Gig Pics" class="level2" href="/PhotoAlbums/Default.aspx">Gig Pics</a></li><li><a title="Create a new Photo Album with Gig Pics" class="level2" href="/NewPhotoAlbum.aspx">New Album</a></li>

		</ul></li><li><a title="About this Site" class="level1" href="/About/Default.aspx">About</a><ul class="level2">
			<li><a title="Contact Us" class="level2" href="/About/Contact.aspx">Contact Us</a></li><li><a title="About Us" class="level2" href="/About/AboutUs.aspx">About Us</a></li><li><a title="mt Profile" class="level2" href="/MyProfile.aspx">My Profile</a></li>
		</ul></li><li><a title="Log in to this web site" class="level1" href="/Login.aspx">Login</a></li>
	</ul>
</div><a id="Menu1_SkipLink"></a>
      
      
    </div>
    <div id="MainContent">

      <span id="SiteMapPath1"><a href="#SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/WebResource.axd?d=XJJb9GGeR4PW1rAXYQHUp8wynMZ2pSgPd3TeTsbiGJ3pmCw0aEE-xofB1TMuVwlLRF20fNr4TuA9rrWaXe4bOyP_sys59e0hFfHO9mKBKig1&amp;t=634611231807680760" style="border-width:0px;" /></a><span>Home</span><a id="SiteMapPath1_SkipLink"></a></span>
      <br />
      <br />
      
      <div id="MainContent">
      <h1>
        Hi there visitor and welcome to Planet Wrox</h1>
      <p class="Introduction">
        We're glad you're paying a visit to
        <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the coolest music 
        community site on the internet.</p>

      <p class="Introduction">
        Feel Free to have a <a href="Default.aspx">look around</a>; there are lots of interesting <strong>reviews 
        and concert pitures</strong> to be found here.</p>
        <p class="Introduction">
          You can <a href="Login.aspx">log in</a> here</p>

      </div>

    </div>
    <div id="Sidebar">Select a Theme<br />
      <select name="ctl00$ThemeList" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ThemeList\',\'\')', 0)" id="ThemeList">
	<option selected="selected" value="Monochrome">Monochrome</option>
	<option value="DarkGrey">DarkGrey</option>

</select>
      <br />
      <br />
      <br />
      <div id="Banner1_VerticalPanel">
	
 <a href="http://p2p.wrox.com" id="Banner1_VerticalLink" target="_blank">
  <img id="Banner1_Image1" src="Images/Banner120x240.gif" alt="This is a sample banner" /> </a> 

</div>


    </div>
    <div id="Footer">
      
      
    </div>
  </div>
  
  
  
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Here is my references in my CSS files

Code:

#Header
{
  /*
    Gives the header the same width as the PageWrapper. The height creates some room for the logo
    that is set with the background-image.
  */
  background-image: url(Images/Header.jpg);
  width: 844px;
  height: 86px;
}

#MenuWrapper
{
  /*
    The menu spans the page width, right below the header.
    At the top and left a few pixels padding is applied to create some room.
  */
  background-image: url(Images/MenuBackground.jpg);
  width: 827px;
  height: 36px;
  padding-top: 7px;
  padding-left: 17px;

#Sidebar
{
  /*
    The Sidebar is positioned to the right of the MainContent area. It gets the same font-size as #MainContent
    and gets a background image called Sidebar.jpg. To ensure the image is visible in (most) browsers
    on a small page, the element gets a minimum height of 500px. This is ignored by IE 6.
  */
  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;
}

.PleaseWait
{
  height: 32px;
  width: 500px;
  background-image: url(Images/PleaseWait.gif);
  background-repeat: no-repeat;
  padding-left: 40px;
  line-height: 32px;
}

.GridViewSortedAscendingHeaderStyle
{
  background-image: url(Images/SortAscending.png);
}

.GridViewSortedDescendingHeaderStyle
{
  background-image: url(Images/SortDescending.png);
}

It works fine when I run it VWD, so I wonder if the problem is when it got copied in the Release folder, it doesn't find the correct folder to read the styles, but I don't know.

Imar · January 27th, 2012, 08:43 AM

Hi there,

I can see a few issues that may explain what you're seeing.

In the CSS file, the closing } for MenuWrapper is missing. In addition, two HTML elements in the page have an id of MainContent. Each id should be unique.

Your code references two CSS files, but you only posted one. Maybe the other file has similar issues?

Cheers,

Imar