Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Now this is a REAL challenge for Script experts!


cornishpirate

Recommended Posts

Posted

Here's the problem:

 

If a page takes up less than its window (ie no scrolling) I want to put my footer block right at the bottom of the window.

 

The latter part seems straightforward - see Example

 

but I can't see how to correctly evaluate the condition!

 

Any ideas?

Posted

This any good?

 

<!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" lang="en">
<head>
<title>Fix footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media="screen">
html,
body {
  margin:0;
  padding:0;
  height:100%;
}
#container {
  min-height:100%;
  position:relative;
}
#header {
  background:#ff0;
  padding:10px;
}
#body {
  padding:10px;
  padding-bottom:60px;   /* Height of the footer */
}
#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  background:#6cf;
}
</style>
</head>
<body>
<div id="container">
<div id="header">header content</div>
<div id="body">all content in here - including columns/sidebars if any
</div>
<div id="footer">This is the new bottom bar</div>
</div>
</body>
</html>

Posted

The added code belongs in the page not the CSS.

 

The CSS code would be something like

 

#container {

position:absolute;

left:100px;

top:150px;

}

 

#footer {

position, etc, etc

Posted
The added code belongs in the page not the CSS.

 

The CSS code would be something like

 

#container {

position:absolute;

left:100px;

top:150px;

}

 

#footer {

position, etc, etc

 

I offered a potential solution Jeffrey, all you are offering is links and odd corrections

Posted

Thanks everyone for your input.

 

Robert: just tried yours - seems to handle exactly what I need. Will incorporate into osC tonight and give an update.

 

Alan

Posted

Actually, I added what I have done with div and CSS. I also added a link to help the OP further.

 

Glad you got it working the way you wanted

Posted

Well, it works perfectly embedded in osC in Firefox and Safari, but IE7 positions footer at window base even when content is larger. Strange, as the testbed works.

Posted
Actually, I added what I have done with div and CSS. I also added a link to help the OP further.

 

Glad you got it working the way you wanted

 

Jeffrey

 

Not sure what you mean here.

 

Alan

Posted
Not sure what you mean here.

 

You can define various Div's in your CSS file, it looks like you are doing it differently - in the top of your html/php page. It uses the same code, but separates it into two parts. I initially did not realize you were doing it together, saw the DIV definitions and thought you were already working with the CSS. After looking at it, I see that is not the case.

 

As long as it works for you and the FWR, then no need to change what you have.

Posted

Thanks - It now works.

 

Trial & Error led me to getting DOCTYPE right. It clearly matters more to IE7 than Firefox or Safari (which by the way seems much faster than FF or IE7)

 

Alan

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...