Chapter 9

demac3 · December 9th, 2010, 11:12 AM

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).

Imar · December 9th, 2010, 11:17 AM

Hi there,

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

Cheers,

Imar

demac3 · December 9th, 2010, 11:31 AM

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>

Imar · December 9th, 2010, 11:41 AM

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

Imar

demac3 · December 9th, 2010, 11:52 AM

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;
}

demac3 · December 9th, 2010, 11:54 AM

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.

Imar · December 9th, 2010, 12:57 PM

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

demac3 · December 9th, 2010, 02:47 PM

That solved the problem, Imar. Thanks!