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>

<!--

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>

<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>

<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="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="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="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

</select>

</FORM>

</td>

</td>

</table>

</CENTER>

</div>

Text Goes here.

</body>

</HTML>

Back to Main Menu