G
Guest
I am trying to create some pages and have them take 100% of the window, but I
cannot get 100% to work. If I set the height of my div, the page displays a
scroll bar and it looks like I set the height to about 150%. I tried using
CSS, now I am trying tables. Can someone show me where I am mixing things up?
Thanks.
--Master Sheet
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="master.master.cs"
Inherits="pts" %>
<!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>Project Tracking System</title>
<script language="JavaScript" src="scripts/menu.js"
type="text/javascript"></script>
<script language="JavaScript" src="scripts/popup.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="pts.css">
</head>
<body>
<form id="frmMaster" runat="server">
<div id="main">
<div id="header"><a href="default.aspx" style=" font-size:x-large;
font-weight: bold; color: White;">Time Management System</a></div>
<div id="banner">
<a class="bannerlink" href="about:blank">Access Timecard</a>
<a class="bannerlink" href="about:blank">Enter New Employees</a>
<a class="bannerlink" href="SelectProject.aspx">Edit Time Data</a>
<a class="bannerlink" href="#" onclick="LoadContextMenu();">Reports</a>
</div>
<div id="divContainer" style="height: 100%;">
<asp:contentplaceholder id="cphMaster" runat="server">
</asp:contentplaceholder>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>
--Main Page
<%@ Page Language="C#" MasterPageFile="~/master.master"
AutoEventWireup="true" CodeFile="ProjectOverviewTest.aspx.cs"
Inherits="ProjectOverview" Title="Time Management System" %>
<asp:Content ID="cntProjectOverview" ContentPlaceHolderID="cphMaster"
Runat="Server">
<div id=divProjectData style="text-align:center">
<div id="divTabsContainer" style="z-index:999; margin-top: 20px;
margin-bottom: -1px; text-align:left; width:95%; left: -1px;">
<asp:linkbutton id="lbOverview" runat="server" CssClass="activelink"
Height="20px" CausesValidation="False">Overview</asp:linkbutton>
<asp:linkbutton id="lbFinancial" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbFinancial_Click">Financial</asp:linkbutton>
<asp:linkbutton id="lbSchedule" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbSchedule_Click">Schedule</asp:linkbutton>
<asp:linkbutton id="lbContacts" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbContacts_Click">Contacts</asp:linkbutton>
<asp:linkbutton id="lbPTO" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False" onclick="lbPTO_Click">PRO
Earned</asp:linkbutton>
<asp:linkbutton id="lbEventSummary" runat="server"
CssClass="inactivelink" Height="20px" CausesValidation="False"
onclick="lbSummary_Click">Summary</asp:linkbutton>
</div>
<table id="content" style="BORDER: darkblue 1px solid; text-align:left;"
height="80%">
<tr>
<td>
</td>
</tr>
</table>
</div>
</asp:Content>
--CSS Page
body
{
font-family: Arial;
font-size: 9pt;
color: Navy;
margin: 0px;
padding: 0px;
}
div
{
position: relative;
}
#smallHeader
{
background: #c0c0c0 url(images/icons/background_main.jpg) repeat-x left top;
width: 100%;
height: 25px;
font-size:medium;
font-weight: bold;
color: White;
text-indent: 2px;
padding-top: 2px;
}
#header
{
background: #c0c0c0 url(images/icons/background_main.jpg) repeat-x left top;
width: 100%;
height: 50px;
font-size:x-large;
font-weight: bold;
color: White;
text-indent: 5px;
padding-top: 1%;
}
#banner
{
background-color: #666666;
border-bottom: solid 1px #222222;
border-top: solid 1px #222222;
height: 25px;
line-height: 23px;
font-size: 8pt;
font-weight: bold;
color: White;
}
a
{
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
font-size: 9pt;
z-index: 1;
height: 20px;
}
a.activelink
{
border:solid 1px blue;
border-bottom: solid 1px white;
cursor:default;
}
a.inactivelink
{
border:solid 1px blue;
background: silver;
}
a.inactivelink:hover
{
text-decoration: underline;
background: white;
}
#imgAdd
{
cursor: hand;
border-style: none;
margin-top: 1%;
}
..bannerlink
{
font-size: 9pt;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: white;
}
..bannerlink:hover
{
background-color: gray;
color: White;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 19px;
padding-right: 19px;
border: solid 1px #222222;
}
#content
{
height: 726px;
width: 95%;
}
#footer
{
background-color: #666666;
height: 25px;
line-height: 23px;
text-align: center;
font-size: 8pt;
font-weight: bold;
color: White;
text-indent: 50px;
}
#iframe
{
margin: 2%;
width: 95%;
background-color: White;
font-weight: normal;
color: Navy;
vertical-align: top;
height: 98%;
}
span.boldLabel
{
font-weight: bold;
color: Navy;
text-align:right;
}
label
{
color: Navy;
}
input
{
font-family: Arial;
font-size: 9pt;
color:Black;
}
select
{
font-family: Arial;
font-size: 9pt;
color: Navy;
}
option
{
font-family: Arial;
font-size: 9pt;
color: Navy;
}
cannot get 100% to work. If I set the height of my div, the page displays a
scroll bar and it looks like I set the height to about 150%. I tried using
CSS, now I am trying tables. Can someone show me where I am mixing things up?
Thanks.
--Master Sheet
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="master.master.cs"
Inherits="pts" %>
<!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>Project Tracking System</title>
<script language="JavaScript" src="scripts/menu.js"
type="text/javascript"></script>
<script language="JavaScript" src="scripts/popup.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="pts.css">
</head>
<body>
<form id="frmMaster" runat="server">
<div id="main">
<div id="header"><a href="default.aspx" style=" font-size:x-large;
font-weight: bold; color: White;">Time Management System</a></div>
<div id="banner">
<a class="bannerlink" href="about:blank">Access Timecard</a>
<a class="bannerlink" href="about:blank">Enter New Employees</a>
<a class="bannerlink" href="SelectProject.aspx">Edit Time Data</a>
<a class="bannerlink" href="#" onclick="LoadContextMenu();">Reports</a>
</div>
<div id="divContainer" style="height: 100%;">
<asp:contentplaceholder id="cphMaster" runat="server">
</asp:contentplaceholder>
</div>
<div id="footer"></div>
</div>
</form>
</body>
</html>
--Main Page
<%@ Page Language="C#" MasterPageFile="~/master.master"
AutoEventWireup="true" CodeFile="ProjectOverviewTest.aspx.cs"
Inherits="ProjectOverview" Title="Time Management System" %>
<asp:Content ID="cntProjectOverview" ContentPlaceHolderID="cphMaster"
Runat="Server">
<div id=divProjectData style="text-align:center">
<div id="divTabsContainer" style="z-index:999; margin-top: 20px;
margin-bottom: -1px; text-align:left; width:95%; left: -1px;">
<asp:linkbutton id="lbOverview" runat="server" CssClass="activelink"
Height="20px" CausesValidation="False">Overview</asp:linkbutton>
<asp:linkbutton id="lbFinancial" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbFinancial_Click">Financial</asp:linkbutton>
<asp:linkbutton id="lbSchedule" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbSchedule_Click">Schedule</asp:linkbutton>
<asp:linkbutton id="lbContacts" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False"
onclick="lbContacts_Click">Contacts</asp:linkbutton>
<asp:linkbutton id="lbPTO" runat="server" CssClass="inactivelink"
Height="20px" CausesValidation="False" onclick="lbPTO_Click">PRO
Earned</asp:linkbutton>
<asp:linkbutton id="lbEventSummary" runat="server"
CssClass="inactivelink" Height="20px" CausesValidation="False"
onclick="lbSummary_Click">Summary</asp:linkbutton>
</div>
<table id="content" style="BORDER: darkblue 1px solid; text-align:left;"
height="80%">
<tr>
<td>
</td>
</tr>
</table>
</div>
</asp:Content>
--CSS Page
body
{
font-family: Arial;
font-size: 9pt;
color: Navy;
margin: 0px;
padding: 0px;
}
div
{
position: relative;
}
#smallHeader
{
background: #c0c0c0 url(images/icons/background_main.jpg) repeat-x left top;
width: 100%;
height: 25px;
font-size:medium;
font-weight: bold;
color: White;
text-indent: 2px;
padding-top: 2px;
}
#header
{
background: #c0c0c0 url(images/icons/background_main.jpg) repeat-x left top;
width: 100%;
height: 50px;
font-size:x-large;
font-weight: bold;
color: White;
text-indent: 5px;
padding-top: 1%;
}
#banner
{
background-color: #666666;
border-bottom: solid 1px #222222;
border-top: solid 1px #222222;
height: 25px;
line-height: 23px;
font-size: 8pt;
font-weight: bold;
color: White;
}
a
{
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
font-weight: bold;
font-size: 9pt;
z-index: 1;
height: 20px;
}
a.activelink
{
border:solid 1px blue;
border-bottom: solid 1px white;
cursor:default;
}
a.inactivelink
{
border:solid 1px blue;
background: silver;
}
a.inactivelink:hover
{
text-decoration: underline;
background: white;
}
#imgAdd
{
cursor: hand;
border-style: none;
margin-top: 1%;
}
..bannerlink
{
font-size: 9pt;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: white;
}
..bannerlink:hover
{
background-color: gray;
color: White;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 19px;
padding-right: 19px;
border: solid 1px #222222;
}
#content
{
height: 726px;
width: 95%;
}
#footer
{
background-color: #666666;
height: 25px;
line-height: 23px;
text-align: center;
font-size: 8pt;
font-weight: bold;
color: White;
text-indent: 50px;
}
#iframe
{
margin: 2%;
width: 95%;
background-color: White;
font-weight: normal;
color: Navy;
vertical-align: top;
height: 98%;
}
span.boldLabel
{
font-weight: bold;
color: Navy;
text-align:right;
}
label
{
color: Navy;
}
input
{
font-family: Arial;
font-size: 9pt;
color:Black;
}
select
{
font-family: Arial;
font-size: 9pt;
color: Navy;
}
option
{
font-family: Arial;
font-size: 9pt;
color: Navy;
}