Wrox Programmer Forums
|
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old December 9th, 2010, 11:12 AM
Authorized User
 
Join Date: Feb 2010
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default Chapter 9 - Page 301 Try it Out

I think I correctly followed the instructions for the Try it Out on page 301. After setting up the table, however, I added some data and centered some of the cell information. This page looks great, but now my site home page (default.aspx from the root directory) has all data centered as well. This page has properties "Align left" and the css file has "#MainContent float: left."
What is causing these to be overridden? I don't think I changed anything else (hopefully).
 
Old December 9th, 2010, 11:17 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

Can you post the relevant code for your master page, home page and CSS files?

Cheers,

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!
 
Old December 9th, 2010, 11:31 AM
Authorized User
 
Join Date: Feb 2010
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

Imar,

I'm going through this part of the book a second time. The first time I did exactly as instructed and everything worked fine. I'm now going through again trying to make fairly minor changes (I think) to learn how to use what I've learned. I tell you this because the files won't match yours exactly - but they should be very close.

Master Page:
Code:
<%@ Master Language="VB" CodeFile="Frontend.master.vb" Inherits="MasterPages_Frontend" %>

<%@ Register src="~/Controls/Banner.ascx" tagname="Banner" tagprefix="uc1" %>

<!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>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    </head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
        <div id="Header"><a href="~/" runat="server"></a></div>
        <div id="MenuWrapper">
            <asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
                DataSourceID="SiteMapDataSource2" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="False" Visible="True" Font-Bold="True" 
                ItemWrap="True">
                <StaticHoverStyle Font-Bold="True" />
            </asp:Menu>
            <asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource2" 
                ShowExpandCollapse="False" Visible="False">
            <LevelStyles>
            <asp:TreeNodeStyle CssClass="FirstLevelMenuItems" />
            </LevelStyles>
            </asp:TreeView>
            <asp:SiteMapDataSource ID="SiteMapDataSource2" runat="server" 
                ShowStartingNode="False" />
        </div>
        <div id="MainContent">
            <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
            </asp:ContentPlaceHolder>
        </div>
       
   
       
        <div id="Footer">Footer goes here</div>

    </form>
</body>
</html>
ContactForm
Code:
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ContactForm.ascx.vb" Inherits="Controls_ContactForm" %>
<style type="text/css">
    .style1
    {
        width: 100%;
    }
    .style2
    {
        text-align: center;
        width: 200px;
    }
    .style3
    {
        text-align: left;
    }
</style>

<table class="style1">
    <tr>
        <td colspan="3">
            Use this form to get in touch with us</td>
    </tr>
    <tr>
        <td class="style2">
            Name</td>
        <td class="style3">
            <asp:TextBox ID="Name" runat="server" Width="424px"></asp:TextBox>
        </td>
        <td>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
                ControlToValidate="Name" CssClass="ErrorMessage" ErrorMessage="Enter your name">*
                </asp:RequiredFieldValidator>
        </td>
    </tr>
    <tr>
        <td class="style2">
            Email Address</td>
        <td class="style3">
            <asp:TextBox ID="EmailAddress" runat="server" Width="424px"></asp:TextBox>
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
            Best Phone Number</td>
        <td class="style3">
            <asp:TextBox ID="PhoneNumber" runat="server" Width="424px"></asp:TextBox>
        </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</td>
        <td class="style3">
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</td>
        <td class="style3">
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</td>
        <td class="style3">
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td class="style2">
            &nbsp;</td>
        <td>
            <asp:Button ID="SendButton" runat="server" Text="Send" />
        </td>
        <td>
            &nbsp;</td>
    </tr>
</table>
Default.aspx (home page)
Code:
<%@ Page Title="Default Page" Language="VB" MasterPageFile="~/MasterPages/Frontend.master" AutoEventWireup="false" 
CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
    <h1 class="Introduction" style="padding: 0px; margin: 0px 0px 10px 0px">
        Welcome to the Woods Landing community web site.</h1>
    
    <p class="Introduction">
        The first thing you notice about Woods Landing are the trees.  Nature abounds
        in this 99-unit development.  In 1981, developer Steve Seawright
        designed and developed Woods Landing on the Little Magothy for which he was
        awarded the Department of Natural Resources "Excellence in Forest Conservation
        and Land Development White Oak Award."  More impressively, Seawright developed the community 
        prior to Maryland's laws requiring forest conservation.  The wetlands, nature paths,
        landscaped walkways and observation towers overlooking the Little Magothy complete
        the natural experience in our eclectic community.</p>
        <p align="center">Woods Landing has also won two other prestigious awards:
            <br />---->Best Commercial Design for a Residential Community 
            (Metropolitan Washington and Baltimore Landscape Contractor's Association)
    <br />---->Award of Excellence for Architectural Design (Home Builders Association of Maryland)</p>
    <br /><br />
        <p>
        You can <a href="Login.aspx">log in</a> here.  To request a login and password, call 800-000-0000.</p>
    <p class="Introduction">
        For news, check out <a href="http://www.cnn.com">www.cnn.com</a>.&nbsp; For 
        stock market-specific news, check out <a href="http://www.marketwatch.com">
        www.marketwatch.com</a>.</p>
</asp:Content>
 
Old December 9th, 2010, 11:41 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

And where's the CSS file and how is it referenced by yor code?

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!
 
Old December 9th, 2010, 11:52 AM
Authorized User
 
Join Date: Feb 2010
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

The CSS file confuses me. I ended up taking just the one for DarkGrey and am trying to use it alone. I don't know how the program references it, but I'll try to figure that out.

The CSS file:
Code:
*
{
  /* 
    Defines the main font used throughout the entire site 
  */
  font-family: Verdana, Arial, Sans-Serif;
    text-align: center;
    font-size: medium;
    margin-left: 0px;
}

body
{
  /* 
    Clears white space around the body and sets the background color to a dark grey.
  */
  margin: 0;
  background-color: #464646;
}

a
{
  /*
    Clears the underline on normal links, and gives them #da6637 as the text color.
  */
  color: #da6637;
  text-decoration: none;
}

a:hover
{
  /*
    Underlines links when the user hovers the mouse over them.
  */
  text-decoration: underline;
}

h1
{
  /*
    Makes h1 elements smaller than their browser default.
  */
  font-size: 20px;
}

#Header
{
  /*
    Sets the background of the header to the same color as the right-hand side of the 
    header image. This way, the header can expand to the right.
    The margin at the bottom creates some room between the header and the menu and the main content.
  */
  background-color: #464646;
  margin-bottom: 20px;
}

#Header a
{
  /*
    The #Header a is nested in the #Header. It provides a link to the homepage,
    and sets the header image background.
  */
  background-image: url(Images/Header.jpg);
  background-repeat: no-repeat;
  width: 944px;
  height: 138px;
  display: block;  
}

#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: 944px;
  height: 36px;
  padding-top: 7px;
  padding-left: 17px;
}

