Master Page

Armaan · April 21st, 2012, 03:59 PM

Master Page

Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Frontend.master.cs" Inherits="MasterPage_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>

Css file

Code:

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

*
{
  font-family: Arial;
}

h1
{
  font-size: 20px;
}

.Introduction
{
  font-style: italic;
  color: #003399;
}

#PageWrapper
{
  width: 844px;
}

#MenuWrapper
{
  width: 844px;
}

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

#Sidebar
{
  background-color: Gray;
  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;
  margin: 0px 0px 10px 0px;
}

Sir this is the code of my css file and master page.Now please tell me why my sidebar does not aligned on right and it comes above the footer?

Thanks

Imar · April 21st, 2012, 04:22 PM

Hi there,

Your MainContent div is missing its closing </div> tag.

Cheers,

Imar

supdike · May 14th, 2012, 05:50 PM

My MainContent has the closing div. My sidebar behaves the same as the origional poster's in design view, but displays correctly when i view it in the browser. Any idea why? thanks!

Imar · May 15th, 2012, 02:24 AM

Hi there,

Can you post the code for the master page? Also, is your CSS file stored in the correct folder and does it contain the proper CSS code?

Imar

supdike · May 15th, 2012, 09:20 AM

Imar,

The Style sheet is in the Styles filder. I believe the page is finding it, as the formatting is applied in the browser and (for the most part) in design view.

thanks. s.

Code:

<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>
            <div id="Sidebar">Sidebar Goes Here</div>
            <div id="footer">Footer Goes Here</div>
        </div>
    </form>
</body>

Code:

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

*
{
    font-family: Arial;
}

h1
{
    font-size: 20px;
}

.Introduction
{
    font-style: italic;
    color: #003399;
}

#PageWrapper
{
    width: 844px;
}

#MenuWrapper
{
    width: 844px;
}


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

#Sidebar
{
    background-color: #808080;
    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
{
    margin: 0px 0px 10px 0px;
    padding: 0px;
}

Imar · May 15th, 2012, 10:04 AM

When I run your code, the page doesn't look in Design View nor in the browser. Which browser did you test this on? I had to make the following changes to the master page:

1. Change Maincontent to MainContent (the CSS selector uses MainContent with a capital C)

2. Change footer to Footer

With these changes, the page looked OK in Design View and in the browser.

Hope this helps.

Imar

supdike · May 15th, 2012, 11:04 AM

IE9. I would attach pics, but not sure if it is possible. I will try your suggestions. s.

supdike · May 15th, 2012, 11:10 AM

Imar, Sugesstions worked. "Design" now looks same as in the browser. Thanks. I'll watch my case closer from now on. BTW, you book rocks! Fantastic resource.

Imar · May 17th, 2012, 11:25 AM

Quote:

BTW, you book rocks! Fantastic resource.

Thank you!

Imar