CSS Layout Help, Footer positioning 1

fillup07 · Dec 20, 2002

On,

http://www.syscompsjax.com/index9.asp

you can see that I am trying to get my footer to position properly. I have been playing around with it a lot but just can't get it to work.

I do not want to go to a table design.

When the page height does not require a scrollbar (like on the Login page), I want the design to fill the height of the screen (like the menu does already), and I want the footer to display at the bottom (without a scrollbar needed if the content doesn't require one).

What should the CSS be on the footer?

Any help is appreciated. Thanks -Phil
fillup07@hotmail.com
If my post was helpful, please give me a star!

RISTMO · Dec 21, 2002

Hi Phil,
I changed more than just the footer to make this work, but it seems to work. You can do a compare files to see exactly what.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml"

xml:lang="en" lang="en">
<head>
<title>System Components Corporation</title>
<meta name="author" content="Phil Freo" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="pics-label" content='(pics-1.1 "

http://www.icra.org/ratingsv02.html"

comment "ICRAonline v2.0" l gen true for "

http://www.syscompsjax.com"

r (nz 1 vz 1 lz 1 oz 1 cz 1) "

http://www.rsac.org/ratingsv01.html"

l gen true for "

http://www.syscompsjax.com"

r (n 0 s 0 v 0 l 0))' />
<style type="text/css">
body {
background-color:#FFF;
height:100%;
color: #000000;
font-family: Verdana;
font-size: 10pt;
margin: 0px;
width: 100%;
}
form, td, tr, p
{
color: #000000;
font-family: Arial;
font-size: 10pt;
}
h1 {
color: #FF9900;
font-family: 'Century Gothic';
font-size: 22pt;
}
h2 {
color: #000000;
font-size: 16pt;
font-family: 'Century Gothic';
}
a:link, a:active, a:visited
{
color: blue;
font-size: 10pt;
text-decoration: none;
}
a:hover {
color: blue;
font-size: 10pt;
text-decoration: underline;
}
div#header
{
position:absolute;
width: 100%;
height: 102px;
z-index: 10;
background-image: url('/images/middlestretch.jpg');
}
img#topleft
{
position:absolute;
top: 0px;
left: 0px;
}
img#topright
{
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
}
div#menu
{
position: absolute;
top: 0px;
left: 0px;
border-left:0px;
border-right:1px dotted blue;
border-top:1px solid #ccccff;
border-bottom:1px dotted blue;
background-color: #90BADE;
position: absolute;
width: 150px;
height: 100%;
float: left;
padding: 112px 10px 0px 0px;
text-align: right;
margin-top: 0;
margin-bottom: 0;
font: 10pt Verdana, sans-serif;
}
div#menu a {
color: white;
text-decoration: none;
}
div#menu a:hover {
color: white;
text-decoration: underline;
}
div#main {
width:100%;
position: absolute;
top: 0px;
left: 0px;
padding: 110px 0px 0px 150px;
height: 100%
}
div#footer
{
width: 100%;
height: 20px;
z-index: 15;
text-align: right;
font: 10pt Verdana, sans-serif;
background-color: #D7D7D7;
position:absolute;
bottom:0;
}
div#content
{
padding: 0px 10px 10px 20px;
}
.invisible
{
visibility:hidden;
}
input.addrecordtext
{
width: 200px;
}
td.addrecordcelldes
{
width: 320px;
}
td.addrecordcellinput
{
width: 215px;
}
td.maxchars
{
width: 50px;
}
select.addrecordlist
{
width: 200px;
}
tr.rowtwo
{
background-color: white;
}
tr.rowone
{
background-color: #EEEEEE;
}
th {
background-color: #FFFFCC;
font-family: Arial;
}
.datatable
{
border: 0px none;
padding: 2px;
width: 95%
}
.noborder
{
border-collapse: collapse;
padding: 0;
}
</style>
<script language="JavaScript" src="/include/functions.js" type="text/JavaScript"></script>
</head>
<body>

<a name="top"></a>

<div id="header">
<a href="/"><img id="topleft" src="images/topleft.jpg" width="368" height="102" border="0" alt="Home" /></a>
<img id="topright" src="images/topright.jpg" width="385" height="102" alt="" />
</div>

<div id="main">
<div id="menu">
<a href="/">Home</a><br />
<a href="/contact.asp">Contact Us</a><br />
<a href="/login.asp">Login</a><br /><br />
</div>
<div id="content">
<h2>Web-enabled Equipment Asset Management for your Power Plant</h2>
<div align="left">
<table class="noborder">
<tr>
<td>
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Specializing in <b>water level, alarm, trip and control systems for boiler
drums and feedwater heaters.</b></td>
<td rowspan="3">
<img src="images/plant_ops_services.gif" style="border:0px none;" width="110" height="106" alt="" /></td>
</tr>
<tr>
<td width="17" height="12">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Authorized, trained and supported by the world's leader in visual process
safety.</td>
</tr>
<tr>
<td width="25" height="10">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Unique customer-driven capabilities and program offerings to help you
safely maximize plant performance. </td>
</tr>
</table>
</div>
<p>For security reasons, System Components Corporation requires authentication to
this site. You will be required to enter a username and password to
<a href="/login.asp">login</a>. If you are a new user or do not have this
information, it will be necessary to contact
<a href="mailto:rick@syscompsjax.com">Rick Story</a>.</p>
<p>Each client facility is assigned a user name and passwords for approved users.
Permissions are granted for each respective folder.</p>
<p>If you are uploading files, please send them via e-mail to <a href="mailto:rick@syscompsjax.com">Rick Story</a>.</p>

<table class="noborder">
<tr>
<td>
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Site Management Programs</td>
</tr>
<tr>
<td width="17" height="12">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Highest Quality Products</td>
</tr>
<tr>
<td width="25" height="10">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Standardized Service & Repair Reliability & Commitment</td>
</tr>
<tr>
<td width="25" height="10">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Universal Brand Compatibility</td>
</tr>
<tr>
<td width="25" height="10">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Multiple Industry Experience</td>
</tr>
<tr>
<td width="25" height="10">
<img border="0" src="/images/orangearrow.gif" width="17" height="29" alt="" /></td>
<td>Training</td>
</tr>
</table>
</div>
<div id="footer">©2002 Systems Components Corporation. All rights reserved.</div>
</div>
</body>
</html>

Rick

P.S. When the browser is less than about 75% of the screen size (1024) your images overlap. To fix that, you can make a blue image (the dark color you use for the logo). Make it 1px by 1px, then insert this right before your logo code:
<img src="stretch_image.gif" width="800" height="1">
Set the width to the minimum size the browser should shrink to. This will make the page scroll when that happens.

fillup07 · Dec 21, 2002

Made a few more changes. Didn't stretch across the menu like I originally wanted, but I like it like this better now. Thanks a lot, works great. -Phil
fillup07@hotmail.com
If my post was helpful, please give me a star!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS Layout Help, Footer positioning 1

fillup07

Vendor

RISTMO

Programmer

fillup07

Vendor

Similar threads

Part and Inventory Search

Sponsor