In dire need of help!, I need this site up before the 28th |
![]() ![]() |
In dire need of help!, I need this site up before the 28th |
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: |
|
|
|
Aug 20 2008, 12:30 AM
Post
#2
|
|
![]() AIDS at RAVES. ![]() ![]() ![]() ![]() ![]() ![]() Group: Official Designer Posts: 2,386 Joined: Dec 2007 Member No: 598,878 |
try putting the img between the </table> and </div>
|
|
|
|
Aug 20 2008, 12:36 AM
Post
#3
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
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: |
|
|
|
Aug 20 2008, 12:47 AM
Post
#4
|
|
![]() AIDS at RAVES. ![]() ![]() ![]() ![]() ![]() ![]() Group: Official Designer Posts: 2,386 Joined: Dec 2007 Member No: 598,878 |
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
|
|
|
|
Aug 20 2008, 01:02 AM
Post
#5
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
wait, where?
|
|
|
|
Aug 20 2008, 01:09 AM
Post
#6
|
|
![]() AIDS at RAVES. ![]() ![]() ![]() ![]() ![]() ![]() Group: Official Designer Posts: 2,386 Joined: Dec 2007 Member No: 598,878 |
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?
|
|
|
|
Aug 20 2008, 01:14 AM
Post
#7
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
i think I know what you're talking about...
that white box is the content & table tags. |
|
|
|
Aug 20 2008, 01:05 PM
Post
#8
|
|
![]() 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. By the way, I think specifying the height property in the css of the content area is unnecessary. ^^; |
|
|
|
Aug 20 2008, 01:23 PM
Post
#9
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
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;} |
|
|
|
Aug 20 2008, 01:31 PM
Post
#10
|
|
![]() The Procrastinator ![]() ![]() ![]() Group: Member Posts: 56 Joined: Sep 2006 Member No: 467,931 |
Don't forget to replace the XX in the height of the footer. (I hope this'll fix it.
|
|
|
|
Aug 20 2008, 01:35 PM
Post
#11
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
|
|
|
|
Aug 20 2008, 02:33 PM
Post
#12
|
|
![]() The Procrastinator ![]() ![]() ![]() Group: Member Posts: 56 Joined: Sep 2006 Member No: 467,931 |
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. |
|
|
|
Aug 20 2008, 02:50 PM
Post
#13
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
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;
|
|
|
|
Aug 20 2008, 03:06 PM
Post
#14
|
|
![]() The Procrastinator ![]() ![]() ![]() Group: Member Posts: 56 Joined: Sep 2006 Member No: 467,931 |
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) |
|
|
|
Aug 20 2008, 03:12 PM
Post
#15
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
|
|
|
|
Aug 20 2008, 03:39 PM
Post
#16
|
|
![]() The Procrastinator ![]() ![]() ![]() Group: Member Posts: 56 Joined: Sep 2006 Member No: 467,931 |
|
|
|
|
Aug 20 2008, 07:34 PM
Post
#17
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
|
|
|
|
Aug 21 2008, 05:27 AM
Post
#18
|
|
![]() The Procrastinator ![]() ![]() ![]() Group: Member Posts: 56 Joined: Sep 2006 Member No: 467,931 |
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. ^^; |
|
|
|
Aug 21 2008, 12:20 PM
Post
#19
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
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>¦ 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>→ Navigation</span></h1> & <a href="index.html">Main</a><br /> & <a href="aboutkc.html">About</a><br /> & <a href="members.html">Board Members</a><br /> & <a href="events.html">Events</a><br /> & <a href="fundraisers.html">Fundraisers</a><br /> & <a href="slkeyclub.dotphoto.com">Photo Gallery</a><br /> & <a href="hours.html">Member Hours</a><br /> & <a href="newsletters.html">Newsletters</a><br /> & <a href="cheers.html">D2 Cheers</a><br /> & <a href="chat.html">Time To Chat!</a><br /> & <a href="credits.html">Credits</a> <h1><span>→ Other Links</span></h1> & <a href="http://cnhkeyclub.org/">CNH Key Club</a><br /> & <a href="http://d2kiwis.org">D2 Kiwis</a><br /> & <a href="http://www.keyclub.org/">Key Club International</a><br /> & <a href="http://alamedakeyclub.bravehost.com">Alameda</a><br /> & <a href="http://ehskeywees.org/">Encinal</a><br /> & <a href="http://www.ohskeyclub.org/">Oakland</a><br /><br /> <center>Site © <strong>Debra Cheung</strong> <br /> Kiwi Art © <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;} |
|
|
|
Aug 21 2008, 08:48 PM
Post
#20
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
Nvm. I'll just keep the footer there, then. It still looks nice, I suppose :3
Thank you so much for your help! ;D |
|
|
|
Aug 21 2008, 11:33 PM
Post
#21
|
|
![]() Cornflakes :D ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Staff Alumni Posts: 4,541 Joined: Dec 2005 Member No: 322,923 |
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. |
|
|
|
Aug 22 2008, 12:42 AM
Post
#22
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
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 |
|
|
|
Aug 22 2008, 05:42 PM
Post
#23
|
|
|
Senior Member ![]() ![]() ![]() Group: Member Posts: 31 Joined: Jul 2007 Member No: 552,713 |
I'm officially done w/ this site now :]
|
|
|
|
Aug 22 2008, 05:43 PM
Post
#24
|
|
![]() Senior Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Head Staff Posts: 18,173 Joined: Mar 2005 Member No: 108,478 |
|
|
|
|
![]() ![]() |