CSS Bottom Frame Layout

Text Goes here.

It's amazing how this looks like a framed page but is not. This web page has been crafted using CSS technology.

<html>
<head>
<title> CSS Bottom Frame Layout </title>
</head>

<STYLE>
<!--
body			 { margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; }
#framecontent	 { position: absolute; bottom: 0; left: 0; width: 100%; height: 48px; 
				overflow: hidden; background: navy; color: white; background-image: url('images/greybg2.gif'); }
#maincontent	 { position: fixed; top: 0; left: 0; right: 0; bottom: 130px; /*Set bottom value to HeightOfFrameDiv*/
				overflow: auto; background: #FFFFFF; }
.innertube		 { margin: 15px;  }
* html body	 	 { padding: 0 0 130px 0; /*Set value to (0 0 HeightOfFrameDiv 0)*/ }
* html #maincontent{ height: 100%; width: 100%; }

A                 { text-decoration: none }
TD                { font-family: Verdana,Helvetica,Arial; font-size: 10pt }
option.emphasise  { background-color: #FFFFCC; color: #0000FF; }
option.emphasised { background-color: #FFFFEE; color: #0000FF; }
option.emphasiser { background-color: #F5F5DC; color: #8B0000; }
// -->
</STYLE>

<Script Language=JavaScript>
<!--
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>12){
dn="PM"
hours=hours-12 }
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds

var cdate="<font color='#FFFFFF' size='2' face='Verdana,Helvetica,Arial'>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+" "+dn+"</font>"
if (document.all)
document.all.clock.innerHTML=cdate
else
document.write(cdate) }
if (!document.all)
getthedate()
function goforit(){
if (document.all)
setInterval("getthedate()",1000) }
// -->
</Script>

<CENTER>
<table border="0" width="1024" cellpadding="0" cellspacing="0" marginwidth="0" marginheight="0">
<td width="300" VALIGN="top">
<A HREF="#"
onClick="window.open('glossary/glossa.html','Viewer','status=yes,width=795,height=450,toolbar,scrollbars,resizable')">
<FONT COLOR=#FFFFFF>Web Glossary</FONT></a>
</td>

<td VALIGN="top" align="center" width="150">
<FORM NAME="nav">
<select name="nav" onChange='if (this.form.nav.options[this.form.nav.selectedIndex].value
!= "nil") { parent.location.href=this.form.nav.options[this.form.nav.selectedIndex].value }'>
<option value="nil" class="emphasise">
<option value="nil" class="emphasised" selected> <<<     Navigation     >>>
<option value="nil" class="emphasise">
<option value="about.html"> About
<option value="arcade.html"> Arcade
<option value="Christ1.html"> Find Peace Here
<option value="hdtv.html"> HD/Plasma TV Buying Tips
<option value="headline.html"> Headlines & News
<option value="mov.html"> Multimedia Solutions
<option value="remedy.html"> Old and New Home Remedies
<option value="it/default.htm" class="emphasiser"> Open Source Codes
<option value="student.html"> Student Section
<option value="grid.html"> Top Sites of the Internet
<option value="person.html"> Webmaster
<option value="nil" class="emphasise">
<option value="nil" class="emphasised"> <<<      Politics      >>>
<option value="nil" class="emphasise">
<option value="federal/liberty.html"> American Law and Freedom
<option value="noright.html"> Bill of No Rights
<option value="1world01.html"> One World Government
<option value="insanity.html"> The Insanity
<option value="nil" class="emphasise">
<option value="nil" class="emphasised"> <<<      Family      >>>
<option value="nil" class="emphasise">
<option value="deniselight.htm"> Lighting the Way (about Denise)
<option value="https://www.angelfire.com/ultra/irish/"> Stephenson/Dickey Photos
<option value="https://www.angelfire.com/hero/mintmire/"> Mintmire Photos
<option value="access40.html"> Password Access
<option value="nil" class="emphasised">
</select>
</FORM>
</td>

Text Goes here.

</body>
</HTML>

Back to Main Menu