Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 887
  • Last Modified:

Page layout with CSS with Header, footer, left content, and right content

I have an asp.net 2.0 application. I need to have a page setup with a header of 75px height width 100%, constently set at the top (not moving). A footer of 25px height width 100%, constently set at the bottom of the screen ( not moving). The main content area is setup in a left pane and a right pane. The left is 23% wide and 100% high, the right pane is 70% wide and 100% high. Both the left pane and right pane can scroll if needed but must do it between the header and footer. I need this to be cross browser compliant and able to adjust to screen size setttings. I have done a lot of research online looking for this I can get the header and footer set. However the main content right and left pane are giving me problems as well as screen size settings. Any help you can give me would be great.
0
woodje
Asked:
woodje
  • 5
  • 2
1 Solution
 
s8webCommented:
If you can describe the kind of problems you are having as well as provide the base code for the page I think a solution could be found.
0
 
woodjeAuthor Commented:
Problems:

1. The left and right pane's are scrolling together I need them to scroll only if each is needed.
2. The data is scrolling within the header and footer fine at one resolution however if I open the same page on a different monitor with a different resolution the scorlling is incorrect it is overlapping the footer.

Code:
I will below have the code for the master.page, an individual page, and the css file.
****master.page****
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
 
<!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>
  <!--<link rel="stylesheet" media="all" href="http://localhost/pfo_gateway/css/coolstyle.css" type="text/css" />  -->
  <link rel="stylesheet" media="all" href="http://localhost/pfo_gateway/css/style.css" type="text/css" />
  <title>Unified Database</title>
</head>
<body>
<form id="Form1" runat="server">
        <div id="header">
	        <div class="hd1">Unified Database</div>
	        <div class="hd2">
	            <div class="hd3">Welcome:<br /><asp:LoginName ID="LoginName1" runat="server" /></div>
	            <div class="hd6">The Current Date and time is:<br />
				    <script type="text/javascript" src="http://localhost/pfo_gateway/scr/DateTime1.js"></script>
                    <script type="text/javascript" src="http://localhost/pfo_gateway/scr/DateTime2.js"></script>
                    <span id="tick2"></span>
	            </div>
	        </div>
	    </div>    
	    <div id="content">
	        <div id="navigation">
	        <asp:ContentPlaceHolder ID="cp_navigation" runat="server">
                <asp:TreeView ID="TreeView1" runat="server" 
                DataSourceID="SiteMapDataSource1" 
                ontreenodedatabound="TreeView1_TreeNodeDataBound">
            </asp:TreeView>
            <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />                	           
	        </asp:ContentPlaceHolder>
	        </div>
	        <div id="working_content">
            <asp:ContentPlaceHolder ID="cp_content" runat="server">
       
            </asp:ContentPlaceHolder>
            </div>
        </div>
        <div id="footer">
	        <div class="f1">
	            <div class="f2"><a href="mailto:support@domain.com">Help</a><br />
                </div>
	            <div class="f3">&copy; 2009 XXX. ~ All rights reserved.</div>
	        </div>
	    </div>
</form>
</body></html>
 
****sample page****
<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="sample.aspx.vb" Inherits="sample" %>
 
<asp:Content ID="Content2" ContentPlaceHolderID="cp_content" Runat="Server">
<div>
    <div id="tt_content">
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
        Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />Hello<br />
    </div>
</div>
</asp:Content>
 
***style.css****
 
* {
	margin:0em;
	padding:0em;
}
 
body, html {
  margin:0;
  border:0;
  padding:0;
  height:100%; 
  max-height:100%; 
  font-family:arial, verdana, sans-serif; 
  font-size:1em;
  background-color:#9BA29D;  
  /* hide overflow:hidden for IE5/Mac */
  /* \*/
  overflow: hidden;
  /* */
}
 
/* for internet explorer */
* html body {
  padding:0px 0 0px 0;  
}
 
#header {
	top:0px;
	display:block;	
	position:absolute;
	text-align:center;
	z-index:1;
	width:100%;
	height:60px;
	border-bottom:3px solid #000000;	
}  
 
* html #header {
	width:100%;
	height:60px;
}
 
#header div.hd1 {
	width:100%;
	height:40px;
	top:-2px;
	left:-2px;
	text-align:center;
	font:36px arial, verdana, sans-serif;
	font-weight:bold;
	font-style:italic;
	border:none;	
}
 
#header div.hd2 {
	width: 100%;
	height: 20px;
	top: 40px;
	left: -2px;
	text-align: center;
	border:none;
}
 
