Ch 2 Try It Out, p 79

thatolkevin · July 16th, 2011, 07:29 PM

I cannot figure out why my display is so much different than Figure 3-8 despite careful checking and rechecking of my code. The differences are:

* The "Header goes here" section is only one line and has no grey background.
* The "Sidebar goes here" section originally displayed on the left. I changed "left" to "right" in my code (perhaps pp. 82, 83 need to be added to your Errata?)
*My sidebar portion appears below the written text, rather than above the header. (I made my best determination where to put it in the code, the "..." in Step 2 being a bit confusing.)

Here is the code from the two relevant files.

Default.aspx

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
      .style1 {
        color: #990000;
      }
    </style>
    <link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper>
      <div id="Header">Header goes here</div>
      <div id="MenuWrapper">Menu goes here</div>
      <div id="MainContent"></div>
    
      <h1>
        Greetings, visitor!&nbsp; Welcome to Planet 
        Wrox!
      </h1>
      <p>
        How nice of you to pay a visit to <a href="http://www.PlanetKevin.com">
        www.PlanetWrox.com</a>, the coolest community pertaining to all things 
        music in 
        the whole wide internet.&nbsp; <span class="style1">This unrelated text is a 
        different color, even.</span></p>
      <p>
        Have a look around.&nbsp; There will be some
        <strong>reviews and concert pictures</strong> found here forthwith.</p>
    
    </div>
    <div id="Sidebar">Sidebar goes here</div>
    <div id="Footer">Footer goes here</div>
    </div>
    </form>
</body>
</html>

Styles.css

Code:

#Header
{
  background-color: #C0C0C0;
  width: 844px;
  height: 86px;
}

*
{
  font-family: Arial;
}

h1
{
  font-size: 20px;
}

#PageWrapper
{
 width: 844px; 
}

#MenuWrapper
{
  width: 844px;
}

#MainContent
{
  width: 664px;
  float: left;
}

#Sidebar
{
  background-color: Gray;
  width: 180px;
  float: right;
}

#Footer
{
  background-color: #C0C0C0;
  width: 844px;
  clear: both;
}

Thanks in advance.

Imar · July 17th, 2011, 04:37 AM

Hi there,

I can see three issues with your code that might be causing problems:

1.

Code:

<div id="PageWrapper>

The id is not closed properly. It should be:

Code:

<div id="PageWrapper">

2.

Code:

<div id="MainContent"></div>

You're closing off the MainContent too early. The closing </div> should be removed here as the MainContent div is already closed with </div> just before </form>. With your current code, the MainContent is empty and the PageWrapper gets closed too early too.

3. float: right; for the Sidebar should really be float: left; with float you define where surrounding content goes.

The ... in Step meant "all current code that was already there". The MainContent div is printed in bold to make that a bit easier to read. I guess that didn't work out too well ;-)

Remember: the book comes with the full source code for each chapter so it's easy to compare your code with mine in case you see any differences.

Hope this helps, and if not please let me know.

Cheers,

Imar

thatolkevin · July 17th, 2011, 06:54 PM

I bought this book because the Amazon reviews went on and on about how well organized and presented the content was. Thus far, it is exactly as they say. That I'd get a quick reply to my question from the author himself is an exceptional bonus.

Your solutions were correct. I don't know how I missed such obvious differences in the code looking over it so many times.

Thanks again.

Imar · July 18th, 2011, 03:23 AM

You're more than welcome. Good to hear you like the book.

Cheers,

Imar

PhilC · March 15th, 2013, 02:42 PM

Sorry - The following query has been solved. Missing Quote mark on MainContent and moved </div> in trying to fix it. Please ignore the request.

Thanks

This thread is the nearest to asking questions for the problem I have.

In my case the page when viewed in the browser skips presenting the <h1> section and starts again at 'paying a visit to www.Planetwrox ....'

the Sidebar is in Grey but then presented below the main text and not to the right as in the example figure.

I have checked the source file but that isn't helpful as it is not a match for the code we were asked to test. The source file is different with <p class="Introduction" ... which has not been covered in the book as yet.

heres my default.aspx section -

<style type="text/css">
.style1
{
color: #FF0000
}
</style>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">Header Goes Here</div>
<div id="MenuWrapper">Menu Goes Here</div>
<div id="MainContent>
<h1>Hi there visitor and welcome to Planet Wrox</h1>
<p>
We're glad you're <span class="style1">paying a visit</span> to
<a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the coolest music
community site on the Internet.</p>
<p>
Feel free to have a look around; there are lots of interesting <strong>reviews
and concert pictures</strong> to be found here.</p>
<div id="Sidebar">Sidebar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</div>
</form>
</body>

the Styles CSS file is the same as the source file but for the MainContent a section onwards which has not yet been done in the book.

Is this why the demo was shown in Mozilla and not IE ?

Thanks
Phil

07Raghav · March 22nd, 2013, 03:11 PM

Hi PhilC,

I don't get what you are asking so can't be very specific. You say that you added the ["] but your .aspx file still has the erroneous code.
Nevertheless it has got nothing to do with browser and the source file as far as I have tried out [have completed the book thrice] is perfectly correct.

1) You have left the ["] in declaring the MainContent id.

<div id="MainContent> ... </div>

instead of

<div id="MainContent"> ... </div>

Be specific and accurate when declaring id and classes.

2) Have not closed the MainContent div at all

And if the error still continues mention the .css and .aspx code.

By the way your .aspx file code between the <body> ... </body> should be like this after :-

Code:

<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">Header Goes Here</div>
<div id="MenuWrapper">Menu Goes Here</div>
<div id="MainContent">

<h1>Hi there visitor and welcome to Planet Wrox</h1>

<p>We're glad you're <span class="style1">paying a visit</span> to <a href="http://www.PlanetWrox.com">www.PlanetWrox.com</a>, the coolest music community site on the Internet.</p>
<p>Feel free to have a look around; there are lots of interesting <strong>reviews and concert pictures</strong> to be found here.</p>

</div>
<div id="Sidebar">Sidebar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</form>

PhilC · March 23rd, 2013, 03:30 PM

Hi (Sorry don't know your name).

Please forgive me, I did edit my original post to say that I had found the problem. I agree I had not properly closed the core code with the correct nesting of '}' characters and I had missed off a Quote mark. Once these were clear the code compiled and the routine worked.

Thanks anyway I am sorry you have spent time on this.

Regards
Phil.