Log In · Register

 
In dire need of help!, I need this site up before the 28th
wintermelody
post Aug 20 2008, 12:27 AM
Post #1


Senior Member
***

Group: Member
Posts: 31
Joined: Jul 2007
Member No: 552,713
Hello all :3

I'm a webmaster for my club but this is actually my first time coding one [I used a blog as a website last year].

I really need help on centering the footer image (w/ hearts to the side - caring - is our way of life) to the bottom, and stay there, regardless how big the content box is [the big white box on the left].

here is a screen shot;;


the code;
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

onal.dtd">
<HTML>
<HEAD>
<TITLE>SLHS's Key Club - The Kiwis!

=)</TITLE>
<META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet"

type="text/css">
</HEAD>

<body>
<center>
<BODY BGCOLOR=#F1F3F4 LEFTMARGIN=0

TOPMARGIN=0 MARGINWIDTH=0

MARGINHEIGHT=0>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE WIDTH=540 BORDER=0

CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG

SRC="images/index_01.jpg" WIDTH=540

HEIGHT=90 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG

SRC="images/index_02.jpg" WIDTH=540

HEIGHT=89 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG

SRC="images/index_03.jpg" WIDTH=540

HEIGHT=90 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG

SRC="images/index_04.jpg" WIDTH=540

HEIGHT=89 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG

SRC="images/index_05.jpg" WIDTH=540

HEIGHT=442 ALT=""></TD>
</TR>



</TABLE>
<!-- End ImageReady Slices -->

<!-- START OF CONTENT -->

<div id="content">
<table width="400" border="0" cellspacing="0"

cellpadding="0">
<tr><td class="content">


<h3>Shall be updated soon :P</h3>

</tr></td>
</div>
</table>

<!-- End of Content -->

<TD>
<IMG

SRC="images/footer.jpg" WIDTH=567

HEIGHT=78 ALT=""></TD>
</TR>



<!-- Start of Navigation -->
<div id="navigation">
<table width="149" border="0" cellspacing="0"

cellpadding="0">
<tr><td class="navigation">

<a href="xx">testing</a>
<h1>testing</h1>
<h2>testing</h2>


</tr></td>
</div>
</table>
<!-- End of Navigation -->

</table>
</center>

</BODY>
</HTML>


the css;
CODE
#navigation {
background-color: #FFF;
font-family: Georgia, Arial, sans-serif;
font-align: right;
font-color: #7F8081;
position: absolute;
top: 0px;
left: -165px;
width: 149px;
height: 349px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#content {
background-color: #FFF;
font-family: Georgia, Arial, sans-serif;
font-align: right;
font-color: #7F8081;
position: absolute;
top: 350px;
left: 404px;
width: 400px;
height: 388px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

a:link {
color: #C0DBBA;
font-family: Georgia;
font-size: x-small;
background:#FFFFFF;
text-transform: none;
text-decoration: none;

}

a:visited {
color: #53B1B8;
font-family: Georgia;
font-size: x-small;
background:#FFFFFF;
text-transform: none;
text-decoration: none;

}

a:hover {
color: #E69747;
font-family: Georgia;
font-size: x-small;
background:#FFFFFF;
text-transform: none;
text-decoration: none;
cursor: nw-resize;
font-weight: bold;

}

body{
background-color: #F1F3F4;
font-color: #7F8081;
font-weight: none;
font-family: Georgia, Arial, Sans-Serif;
font-size: x-small;
margin: 0px auto;
padding: 0px;
text-align: JUSTIFY;
scrollbar-face-color: #F1F3F4;
scrollbar-shadow-color: #F1F3F4;
scrollbar-3dlight-color: #F1F3F4;
scrollbar-arrow-color: #755139;
scrollbar-track-color: #F1F3F4;
scrollbar-darkshadow-color: #F1F3F4;
scrollbar-highlight-color: #F1F3F4;
}

table, td, tr {
background-image: url('images/footer.jpg')
background-position: 20px 45px;
background-color: #FFF;
font-color: #B0B3B4;
font-family: Georgia;
font-size: x-small;
border: none;
}

