No replies
prettysenshi
prettysenshi's picture
Offline
newbie
Indiana
Last seen: 2 years 28 weeks ago
Indiana
Timezone: GMT-5
Joined: 2012-01-17
Posts: 1
Points: 2

So I'm in the process of creating a wordpress design, and am first coding it in divs/css before putting the tags in it and I'm having some problems.

Sample

Basically what I'm trying to do is do a repeating background for the footer. With that being said, the way the footer sets up, it says at the bottom of the page and as the text expands pushes it down. I just can't seem to figure out how to do the background. Each image (the top header and the bottom footer) are image maps, and the top header worked fine as far as the repeating background. Just can't get the bottom.

PLEASE HELP ME! Sad(

Index.html file:

<head>
<link rel="stylesheet" href="style.css">
</head>
<bodyW>
<div id="container">
 
 
   <div id="header"><center><img id="Image-Maps_9201112152007562" 
src="http://hateyourway.org/log/wp-content/themes/meow1/top2.png" 
usemap="#Image-Maps_9201112152007562" border="0" width="1000" height="174" alt="" />
<map id="_Image-Maps_9201112152007562" name="Image-Maps_9201112152007562">
<area shape="rect" coords="634,31,691,51" href="http://hateyourway.org/about-me/" alt="" title=""    />
<area shape="rect" coords="631,52,688,71" href="http://hateyourway.org/about-the-domain/" alt="" title=""    />
<area shape="rect" coords="625,73,688,93" href="http://hateyourway.org/archives/" alt="" title=""    />
<area shape="rect" coords="615,96,688,115" href="http://hateyourway.org/resources/" alt="" title=""    />
<area shape="rect" coords="717,47,816,87" href="http://hateyourway.org" alt="Home" title="Home"    />
</map></center>
 
</div><center>
   <div id="body">MAIN CONTENT
<div id="spacer"></div>
</div></center>
 
 
   <div id="footer"><center>
<img id="Image-Maps_3201112160453351" 
src="http://hateyourway.org/log/wp-content/themes/meow1/bottom.png" 
usemap="#Image-Maps_3201112160453351" border="0" width="1000" height="102" alt="" align="bottom"></center>
<map id="_Image-Maps_3201112160453351" align="bottom" name="Image-Maps_3201112160453351">
<area shape="rect" coords="608,55,697,74" href="http://hateyourway.org/plugins-used/" alt="" title=""    />
<area shape="rect" coords="561,72,692,90" href="http:/wordpress.org" alt="" title=""    />
<area shape="rect" coords="719,58,849,92" href="http://hateyourway.org/contact/" alt="" title=""    />
</map>
</div>
</div></div>

style.css file:

html,
body {
   margin:0;
   padding:0;
   height:100%;
 
}
 
#container {
   min-height:100%;
 
   position:relative;height:100%;
}
 
#header {
background: url("http://hateyourway.org/log/wp-content/themes/meow1/topbg.png") repeat-x;
}
 
#body {
width:500px;text-align:justify;
   padding:10px;:left:50%;
   padding-bottom:60px;   /* Height of the footer */
}
 
#footer {
   position:absolute;
background: url("http://hateyourway.org/log/wp-content/themes/meow1/bottombg.png") repeat-x; 
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
}
 
#spacer {
height:50px;
}

The background file that I'm wanting to use for the footer is right here