.FirstLevelMenuItems
{
    padding-top: 10px;
}

.MainMenu
{
  /*
    The Menu gets a white border on all four sides.
  */
  border: 1px solid white;
  width: 830px;
  height: 19px;
  background-color : #cccccc;
}

.MainMenu ul li
{
  /*
    Gives the menu items in the main menu a width of 150px each
  */
  width: 150px;
}

#MainContent
{
    /*
    Defines the main content area. The text color is white (on the gray background set on the body).
    The #MainContent element has a minimum height of 370 pixels, but can grow if necessary.
    The font-size is 80% of its parent element, which in this case comes down to 80% of the font
    the user has specified as the default font in the browser.
  */
    color: white;
    font-size: small;
    width: 870px;
    min-height: 370px;
    padding: 10px;
    float: left;
}

#Sidebar
{
  /*
    The Sidebar is positioned absolutely at the right of the page.
    It has the same font-size and color as #MainContent
  */
  font-size: 0.8em;
  width: 124px;
  color: White;
  float: left;
  padding-top: 10px;
}

#Footer
{
  /*
    The footer is positioned below all other content.
    At the top, it gets a border with a dashed style, while all other sides have no border.
  */
  text-align: center;
  border-top: 2px dashed gray;
  height: 37px;
  clear: both;
  background-color: #8B3818;
    width: 893px;
}

.Introduction
{
  font-style: italic;
}

.MyButton
{
    color: White;
}

img
{
    border: 0;
}
u1.level1
{
    font-size: 10px;
    font-weight: bold;
    height: 19px;
    line-height: 19px;
}

u1.level1 .selected
{
    /* Defines the appearance of the active menu items */
    background-color: #BCD1FE;
    color: #CC0000;
    font-weight: bolder;
}
a.level1
{
    /* Adds some white space to the left of the main menu item text */
    margin-left: 5px;
}

a.level2
{
    /* Defines the appearance of the sub menu items */
    background-color: #cccccc;
    padding-left: 8px;
}

a.level1:hover, a.level2:hover
{
    /* Defines the hover style for the main and sub items */
    background-color: #BCD1FE;
}

.ErrorMessage
{
    color: Red;
}
 
Old December 9th, 2010, 11:54 AM
Authorized User
 
Join Date: Feb 2010
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

One more thing: although I don't know how the program references this CSS file, I do know it is referenced because I make changes to it and see the effects on my home page menu.
 
Old December 9th, 2010, 12:57 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

It's probably referenced by a theme?

I think the centering is caused by this rule set:

Code:
 
*
{
 /*
   Defines the main font used throughout the entire site
 */
 font-family: Verdana, Arial, Sans-Serif;
   text-align: center;
   font-size: medium;
   margin-left: 0px;
}
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!
The Following User Says Thank You to Imar For This Useful Post:
demac3 (December 9th, 2010)
 
Old December 9th, 2010, 02:47 PM
Authorized User
 
Join Date: Feb 2010
Posts: 42
Thanks: 9
Thanked 0 Times in 0 Posts
Default

That solved the problem, Imar. Thanks!





Similar Threads
Thread Thread Starter Forum Replies Last Post
pg 301... Connecting a data source problems... richv BOOK: Beginning SharePoint 2010 Development 1 September 2nd, 2010 04:16 AM
CH 12 page 301 (overloaded method) jon4554 BOOK: Beginning C# 3.0 : An Introduction to Object Oriented Programming ISBN: 978-0-470-26129-3 1 March 2nd, 2010 03:02 PM
chapter 2 - page 41 problem creating the page.. jorjiana BOOK: Beginning Oracle Application Express ISBN: 9780470388372 2 August 22nd, 2009 04:25 AM
Chapter 3 Page 95 jumpot89 BOOK: Beginning PHP5, Apache, and MySQL Web Development ISBN: 978-0-7645-7966-0 6 April 22nd, 2009 03:11 AM
Chapter 1 page 74 dryan BOOK: Beginning PHP, Apache, MySQL Web Development ISBN: 978-0-7645-5744-6 2 June 16th, 2004 02:16 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.