• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2309
  • Last Modified:

Footer Image...

ok.  i think i'm struck with the dumbies right now, so I'm gonna ask for help....

http://dnd.07th.com

the bottom gradient image at the top of the page is supposed to be at the bottom of the page.  Am I going wrong somewhere?

CODE:

style.css:
*, html {
      margin:0;
      padding:0;
      }
body {
      background:#020202 url(/imgs/layout/pageBG.png);
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:small;
      letter-spacing:1px;
      line-height:1.2em;
      color:#DDD;
      height:100%;
      }
      
#header {
      position:relative;
      background:url(/imgs/layout/headerBG.png);
      height:93px;
      z-index:1;
      }
      
#container {
      position:relative;
      z-index:1;
      }
      
#footer {
      position:relative;
      background:url(/imgs/layout/footerBG.png);
      height:74px;
      z-index:1;
      bottom:0;
      }

default.asp:
<!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">
<head>
<link href="/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="/imgs/layout/07thlogo.gif" style="position:absolute;z-index:2;top:0;right:0;" />
<div id="header">

</div>

<div id="content">

</div>

<div id="footer">

</div>

</body>
</html>
0
kevp75
Asked:
kevp75
  • 2
  • 2
1 Solution
 
ajitha75Commented:

instead of top:0;right:0
use bottom:0; and right:-1 for bottom left corner or right: 0 for bottom right corner

0
 
kevp75Author Commented:
i'm confused...

no-where in the code I posted is >>top:0;right:0<<

and I have tried adding in bottom:0;right:0; to the footer ID, however that did not work either
0
 
techbotsCommented:
Change it to

#footer {
      position:relative;
      background:url(/imgs/layout/footerBG.png);
      height:74px;
      z-index:1;
      background-position:bottom;
}
0
 
ajitha75Commented:
this should work

asp page:
<!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">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="07thlogo.gif" style="position:absolute;z-index:2;top:0;right:0;" />
<div id="header">
&nbsp;
</div>

<div id="content">

</div>

<div id="footer">
&nbsp;
</div>

</body>
</html>


Style.css
*, html {
      margin:0;
      padding:0;
      }
body {
      background:#020202 url(pageBG.png);
      font-family:Verdana, Arial, Helvetica, sans-serif;
      font-size:small;
      letter-spacing:1px;
      line-height:1.2em;
      color:#DDD;
      height:100%;
      }
     
#header {
      position:absolute;
      background:url(headerBG.png);
      height:93px;
      z-index:1;
      top: 0;
      left: 0;
      width: 100%;
      }
     
#container {
      position:relative;
      z-index:1;
      }
     
#footer {
      position:absolute;
      background:url(footerBG.png);
      height:74px;
      z-index:1;
      bottom:0;
      width: 100%;
      }
0
 
kevp75Author Commented:
thank you
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now