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>
LVL 25
kevp75Asked:
Who is Participating?
 
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
 
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
 
kevp75Author Commented:
thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.