h1 {
color: #D89A05;
letter-spacing: -1px;
text-align: center;
font-family: Georgia;
margin: 10px 0px 0px 0px;
line-height: 15px;
}

h2 {
color: #01A67D;
font-size: 15px;
letter-spacing: -1px;
text-align: center;
font-family: Georgia;
margin: 10px 0px 0px 0px;
font-variant: small-caps;
}

b {
color: #6BA24F;}

i, em {
color: #915023;}

u {
color: #27A2AD;}

input, textarea {
border: none;
color: #c0c0c0;
font-family: Georgia;
font-size: x-small;
background: #FFFFFFF;}


pleaaaaaaase! someone help me! i'm getting so frustrated and my head hurts D:
 
 
 Start new topic
Replies
dreamgurl36
post Aug 20 2008, 01:05 PM
Post #2


The Procrastinator
***

Group: Member
Posts: 56
Joined: Sep 2006
Member No: 467,931
Okay....so right now, your whole layout is properly centered except your footer (which is out of place)?

The thing is, the footer shouldn't be just an image that's put under where your content ends. Why don't you make a div id that's just to hold the footer image?

Add this code anywhere in your css:
CODE
#footer {
      clear: both;
      height: XXpx;
      background: url(YOURFOOTER.jpg) no-repeat;
  }


After the end of your content </table>, add this code:
CODE
<div id="footer">
  </div>


I'm not sure if it'll work or not, coz you seem to be using both divs and tables. Do try it anyway. biggrin.gif

By the way, I think specifying the height property in the css of the content area is unnecessary. ^^;
 

Posts in this topic
wintermelody   In dire need of help!   Aug 20 2008, 12:27 AM
SkyliteX   try putting the img between the </table> and...   Aug 20 2008, 12:30 AM
wintermelody   I did, but it's still not at the bottom >...   Aug 20 2008, 12:36 AM
SkyliteX   wait whats the div tag for the section right under...   Aug 20 2008, 12:47 AM
wintermelody   wait, where?   Aug 20 2008, 01:02 AM
SkyliteX   you know how in the image there is like a white bo...   Aug 20 2008, 01:09 AM
wintermelody   i think I know what you're talking about... t...   Aug 20 2008, 01:14 AM
dreamgurl36   Okay....so right now, your whole layout is properl...   Aug 20 2008, 01:05 PM
wintermelody   Ok...I've done that; I've taken out the he...   Aug 20 2008, 01:23 PM
dreamgurl36   Don't forget to replace the XX in the height o...   Aug 20 2008, 01:31 PM
wintermelody   This is what happened;;   Aug 20 2008, 01:35 PM
dreamgurl36   The "bottom" problem is fixed. It's ...   Aug 20 2008, 02:33 PM
wintermelody   Yea, the "bottom" part is fixed; now tha...   Aug 20 2008, 02:50 PM
dreamgurl36   Do you mind posting just the footer image for me t...   Aug 20 2008, 03:06 PM
wintermelody   Okie doke, here it is; i g2g now for tennis but...   Aug 20 2008, 03:12 PM
dreamgurl36   Have fun! When you come back, try using thi...   Aug 20 2008, 03:39 PM
wintermelody   I am back! Muwahaha So, I did that, & H...   Aug 20 2008, 07:34 PM
dreamgurl36   I think I understand now. You can add the height a...   Aug 21 2008, 05:27 AM
wintermelody   Say wha now? o___o i want it centered under both n...   Aug 21 2008, 12:20 PM
wintermelody   Nvm. I'll just keep the footer there, then. It...   Aug 21 2008, 08:48 PM
Insurmountable   So did you figure it out, is it fixed? If not if y...   Aug 21 2008, 11:33 PM
wintermelody   Er...well...now the only really tiny problem I hav...   Aug 22 2008, 12:42 AM
wintermelody   I'm officially done w/ this site now :]   Aug 22 2008, 05:42 PM
jaeminnie   QUOTE(wintermelody @ Aug 22 2008, 06:42 P...   Aug 22 2008, 05:43 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic