I have a page with four divs; TopNav, Header, Body and Footer. All four divs stretch horizontally all the way across the page. The page uses an external css sheet. It will be the new default page for our company intranet.
In the footer section, I am supposed to put a 'ticker' to display company news. My problem is that depending on screen resolution, the ticker may not display without scrolling down. The Intranet Committee (which includes no tech people but lots of business degrees) has decreed this unacceptable. Whether 800x600 or 1024x768 the ticker must appear at the bottom!
I found a script somewhere that seems to give the viewable area regardless of screen resolution. I thought if I could take this value, subtract the height of the TopNav, Header and Footer divs and then assign this to the inline style height value of the Body div I would be able to vary just the height of the Body div, shrinking it or enlarging it as screen resolution dictated so that the footer would always be at the bottom of the page.
I can't for the life of me get the variable produced in the script assigned to the height property though. Hard coding the inline style height property (or attribute?) overrides the external style sheet just fine but, using the variable won't do anything. I even tried using the variable name like a string - "height:" + mySubHeight + ";" - to no avail. Can I not use the variable in the inline style? If so, my plan is dashed to pieces.
page code:
external css sheet
Thanks In Advance
In the footer section, I am supposed to put a 'ticker' to display company news. My problem is that depending on screen resolution, the ticker may not display without scrolling down. The Intranet Committee (which includes no tech people but lots of business degrees) has decreed this unacceptable. Whether 800x600 or 1024x768 the ticker must appear at the bottom!
I found a script somewhere that seems to give the viewable area regardless of screen resolution. I thought if I could take this value, subtract the height of the TopNav, Header and Footer divs and then assign this to the inline style height value of the Body div I would be able to vary just the height of the Body div, shrinking it or enlarging it as screen resolution dictated so that the footer would always be at the bottom of the page.
I can't for the life of me get the variable produced in the script assigned to the height property though. Hard coding the inline style height property (or attribute?) overrides the external style sheet just fine but, using the variable won't do anything. I even tried using the variable name like a string - "height:" + mySubHeight + ";" - to no avail. Can I not use the variable in the inline style? If so, my plan is dashed to pieces.
page code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="AltStyle.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function alertSize() {
var myWidth = 0, myHeight = 0; mySubHeight =0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
}
mySubHeight = myHeight-125;
window.alert( 'Width = ' + myWidth );
window.alert( 'Height = ' + myHeight );
window.alert( 'SubHeight = ' + mySubHeight );
}
</script>
</head>
<body>
<div class="topnav">
<div class="buttons"><a href="Alt_Default.html">Home</a><a href="Alt_WB_Corporate.html">Corporate</a><a href="Alt_WB_Locations.html">WB
Locations</a><a href="Alt_WB_Departments.html">Departments</a><a href="Alt_WB_Forms.html">Forms</a><a href="Alt_WB_Boot_Camp.html">Boot
Camp</a><a href="Alt_WB_Suggestion_Box.html">Suggestion Box</a></div>
</div>
<div class="header">
<p><a href="javascript:alertSize();">Click here to test this script</a>.</p>
</div>
<div class="body" STYLE="font-family:Verdana; height:205;">
remy martin
</div>
<div class="footer">
</div>
</body>
</html>external css sheet
Code:
/* CSS Document */
<!--
.header { background-color:#336699;
height:75px;
border:1px solid #000000;
}
.topnav { background-color:#000099;
border-left:1px solid #000099;
border-bottom:1px solid #000099;
border-right:1px solid #000099;
}
.buttons { margin:0px 0px 0px -10px;
padding:7px 10px;
text-transform:uppercase;
font-family:Verdana, sans-serif;
font-weight:bold;
font-size:.8em;
white-space:nowrap;
}
.buttons a { padding:7px 10px;
border-right:1px solid #000099;
font-family:Arial, sans-serif;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
.buttons a:hover { border-right:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
font-family:Arial, sans-serif;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
background-color:#FF0000;
}
.buttons strong { padding:7px 10px;
border-right:1px solid #000000;
font-family:Arial, sans-serif;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
background-color:#000000;
}
.leftnav { width:135px;
height:100%;
background-color:#CCCCCC;
border-left:1px solid #000000;
border-right:1px solid #000000;
float:left;
}
.body { height:100%;
background-color:#FFFFFF;
border-right:1px solid #000000;
border-left:1px solid #000000;
}
.footer { background-color:#FFFFFF;
clear:both;
}
-->Thanks In Advance
