Solved

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

Posted on 2009-07-16
7
809 Views
Last Modified: 2012-05-07
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
Comment
Question by:woodje
  • 5
  • 2
7 Comments
 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
 

Author Comment

by:woodje
Comment Utility
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
 

Author Comment

by:woodje
Comment Utility
Anyone have in luck in looking at this yet?
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 16

Expert Comment

by:s8web
Comment Utility
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
 

Author Comment

by:woodje
Comment Utility
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
 

Author Comment

by:woodje
Comment Utility
Experts,

Any thoughts?
0
 

Accepted Solution

by:
woodje earned 0 total points
Comment Utility
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now