Forums > In dire need of help!

Forums > Resource Center > Webmasters' Corner > Resolved Topics

wintermelody

Aug 20 2008, 12:27 AM

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:

Aberisk

Aug 20 2008, 12:30 AM

try putting the img between the </table> and </div>

wintermelody

Aug 20 2008, 12:36 AM

I did, but it's still not at the bottom ><

It seems like no matter what I do, it won't go to the bottom and be centered.

Or when there's lots of content, it won't be centered.

How frustrating D:

Aberisk

Aug 20 2008, 12:47 AM

wait whats the div tag for the section right underneath the footer. that white box. whats the tag for that ? its missing in the code

wintermelody

Aug 20 2008, 01:02 AM

wait, where?

Aberisk

Aug 20 2008, 01:09 AM

you know how in the image there is like a white box below the footer that you want to go down, what style tags do they hold?

wintermelody

Aug 20 2008, 01:14 AM

i think I know what you're talking about...

that white box is the content & table tags.

dreamgurl36

Aug 20 2008, 01:05 PM

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

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

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

wintermelody

Aug 20 2008, 01:23 PM

Ok...I've done that; I've taken out the height property of the css for the content area & put the div id for the footer.

But now the footer won't appear o___o;;

screenshot;

code;

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 

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

ional.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 -->


<div id="footer">
	</div>

<!-- 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>

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;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#footer {
      clear: both;
      height: XXpx;
      background: url(images/footer.jpg) 

no-repeat;
  }

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;}

dreamgurl36

Aug 20 2008, 01:31 PM

Don't forget to replace the XX in the height of the footer. (I hope this'll fix it.

)

wintermelody

Aug 20 2008, 01:35 PM

This is what happened;;

dreamgurl36

Aug 20 2008, 02:33 PM

The "bottom" problem is fixed. It's just that you didn't type in enough text for it to show. If you type a lot of stuff, it should work.

Hmm.. about it not being centered. Try this?

CODE

#footer {
       clear: both;
       height: XXpx;
      width: XXpx;
       background: url(YOURFOOTER.jpg) no-repeat;
       margin: 0 auto;
   }

I could make your layout centered, but the coding would be different...

Oh yes, try specifying the width too.

wintermelody

Aug 20 2008, 02:50 PM

Yea, the "bottom" part is fixed; now that no matter how big the content box is, it shall be there!

it's just not at the bottom bottom centered now ><

How different would the coding be?

If you could, that would be great! I'm getting frustrated ><;

It's actually in the same place but the whole thing is being shown.

screenshot;

dreamgurl36

Aug 20 2008, 03:06 PM

Do you mind posting just the footer image for me to see, please?

(My point is that the width of the footer image should equal the width of your content area, without including the navigation)

wintermelody

Aug 20 2008, 03:12 PM

Okie doke, here it is;

i g2g now for tennis but i'll def. come back here to work on my website [been working on it nonstop!]

dreamgurl36

Aug 20 2008, 03:39 PM

Have fun!

When you come back, try using this as your footer image. (adjust the height and width in your css code too)

wintermelody

Aug 20 2008, 07:34 PM

I am back! Muwahaha

So, I did that, & Here's what happened;

screenshot;

also, when i put padding in the content box, something odd happens o__O

screenshot;

dreamgurl36

Aug 21 2008, 05:27 AM

I think I understand now. You can add the height adjustment to your content box again if you want to see your footer down there. :P

And can you show your current coding?

Note: the footer will only show under the content area, and won't be under the navigation. If you want it differently, then there'll be more fixing to do. ^^;

wintermelody

Aug 21 2008, 12:20 PM

Say wha now? o___o i want it centered under both navi & content. ><

Well, I guess it looks okay not in the center? But then if I encounter this problem again, then I would know what to do...how irritating x__x

code;

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">

<h1><span>&brvbar; Welcome :)</span></h1>

<img src="images/avatar.png" align="left">To the <u>08-09</u> website for SL! :] I've <em>painstakingly</em> labored many hours and days coding and designing for <strong>you</strong>. Please be aware that this is the <u>actual</u> first website I've ever created myself. It would be <em>most</em> kind of you to bookmark this site; or however else you're gonna remember the url.

<p>Other than that, enjoy the site. =]





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

<!-- End of Content -->

<div id="footer">
</div>



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

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

<h1><span>&rarr; Navigation</span></h1>
&amp; <a href="index.html">Main</a><br />
&amp; <a href="aboutkc.html">About</a><br />
&amp; <a href="members.html">Board Members</a><br />
&amp; <a href="events.html">Events</a><br />
&amp; <a href="fundraisers.html">Fundraisers</a><br />
&amp; <a href="slkeyclub.dotphoto.com">Photo Gallery</a><br />
&amp; <a href="hours.html">Member Hours</a><br />
&amp; <a href="newsletters.html">Newsletters</a><br />
&amp; <a href="cheers.html">D2 Cheers</a><br />
&amp; <a href="chat.html">Time To Chat!</a><br />
&amp; <a href="credits.html">Credits</a>


<h1><span>&rarr; Other Links</span></h1>
&amp; <a href="http://cnhkeyclub.org/">CNH Key Club</a><br />
&amp; <a href="http://d2kiwis.org">D2 Kiwis</a><br />
&amp; <a href="http://www.keyclub.org/">Key Club International</a><br />
&amp; <a href="http://alamedakeyclub.bravehost.com">Alameda</a><br />
&amp; <a href="http://ehskeywees.org/">Encinal</a><br />
&amp; <a href="http://www.ohskeyclub.org/">Oakland</a><br /><br />
<center>Site &copy; <strong>Debra Cheung</strong>
<br />
Kiwi Art &copy; <strong>Amanda Vien</strong>
</center>


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

</table>
</center>

</BODY>
</HTML>

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;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;}

#content {
background-color: #FFF;
font-family: Verdana, Sans-serif;
font-align: right;
font-color: #7F8081;
position : absolute;
top: 360px;
left: 400px;
width: 363px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;}

#footer {
clear: both;
width: 400px;
height: 76px;
background: url('images/xfooterms1.jpg') no-repeat;
margin: 0 auto;}

a:link {
color: #7D563C;
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: line-through;}

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-color: #FFF;
font-color: #B0B3B4;
font-family: Verdana, Georgia;
font-size: x-small;
border: none;}

h1 {
border-bottom: 2px dotted #088306;
background-color: #8ABD70;
padding: 3px;
font-family: Trebuchet MS, Verdana, Arial;
font-size: 1.5em;
letter-spacing: 1px;}

h1 span {
color: #FFFFFF;}

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, strong {
color: #3E7E48;}

i, em {
color: #915023;
font-family: Georgia}

u {
color: #27A2AD;}

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

wintermelody

Aug 21 2008, 08:48 PM

Nvm. I'll just keep the footer there, then. It still looks nice, I suppose :3

Thank you so much for your help! ;D

Insurmountable

Aug 21 2008, 11:33 PM

So did you figure it out, is it fixed? If not if you could put up a link or something because I can't load those images for some reason o_O

but if this is all fixed, please reply back and I'll close this.

wintermelody

Aug 22 2008, 12:42 AM

Er...well...now the only really tiny problem I have is centering everything, regardless of the screen resolution o__o;

Can you or anyone help me on that? xD

wintermelody

Aug 22 2008, 05:42 PM

I'm officially done w/ this site now :]

jaeminnie

Aug 22 2008, 05:43 PM

QUOTE(wintermelody @ Aug 22 2008, 06:42 PM)

I'm officially done w/ this site now :]

Then I'll close this. PM me if you need it reopened.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.