Chapter 3 Questions so far

Paul Loh · July 2nd, 2015, 05:19 AM

Hi
I have 2 questions:

Question 1:
On page 80 of text book, I tried to install Modernizr. I choose "Tools". But the "Library Package Manager" icon does not exist. Instead there is: "NuGet Package Manager". Under this icon, there "Package Manager Console". I chose this icon and installed "Modernizr 2.8.3". The file "packages.config" did appear in Solution Explorer. I dragged "package.config" to the head section directly after the link to the style sheet, but got different codes:

<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
<a href="packages.config">packages.config</a>
</head>

If I render the page on the browser with this link,there is an error message on the top-left corner that says: "package.config"

Question 2:
In addition, sequence of all items is exactly the same as the text book. However, it appears completely in the center of the page with about 2 inches margin on the left and right side of the page. When I browse it through Internet Explorer. I am unable to insert a screen shot into this forum otherwise it will be easier to explain.
I checked the CSS stylesheet several times and it is in accordance with the text book. I did see that "#PageWrapper" has a width of 844px and margin is auto. Can this be the reason?

Imar · July 2nd, 2015, 06:56 PM

Hi there,

NuGet / Library Package Manager are the same thing. Which version of VS are you using?

You shouldn't drag in Packages.config, but the modernizr library instead.

margin: auto does indeed center the content in the browser. Is that not what you're seeing? Figure 3-8 shows the site centered as well. If it's not what you're seeing, please post your CSS code and the code for the master page.

Cheers,

Imar

Paul Loh · July 2nd, 2015, 10:48 PM

Thank you so much for your attention.

My VS version is exactly the one instructed in the textbook - "Microsft Visual Studio Express 2013 for Web".

Ok, I now noticed it should be from Scripts folder. So my last original step of dragging "packages.config" was wrong? Do I need to unwind that? If so, how? Just delete it?

Margin: I have a 15" laptop monitor and I use screen resolution 1980x1080. All contents in the browser is the same as the one in page 80, except that it does not stretch from left edge to right edge in the browser. It is right in the middle of the screen and occupied only about 40% of the entire screen. Here are my CSS codes:

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

{
font-family: Arial;
}

h1
{
font-size: 20px;
}

#PageWrapper
{
width: 844px;
margin: auto;
}

nav
{
width: 844px;
}

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

aside
{
background-color: Gray;
width: 180px;
float: left;
}

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

Codes for master page:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#form1 {
font-weight: 700;
}
.auto-style1 {
color: #009900;
}
.auto-style2 {
color: #FF3300;
}
</style>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
<script src="Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<header>Header Goes Here</header>
<nav>Menu Goes Here</nav>
<section id="MainContent">
<h1>Hi there visitor and welcome to Planet Wrox</h1>

<p>We are glad you are <span class="auto-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 <span class="auto-style2">reviews and concert pictures</span> to be found here.</p>
</section>
<aside id="Sidebar">Sidebar Goes Here</aside>
<footer>Footer Goes Here</footer>
</div>
</form>
</body>
</html>

Imar · July 7th, 2015, 10:48 AM

Quote:

Ok, I now noticed it should be from Scripts folder. So my last original step of dragging "packages.config" was wrong? Do I need to unwind that? If so, how? Just delete it?

Yep, that was wrong. Just delete the line from the code file.

Quote:

It is right in the middle of the screen and occupied only about 40% of the entire screen.

That's by design. The site uses a fixed-width layout. In the screenshots it's also centered but the browser window has been resized to just fit around the site content.

Cheers,

Imar