We help IT Professionals succeed at work.
Get Started

Master Page Layout problem

TonyReba
TonyReba asked
on
776 Views
Last Modified: 2012-05-09
I am designing a web form , for this purpose I have amaster page and a content place holder . The problem is that I need to correct the CSS or HTML errors it has so it can display well and also add a main zone to add a quiz ... please help
MasterPage:

<%@ Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" EnableViewState="false" %><!DOCTYPE html>
<html>
<head runat="server">
    <title>Procedure Tracer</title>
    <link rel="stylesheet" href="style.css" />
    <asp:ContentPlaceHolder id="Head" runat="server" />
</head>
<body>
    <div class="BackgroundGradient"> </div>
    <div class="BodyContent">

    <div class="BorderBorder"><div class="BorderBL"><div></div></div><div class="BorderBR"><div></div></div><div class="BorderTL"></div><div class="BorderTR"><div></div></div><div class="BorderT"></div><div class="BorderR"><div></div></div><div class="BorderB"><div></div></div><div class="BorderL"></div><div class="BorderC"></div><div class="Border">

        <div class="Header">
          <div class="HeaderTitle">
            <h1>Procedure Tracer</a></h1>
            <h2></h2>
          </div>
        </div><div class="Columns"><div class="MainColumn">
        <div class="ArticleBorder"><div class="ArticleBL"><div></div></div><div class="ArticleBR"><div></div></div><div class="ArticleTL"></div><div class="ArticleTR"><div></div></div><div class="ArticleT"></div><div class="ArticleR"><div></div></div><div class="ArticleB"><div></div></div><div class="ArticleL"></div><div class="ArticleC"></div><div class="Article">

            <asp:ContentPlaceHolder id="Content" runat="server" >

                <div>
                </div>
            </asp:ContentPlaceHolder>

        </div></div></div></div>
        </div></div>
    </div>
        <asp:ContentPlaceHolder id="AfterBody" runat="server" />
</body>
</html>


default asp:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" CodeFile="Default.aspx.cs" Inherits="Default" %>

<asp:Content ContentPlaceHolderID="Head" Runat="Server"><style type="text/css">
                                                            .style1
    {
        width: 93%;
                                                                height: 70px;
                                                            }
    .style2
    {
        width: 471px;
    }
</style>
</asp:Content>

<asp:Content ContentPlaceHolderID="Content" Runat="Server">
    <br />
<table class="style1">
    <tr>
        <td class="style2">
            <b>Nurses/Tech Name: </b>
        </td>
        <td>
            <b>Visit ID:</b></td>
    </tr>
    <tr>
        <td class="style2">
            <b>Procedure:</b>
        </td>
        <td>
            <b>Date:</b></td>
    </tr>
    <tr>
        <td class="style2">
            <b>Department:</b></td>
        <td>
            &nbsp;</td>
    </tr>
</table>
<br />
</asp:Content>

<asp:Content ContentPlaceHolderID="AfterBody" Runat="Server"></asp:Content>

css:

