Custom CSS Frame Layout

**Killean** · 04-03-2007, 08:39 AM

Hello hello. Normally I would just suffer through a challenge like this, playing with hundreds of different options until a freak accident occurs and everything seems to work... I'm sooooo damn close after doing that, but there are a couple little bugs that I just can't seem to fix. Without further adu:

index.html

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<style media="screen" type="text/css">
			/* Import Common Style Information */
			@import url(common.css);
			/* Page Specific Style Information */
			
		</style>
		
		<!-- Import Common Client Scripts -->
		<script type="text/javascript" src="common.js"></script>
		<!-- Page Specific Client Scripting -->
		<script type="text/javascript">
		
		</script>
		
		<title>Untitled Document</title>
	</head>
	<body>
	
		<div id="logobox"><img src="./images/logo.jpg" title="" alt="" /></div>
		<div id="titlebox">Title Image</div>
		<div id="menubox">Stuff in here!</div>
		<div id="contentbox">Stuff is in here Too</div>
		<div id="creditsbox">My Creds</div>
	
	</body>
</html>

common.css

HTML Code:

/* Common Tag Changes */
	body {
		padding: 0px;
		margin: 0px;
		border: 0px;
		overflow: auto;
		height: 100&#37;;
		max-height: 100%;
	}
	* html body {
		padding-top: 0px;
		padding-bottom: 0px;
		padding-right: 256px;
		padding-left: 0px;
	}
	img {
		border: 0px;
	}

/* Site Structure */
	#logobox {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 167px;
		width: 250px;
		overflow: hidden;
	}
	#titlebox {
		position: absolute;
		top: 0px;
		left: 250px;
		right: 0px;
		height: 157px;
		overflow: hidden;
		
		background-color: #F0F0F0;
		border-right-width: 5px;
		border-right-style: solid;
		border-right-color: #000000;
		border-top-width: 5px;
		border-top-style: solid;
		border-top-color: #000000;
		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #000000;
	}
	* html #titlebox {
		width: 100%;
	}
	#menubox {
		position: absolute;
		top: 167px;
		bottom: 0px;
		left: 0px;
		width: 240px;
		overflow: auto;
		
		background-color: #F0F0F0;
		border-left-width: 5px;
		border-left-style: solid;
		border-left-color: #000000;
		border-right-width: 5px;
		border-right-style: solid;
		border-right-color: #000000;
		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #000000;
	}
	* html #menubox {
		height: 100%;
		padding-bottom: 167px;
	}
	#contentbox {
		position: absolute;
		top: 167px;
		bottom: 0px;
		left: 250px;
		right: 150px;
		margin-right: 5px;
		overflow: auto;
		
		background-color: #FFFFFF;
		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #000000;
	}
	* html #contentbox {
		height: 100%;
		width: 100%;
		padding-bottom: 167px;
	}
	#creditsbox {
		position: absolute;
		top: 167px;
		bottom: 0px;
		right: 0px;
		width: 145px;
		overflow: hidden;
		
		background-color: #F0F0F0;
		border-left-width: 5px;
		border-left-style: solid;
		border-left-color: #000000;
		border-right-width: 5px;
		border-right-style: solid;
		border-right-color: #000000;
		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #000000;
	}
	* html #creditsbox {
		height: 100%;
		padding-bottom: 167px;
	}

A few notes first:
The logo image is W:250px, H:167px. It also has a 5px border surrounding it on all sides, therefore the reason why the divs have borders in certain locations.
Next, this is the second time I have gone with XHTML's tableless structure standards, and so most of this CSS code has been *ahem* copied from the CSS Frame Layouts featured here at DynamicDrive. So this should be right up everyone's alley so to speak.
Lastly, if we can get the quirks ironed out, I'll gladly sanitize the code for use on DynamicDrive. Twoud be an honor to submit something here.

First problem is with IE. The three boxes on the bottom are all a wee bit too big. I am trying to limit this to everything shown on initial display sans any scrolling. Exactly like the CSS Frame Layouts.

The second problem that I noticed, which is visible in all browsers that I have tested them in. When I flood the three bottom boxes with text (just to test the overflow), the menubox works fine. The creditsbox also works fine. The contentbox however has a couple quirks. In "normal" browsers, the contentbox appears to be just a tad bit too large. Half the scrollbar is cut off by the creditsbox. In IE, again the content box is too large, except it's scrollbar is completely missing under the creditsbox.

**Killean** · 04-03-2007, 11:07 AM

Update:

By adding margin-right: 5px; to #contentbox, I have fixed the scrollbar issue for Firefox/Konqueror/Opera. It is still hidden in IE.

Thread: Custom CSS Frame Layout

Thread Tools

Search Thread

Custom CSS Frame Layout

Bookmarks

Bookmarks

Posting Permissions