#header div.hd3 {
	float:left;
	top:40px;
	width: 25%;
	height: 20px;
	text-align:left;	
	border: none;
	padding-left:.5em;
	font:10px arial, verdana, sans-serif;
}
 
#header div.hd6 {
	float:right;
	width:25%;
	height:20px;
	text-align:center;
	border:none;
	top:40px;
	font:10px arial, verdana, sans-serif;
}
 
#content {
	display:block; 
	overflow:auto; 
	position:absolute; 
	z-index:3; 
	top:70px;
	bottom:50px; 
	width:100%;
}
 
* html #content {
	top:70px; 
	bottom:50;	
	width:100%;
}
 
#navigation {
	float:left;
	width:23%;
	height:550px;
	padding-top:2em;
	font:2em;
	z-index:3;
}
 
#navigation ul li {
	margin-top:4px;
}
 
#navigation ul li a {
	display:block;
	width:23%;
	padding: 3px 5px 3px 10px;
	text-decoration:none;
}
 
#navigation ul li a:hover {
	background-color:#ccc;
	color:#000000;
}
 
/* This is the nav menu section */
 
#working_content 
{	
	width:70%;
	height:100%;		
}
 
#footer {
	clear:both;
	position:absolute;
	bottom:0px;
	text-align:right;
	border-top:3px solid #000000;
	z-index:5;
	width:100%;
	height:50px;
}
 
* html #footer {
	bottom:0px; width:100%; height:50px;
}
 
#footer div.f1 {
	width: 100%;
	height: 50px;
	left: -2px;
	text-align: center;
	border: none;
}
 
#footer div.f2 {
	float:left;
	width: 48%;
	height: 50px;
	text-align:left;	
	border: none;
	padding:.5em 0em 0em .5em;
}
 
#footer div.f3 {
	float:right;
	width:48%;
	height:50px;
	text-align:right;
	border:none;
	left:475.5px;
	padding:.5em .5em 0em 0em;
	color:#000000;
	font:18px arial, verdana, sans-serif;
	font-weight:bold;
}
 
/* FOOTER TEXT AND LINK COLORS */
 
/*#foot a:link	{ font:18px arial, verdana, sans-serif; color: #00008B; text-decoration: underline }
 
#foot a:visited	{ color: #B293FE; text-decoration: none }
 
#foot a:active	{ color: #B293FE; text-decoration: none }
 
#foot a:hover	{ font:18px arial, verdana, sans-serif; color: #FF0000; text-decoration: none }*/
 
/* NON-MENU PAGE LINK COLORS */
 
/*a:link		{ color: #009ACD; text-decoration: none; }
 
a:visited	{ color: #CD0000; text-decoration: none; }
 
a:active	{ color: #B293FE; text-decoration: none; }
 
a:hover		{ color: #99CCFF; text-decoration: none; }*/
 
/* HIDE MENU AND ITEMS FOR PRINTING */
 
@media print {
.printhide {display:none;}
.printhelp	{ width:600px; }
}
@media screen{
.printonly { display:none }
}
 
#gateway_master 
{
	padding:0;
	margin:0;
}
/*
#gateway_gv 
{
	padding:0;
	margin:0;
}
*/
#tt_content {
	overflow:auto; 
	position:absolute; 
	width:100%;	
}
#lg_chk {
width:4em;
height:4em;
}	
 
/* Classes */
/*
ItemTemplate td.pfogv_rs {
	padding-left:30px;
	padding-right:30px;
}
 
.pfogv {
	border:solid 1px #ffffff;
	font-size:1.8em;
}
 
.pfogv_header 
{
	font-weight:bold;
}
 
.pfodv 
{
	border:solid 1px #ffffff;
	font-size:1.8em;
}
*/
.Important { 
     font-size: large; 
     color: Red; 
} 

Open in new window

0
 
woodjeAuthor Commented:
Anyone have in luck in looking at this yet?
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
s8webCommented:
Can you post a link to where this page is running? I don't have a ASP server model to test your css and markup on.
0
 
woodjeAuthor Commented:
Sorry this is only on a local machine right now. And our company is behind a serious firewall. Really makes it hard to work sometimes.
0
 
woodjeAuthor Commented:
Experts,

Any thoughts?
0
 
woodjeAuthor Commented:
Thanks everyone I was able to get this working with css. It just took a lot more time then I really had. But is a good place to start for the next project.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now