CH6

mikeal_a · #1 (**permalink**) May 19th, 2011, 03:34 PM

Hello,
I'm going through CH6 and have created the master page and assigned the styles.css. When I view the master page in design view the sidebar is not going to the side as shown on figure 6-2 on page 201 when viewing frontend.master in design view. The css works fine on the default.aspx example. The sidebar is appearing underneath the menu. Any suggestions?

Here is a portion of css:
#MainContent
{
width: 664px;
float: left;
}
#Sidebar
{
background-color: #C0C0C0;
width: 180px;
float: left;
}

CODE for masterpage
<%@MasterLanguage="VB"CodeFile="Frontend.master.vb"Inherits="MasterPages_FrontEnd" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<asp:ContentPlaceHolderid="head"runat="server">
</asp:ContentPlaceHolder>
<linkhref="../Styles/styles.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<formid="form1"runat="server">
<divid="PageWrapper">
<divid="Header"><ahref="~/"runat="server">Header Goes Here</a></div>
<divid="MenuWrapper">Menu Goes Here</div>
<divid="MainContent">
<asp:ContentPlaceHolderID="cpMainContent"runat="server">
</asp:ContentPlaceHolder><divid="Sidebar">Sidebar Goes Here</div><divid="Footer">Footer Goes Here</div></div>
</form>
</body>
</html>

Imar · #2 (**permalink**) May 19th, 2011, 04:01 PM

Hi there,

Is the Design View in VS wide enough to show the page?

If it is, can you repost the code but paste it in Notepad first to remove color coding and then use the Code button on the editor's toolbar (on a post) to wrap it in Code tags? Due to some bug in this forum, colored code ends up as unusable...

Imar

mikeal_a · #3 (**permalink**) May 19th, 2011, 04:21 PM

Thanks for your reply! The display is wide enough. Look forward to your response.

Frontend.master

Code:

 
<%@ Master Language="VB" CodeFile="Frontend.master.vb" Inherits="MasterPages_FrontEnd" %>
<!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>
    <link href="../Styles/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="PageWrapper">
        <div id="Header"><a href="~/" runat ="server">Header Goes Here</a></div>
        <div id="MenuWrapper">Menu Goes Here</div>
        <div id="MainContent">
            <asp:ContentPlaceHolder ID="cpMainContent" runat="server">
            </asp:ContentPlaceHolder>    
        <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;
}
.Introduction
        {
            font-style: italic;
            color: #0000FF;
        }
#PageWrapper
{
    width: 844px;
}
#MenuWrapper
{
    width: 844px;
}
#MainContent
{
    width: 664px;
    float: left;
}
#Sidebar
{
    background-color: #C0C0C0;
    width: 180px;
    float: left;
}
#Footer
{
    background-color: #C0C0C0;
    width: 844px;
    clear: both;
}
#MainContent a
{
    color: #008000;
    text-decoration: underline;
}
#MainContent a:visited
{
    color: #FF0000;
    text-decoration: underline;
}
#MainContent a:hover
{
    color: #FFA500;
    text-decoration: underline;
}
h1
{
    padding: 0px 0px 10px 0px;
}

Imar · #4 (**permalink**) May 19th, 2011, 04:34 PM

Hi mikeal,

You have a missing </div> between </asp:ContentPlaceholder> and the opening <div /> for the Sidebar.

You may see that issue appear as a warning in the Error List which may help track down future issues like this.

Cheers,

Imar

mikeal_a · #5 (**permalink**) May 19th, 2011, 04:41 PM

Thank you! I keep looking at code and did not see it... At least now I'll never forget to use the Error List, thanks for the advice.

Regards,
Mike

Need to download code?

Navigation