body{font-family:Calibri,Arial,Helvetica,sans-serif;margin:0;background:#93EFEF;color:#000;background:#93EFEF;}
ul{margin:5px;padding-left:20px;}
.BodyContent{position:relative;left:0;top:0;width:100%;margin:0 auto 0 auto;}
.BackgroundGradient{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1000;background:url('images/BackgroundGradient.png') repeat-x;}
.Border{position:relative;z-index:1;overflow:hidden;padding:5px 5px 5px 5px;color:#000;font-size:16px;}
.Border a{color:#00152D;text-decoration:underline;}
.Border a:visited{color:#00152D;text-decoration:underline;}
.Border a:hover{color:#000;text-decoration:none;}
.BorderBorder{z-index:0;position:relative;margin:0;}
.BorderTL,.BorderTR,.BorderBL,.BorderBR,.BorderL,.BorderT,.BorderR,.BorderB,.BorderC{position:absolute;z-index:-1;overflow:hidden;}
.BorderTL,.BorderTR,.BorderBL,.BorderBR{width:7px;height:7px;}
.BorderTL{top:0;left:0;background-image:url('images/BorderCorners.png');}
.BorderTR div,.BorderBL div,.BorderBR div{height:14px;width:14px;position:absolute;z-index:-1;background-image:url('images/BorderCorners.png');}
.BorderTR div{left:-7px;}
.BorderBL div{top:-7px;}
.BorderBR div{left:-7px;top:-7px;}
.BorderTR{top:0;right:0;}
.BorderBL{bottom:0;left:0;}
.BorderBR{bottom:0;right:0;}
.BorderT,.BorderB{left:7px;right:7px;height:7px;}
.BorderT{top:0;background-image:url('images/BorderHorizontal.png');}
.BorderB{bottom:0;}
.BorderB div{position:absolute;z-index:-1;top:-7px;height:14px;width:100%;background-image:url('images/BorderHorizontal.png');}
.BorderL,.BorderR{top:7px;bottom:7px;width:7px;}
.BorderL{left:0;background-image:url('images/BorderVertical.png');}
.BorderR{right:0;}
.BorderR div{position:absolute;z-index:-1;left:-7px;width:14px;height:100%;background-image:url('images/BorderVertical.png');}
.BorderC{left:7px;top:7px;right:7px;bottom:7px;background-image:url('images/BorderCenter.png');}
.BorderBorder{width:900px;margin:10px auto;}
.Header{position:relative;background-image:url('images/Header.png');background-repeat:no-repeat;padding:0;height:150px;color:#FFF;}
.HeaderTitle{height:150px;width:900px;display:table-cell;text-align:Default;vertical-align:Middle;color:#FFF;font-size:24px;text-decoration:none;font-style:normal;font-weight:bold;}
.HeaderTitle h1 a,.HeaderTitle h1 a:link,.HeaderTitle h1 a:visited,.HeaderTitle h1 a:hover{text-decoration:none;color:inherit;}
.HeaderTitle h1{margin:0;padding:0 8px;color:#FFF;font-family:Palatino Linotype,Book Antiqua,Palatino,serif;font-size:36px;text-decoration:none;font-style:normal;font-weight:bold;}
.HeaderTitle h2{margin:0;padding:0 8px;font-size:inherit;font-weight:inherit;}
.Menu{background:transparent url('images/MenuBar.png') no-repeat;padding:5px 5px 0 5px;margin:0;text-align:Default;}
.Menu ul{list-style-type:none;padding:0;margin:0;color:#FFF;}
.Menu li{display:inline;padding:0;margin:0;}
.MenuButton,.MenuButtonInput{border:0;margin:0;background:transparent url('images/MenuButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:28px;padding:0 0 0 18px;display:inline-block;color:#FFF;font-size:16px;vertical-align:middle;zoom:1;}
.MenuButton span,.MenuButtonInput span{border:0;margin:0;background:transparent url('images/MenuButton.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:18px;}
.MenuButton span{padding:5px 18px 5px 0;}
.MenuButtonInput span{padding:0 18px 0 0;height:28px;}
.MenuButtonInput input{color:#FFF;    border-style: none;
    border-color: inherit;
    border-width: 0;
    font-size:16px;    color:inherit;    height:28px;    padding:0 18px;    margin:0 -18px;    overflow:visible;    cursor:pointer;background:;
*    left:-18px;
}
.MenuButtonInput::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;}
.MenuButton,.MenuButton:link,.MenuButton:visited,.MenuButton:hover,.MenuButton:active{text-decoration:none!important;outline:none;}
.MenuButton:hover,.MenuButtonInput:hover{background-position:left center;}
.MenuButton:hover span,.MenuButtonInput:hover span{background-position:right center;color:#FFF;}
.MenuButton:active,.MenuButtonInput:active{background-position:left bottom;}
.MenuButton:active span,.MenuButtonInput:active span{background-position:right bottom;color:#000;}
.ActiveMenuButton,.ActiveMenuButtonInput{border:0;margin:0;background:transparent url('images/ActiveMenuButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:28px;padding:0 0 0 18px;display:inline-block;color:#000;font-size:16px;vertical-align:middle;zoom:1;}
.ActiveMenuButton span,.ActiveMenuButtonInput span{border:0;margin:0;background:transparent url('images/ActiveMenuButton.png') no-repeat right top;display:block;position:relative;color:#000;line-height:18px;}
.ActiveMenuButton span{padding:5px 18px 5px 0;}
.ActiveMenuButtonInput span{padding:0 18px 0 0;height:28px;}
.ActiveMenuButtonInput input{color:#000;    border-style: none;
    border-color: inherit;
    border-width: 0;
    font-size:16px;    color:inherit;    height:28px;    padding:0 18px;    margin:0 -18px;    overflow:visible;    cursor:pointer;background:;
*    left:-18px;
}
.ActiveMenuButtonInput::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;}
.ActiveMenuButton,.ActiveMenuButton:link,.ActiveMenuButton:visited,.ActiveMenuButton:hover,.ActiveMenuButton:active{text-decoration:none!important;outline:none;}
.ActiveMenuButton:hover,.ActiveMenuButtonInput:hover{background-position:left center;}
.ActiveMenuButton:hover span,.ActiveMenuButtonInput:hover span{background-position:right center;color:#FFF;}
.ActiveMenuButton:active,.ActiveMenuButtonInput:active{background-position:left bottom;}
.ActiveMenuButton:active span,.ActiveMenuButtonInput:active span{background-position:right bottom;color:#000;}
.Columns{overflow:hidden;}
.Column1{overflow:hidden;float:right;width:20%;}
.Column2{overflow:hidden;float:right;width:20%;}
.MainColumn{overflow:hidden;}
img{border:0;}
h2{margin:0;}
blockquote{width:80%;color:#000;border:solid 1px #3B3B2B;background:#FFF;margin:0 auto;padding:15px;-webkit-border-radius:5px;-moz-border-radius:5px;}
blockquote a,blockquote a:link{color:#00628B!important;text-decoration:underline;}
blockquote a:visited{color:#00628B!important;text-decoration:underline;}
blockquote a:hover{color:#000!important;text-decoration:none;}
.Article{position:relative;z-index:1;overflow:hidden;padding:15px 15px 15px 15px;color:#000;font-size:16px;}
.Article a{color:#00628B;text-decoration:underline;}
.Article a:visited{color:#00628B;text-decoration:underline;}
.Article a:hover{color:#000;text-decoration:none;}
.ArticleBorder{z-index:0;position:relative;margin:3px;}
.ArticleTL,.ArticleTR,.ArticleBL,.ArticleBR,.ArticleL,.ArticleT,.ArticleR,.ArticleB,.ArticleC{position:absolute;z-index:-1;overflow:hidden;}
.ArticleTL,.ArticleTR,.ArticleBL,.ArticleBR{width:12px;height:12px;}
.ArticleTL{top:0;left:0;background-image:url('images/ArticleCorners.png');}
.ArticleTR div,.ArticleBL div,.ArticleBR div{height:24px;width:24px;position:absolute;z-index:-1;background-image:url('images/ArticleCorners.png');}
.ArticleTR div{left:-12px;}
.ArticleBL div{top:-12px;}
.ArticleBR div{left:-12px;top:-12px;}
.ArticleTR{top:0;right:0;}
.ArticleBL{bottom:0;left:0;}
.ArticleBR{bottom:0;right:0;}
.ArticleT,.ArticleB{left:12px;right:12px;height:12px;}
.ArticleT{top:0;background-image:url('images/ArticleHorizontal.png');}
.ArticleB{bottom:0;}
.ArticleB div{position:absolute;z-index:-1;top:-12px;height:24px;width:100%;background-image:url('images/ArticleHorizontal.png');}
.ArticleL,.ArticleR{top:12px;bottom:12px;width:12px;}
.ArticleL{left:0;background-image:url('images/ArticleVertical.png');}
.ArticleR{right:0;}
.ArticleR div{position:absolute;z-index:-1;left:-12px;width:24px;height:100%;background-image:url('images/ArticleVertical.png');}
.ArticleC{left:12px;top:12px;right:12px;bottom:12px;background-image:url('images/ArticleCenter.png');}
.Article h2{color:#000;font-size:24px;text-decoration:none;font-style:normal;font-weight:bold;}
.Article h2 a,.Article h2 a:visited{color:#000;text-decoration:none;}
.Article h2 a:hover{text-decoration:underline;}
.Block{position:relative;z-index:1;overflow:hidden;padding:10px 10px 10px 10px;color:#000;font-size:16px;}
.Block a{color:#00628B;text-decoration:underline;}
.Block a:visited{color:#00628B;text-decoration:underline;}
.Block a:hover{color:#000;text-decoration:none;}
.BlockBorder{z-index:0;position:relative;margin:3px;}
.BlockTL,.BlockTR,.BlockBL,.BlockBR,.BlockL,.BlockT,.BlockR,.BlockB,.BlockC{position:absolute;z-index:-1;overflow:hidden;}
.BlockTL,.BlockTR,.BlockBL,.BlockBR{width:12px;height:12px;}
.BlockTL{top:0;left:0;background-image:url('images/BlockCorners.png');}
.BlockTR div,.BlockBL div,.BlockBR div{height:24px;width:24px;position:absolute;z-index:-1;background-image:url('images/BlockCorners.png');}
.BlockTR div{left:-12px;}
.BlockBL div{top:-12px;}
.BlockBR div{left:-12px;top:-12px;}
.BlockTR{top:0;right:0;}
.BlockBL{bottom:0;left:0;}
.BlockBR{bottom:0;right:0;}
.BlockT,.BlockB{left:12px;right:12px;height:12px;}
.BlockT{top:0;background-image:url('images/BlockHorizontal.png');}
.BlockB{bottom:0;}
.BlockB div{position:absolute;z-index:-1;top:-12px;height:24px;width:100%;background-image:url('images/BlockHorizontal.png');}
.BlockL,.BlockR{top:12px;bottom:12px;width:12px;}
.BlockL{left:0;background-image:url('images/BlockVertical.png');}
.BlockR{right:0;}
.BlockR div{position:absolute;z-index:-1;left:-12px;width:24px;height:100%;background-image:url('images/BlockVertical.png');}
.BlockC{left:12px;top:12px;right:12px;bottom:12px;background-image:url('images/BlockCenter.png');}
.BlockHeader{border:0;margin:0;background:transparent url('images/BlockHeaderAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:28px;padding:0 0 0 18px;display:block;color:#FFF;font-size:16px;font-weight:bold;vertical-align:middle;zoom:1;}
.BlockHeader span{border:0;margin:0;background:transparent url('images/BlockHeader.png') no-repeat right top;display:block;position:relative;color:#FFF;line-height:18px;}
.BlockHeader span{padding:5px 18px 5px 0;}
.BlockHeader{margin:0 0 7px 0;}
.BlockContentBorder{position:relative;z-index:1;overflow:hidden;padding:5px 5px 5px 5px;color:#000;font-size:16px;margin:0;}
.BlockContentBorder a{color:#00628B;text-decoration:underline;}
.BlockContentBorder a:visited{color:#00628B;text-decoration:underline;}
.BlockContentBorder a:hover{color:#000;text-decoration:none;}
.Button,.ButtonInput{border:0;margin:0;background:transparent url('images/ButtonAnchor.png') no-repeat top left;position:relative;overflow:hidden;height:36px;padding:0 0 0 22px;display:inline-block;color:#000;font-size:16px;vertical-align:middle;zoom:1;}
.Button span,.ButtonInput span{border:0;margin:0;background:transparent url('images/Button.png') no-repeat right top;display:block;position:relative;color:#000;line-height:18px;}
.Button span{padding:9px 22px 9px 0;}
.ButtonInput span{padding:0 22px 0 0;height:36px;}
.ButtonInput input{color:#000;    border-style: none;
    border-color: inherit;
    border-width: 0;
    font-size:16px;    color:inherit;    height:36px;    padding:0 22px;    margin:0 -22px;    overflow:visible;    cursor:pointer;background:;
*    left:-22px;
}
.ButtonInput::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;}
.Button,.Button:link,.Button:visited,.Button:hover,.Button:active{text-decoration:none!important;outline:none;}
.Button:hover,.ButtonInput:hover{background-position:left center;}
.Button:hover span,.ButtonInput:hover span{background-position:right center;color:#FFF;}
.Button:active,.ButtonInput:active{background-position:left bottom;}
.Button:active span,.ButtonInput:active span{background-position:right bottom;color:#000;}
.Footer{color:#000;font-size:16px;text-align:Center;background:url('images/Footer.png') bottom left;overflow:hidden;padding:5px 5px;}
.Footer a{color:#00628B;text-decoration:underline;}
.Footer a:visited{color:#00628B;text-decoration:underline;}
.Footer a:hover{color:#000;text-decoration:none;}
.BackLink{text-align:center;display:block;display:block;font-size:11px;padding:0 0 12px;color:#000;}
.BackLink a{color:#000;}

Open in new window

Comment
Watch Question
C# ASP.NET Developer
Top Expert 2010
Commented:
This problem has been solved!
Unlock 1 Answer and 8 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE