I started to investigate the use of CSS and DHTML - it looked a brilliant technology. The result was the Byers Writings - a series of pages that contain either my words of wisdom - or - my ramblings !!

It seemed like a good idea that one of the pages should tell you how it was all done.
BUT
Remember, you need to know about HTMLscript and JavaScript, otherwise you will not understand anything and simply make your head hurt.
AND
Remember, this only works with Internet Explorer Version 5 + (and maybe Netscape browser Version 6 +).

First each page uses an HTM file - sortof template based - each new one can be created quickly from the previous one. They are fairly minimal - all of the formatting is done in a seperate file called DEFAULT.CSS. Any change to style is done by modifying the CSS file - such changes are straight away reflected in all of the pages that refer to it.

The pages also refer to three JavaScript files - HEADER.JS, FOOTER.JS and FINDDOM.JS. When any of these functions need changes, such changes are reflected in all of the pages

The boxes below symbolically show the files - if you put the mouse on any of the boxes and click they will expand to a size that makes them readable. To make them small again, double click on the box

I have just been given a link to a page that shows how various browsers deal with CSS elements here it is http://www.webreview.com/style/css1/charts/mastergrid.shtml

The Main HTM file
		


<html>
<head>
	<link rel="stylesheet" href="default.css">
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<META name="keywords" content="How did I, Rogerthorpe, Rogerthorpe Manor, 
Peter Byers, Byers, Writings, Byers Writings, IBRUs"> 
	<META name="description" content="Technical Books owned by Peter Byers">
	<META name="robots" content="index,follow">
	<META name="rating" content="general">
	<META name="generator" content="PFE">
	<META name="author" content="Peter Byers">
	<META name="copyright" content="This page and all its contents are copyright 
2001 by Peter Byers. All Rights Reserved."> 

<SCRIPT src="FINDDOM.js"></SCRIPT>

<SCRIPT><!--
function setClass(objectID,newClass) {
	var dom = findDOM(objectID,0);
	dom.className = newClass;
}
// -->
</SCRIPT>


	<title>THIS PAGE</title>
	<script>
	title = 'THIS PAGE';
	subTitle= 'How it is constructed and how does it work';
	teaser = 'Imaginative use of CSS and DHTML - it seems like Object Oriented internet code'
	dDate = '8th'
	mDate = 'November'
	yDate = '2001'
	CreateDate = '8th November 2001'
	ModifiedDate = '8th Novemder 2001'
	</script>
	</head>

<body>
<div id="content">
	<script src="header.js"></script>
	<!-- Begin Content -->
	<div id="main_text">
		<p>
		I started to investigate the use of CSS and DHTML - it looked a brilliant technology.
		The result was the <SPAN class=question>Byers Writings</SPAN> - a series of pages that
		contain either my words of wisdom - or - my ramblings !!
		</p>
		It seemed like a good idea that one of the pages should tell you how it was all done.
		<p>
		</p>
		First each page uses an HTM file - sortof template based - each new one can be created 
		quickly from the previous one. They are fairly minimal - all of the formatting is done
		in a seperate file called DEFAULT.CSS. Any change to style is done by modifying the CSS
		file - such changes are straight away reflected in all of the pages that refer to it.
		<p>
		The pages also refer to three JavaScript files - HEADER.JS, FOOTER.JS and FINDDOM.JS.
		When any of these functions need changes, such changes are reflected in all of the
		pages
		</p>
		<p>
		The boxes below symbolically show the files - if you put the mouse on any of the boxes
		they will expand to a size that makes them readable.
		</p>
		<p>
		<SPAN class=copyTiny id=mainHTM 
		onclick="setClass('mainHTM','copyHuge');setClass('innerHTM','huge');" 
		onmouseout="setClass('mainHTM','copyTiny');setClass('innerHTM','tiny');">
		




<table BORDER=3 COLS=1 WIDTH="100%" BGCOLOR="#FFFF99" >
<tr>
<th bgcolor=white><b><center>The Main HTM file</center></b></th>
</tr>
<tr>
	<td><b>
		<SPAN class=tiny id=innerHTM>
			The code for this page goes here
			AND
			there are four other identical (or very similar) for the other four files !!
		</SPAN>
	</b></td>
</tr>
</table>


		</SPAN>
		</p>
	</div>
	<!-- End Content -->
	<script src="footer.js"></script>
	<BR><BR>
	<img src="http://www.sst-counters.co.uk/counter1.asp?c_id=C233211">
	<BR><BR><HR>
</div>
</body>

</html>

		
	

The DEFAULT.CSS file
		




body  {
		background:  white url(byers-writings.jpg) no-repeat;
		word-spacing: 1px;
		}
		
#content  {
		background:  #ffffcc;
		text-align: justify;
		font-family: arial, helvetica, geneva, sans-serif;
		position: relative;
		top: 100px;
		left: 90px;
		width: 480px }
		
#main_text  {
		background:  #ffffcc;
		text-align: justify;
		font-family: arial, helvetica, geneva, sans-serif;
		font: italic bold }

.dropCap {
		font: 300%/100% serif; 
		color: #999999; 
		margin-right: -3px;
		}


.bigRed {
		font: 250% serif; 
		color: #FF0000;
		}

.copyright {
	color: #555;
	font-size: 10px;
	font-family: Arial, Helvetica, Geneva, sans-serif
	}

.question  {	color: blue;
		font: italic small-caps bold "minion web Georgia", "Times New Roman", Times, serif; }


.copyTiny {
	COLOR: black; FONT-SIZE: 4px; POSITION: relative; WIDTH: 150px; HEIGHT: 150PX
	}

.copyHuge {
	COLOR: red; FONT-SIZE: 24px; POSITION: relative; WIDTH: 480px
	}

.tiny {
	COLOR: red; FONT-SIZE: 4px; POSITION: relative
	}

.huge {
	COLOR: black; FONT-SIZE: 18px; POSITION: relative
	}

.hugePre {
	COLOR: black; FONT-SIZE: 10px; POSITION: relative
	}

		
	

The FOOTER.JS file
		

document.writeln('<br><hr><br clear="all">')
document.writeln('<span class="copyright">')
document.writeln('<BR><b>Title:</b> ' + self.document.title)
document.writeln('<BR><b>Created:</b> ' + (CreateDate))
document.writeln('<BR><b>Modified:</b> ' + (ModifiedDate))
document.writeln('<BR><b>URL:</b> <a href="' + self.location + '">' + self.location + '</a>' )
document.writeln('<BR><a href="copyright.htm">Copyright ©</a> 2001 <A HREF="mailto:pb@sst-ltd.co.uk">Peter Byers</A>. All rights reserved.' )
document.writeln('</span>')

		
	

The HEADER.JS file
		

document.writeln ('<h1>')
document.writeln (title)
document.writeln ('</h1>')
document.writeln ('<h3>')
document.writeln (subTitle)
document.writeln ('</h3>')
document.writeln ('<i>')
document.writeln (teaser)
document.writeln ('</i><br><br> <span style="font: 10pt arial">')
document.writeln (dDate + ' ' + mDate + ' ' + yDate)
document.writeln ('</span>')
document.writeln ('<BR><HR><BR>')

		
	

The FINDDOM.JS file
		

var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;


if (document.getElementById) {isID = 1; isDHTML = 1;}
else {
if (document.all) {isAll = 1; isDHTML = 1;}
else {
browserVersion = parseInt(navigator.appVersion);
if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {isLayers = 1; isDHTML = 1;}
}}

function findDOM(objectID,withStyle) {
	if (withStyle == 1) {
		if (isID) { return (document.getElementById(objectID).style) ; }
		else { 
			if (isAll) { return (document.all[objectID].style); }
		else {
			if (isLayers) { return (document.layers[objectID]); }
		};}
	}
	else {
		if (isID) { return (document.getElementById(objectID)) ; }
		else { 
			if (isAll) { return (document.all[objectID]); }
		else {
			if (isLayers) { return (document.layers[objectID]); }
		};}
	}
}