Who wants to help me fix my page? [Archive]

Click to See Complete Forum and Search --> : Who wants to help me fix my page?

Fembot

07-12-2006, 10:27 AM

http://www.africorp.org/newbuild.html

My footer won't push to the bottom when there isn't much text. This is a problem. Does anyone know how to fix it???

I would really appreciate it!!!

Thanks

WebJoel

07-12-2006, 11:58 AM

http://www.africorp.org/newbuild.html

My footer won't push to the bottom when there isn't much text. This is a problem. Does anyone know how to fix it???

I would really appreciate it!!!

Thanks

I'll look at it. :)

Noted:
#title {z-index: -1; margin: 0px; float: left; position: absolute; margin-top: 0px}
Only IE recognizes a "negative" z-index. All other browsers assume that the base is "1" or "+1" and proceed from there. Fixing this now (and bumping all other layers up) could save hours of consfusion later on... A z-index that you ALWAYS want to be on-top, just give it z-index:100; or z-index:500;, -whatever. It will likely never be challenged by another z-index.
I think though that this is for the print-media, it isn't harming anything so I'll leave that alone. Unless someone is using Firefox and tries to print your page, there won't be any problems..

WebJoel

07-12-2006, 02:27 PM

One quick&dirty way to accomodate IE seems to be to add to the BODY in the STYLE: height:66%, but this won't help compliant browsers... :eek:
(back)
I am having brain-freeze today! :( I should know how to do this but it eludes me.
Here is what I've got so far: (with minor editing to my liking, not necessarily correct)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html>
<head>
<title>Africorps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>

<style type="text/css" media="screen">
body, html {margin:0; padding:0; border:0;}
body {font-family: arial, verdana, serif; height:auto; min-height:600px;}

#header {font-size:12px;}
#title {z-index:-1; margin:0; float:left; position:absolute;}
#headertop {background-image: url('http://www.africorp.org/new/headertopbarbk.gif');
background-color:#cc9; height:17px; background-repeat:repeat-x;
background-position: left top;}
#headermid {height:130px; background-color:#cc9; background-repeat:repeat-x;
background-position: left top;}
#headermid h1 p{ font-family:garamond; font-size:16px;}/* Even though this isn't throwing any errors,
you cannot have a <p> in the same block level as an <h1> */

/*below is what I think you're trying to do */
#headermid p {font-family:garamond; font-size:16px;}
img.masthead{ margin-top:-15px; position:absolute;
float:left; z-index:20; margin-left:-2px;}
#headerbase { background-image: url('http://www.africorp.org/new/headermiddlebarbk.gif');
background-repeat:repeat-x; background-position:left top; height:26px;
background-color: #cc9;}
#midwrap {width: 750px; clear: both;
background-image: url('http://www.africorp.org/new/midbk.gif');
background-repeat: repeat-y; background-position: left top;
height: 100%; float: left;}
#sideleft {float:left; width:175px;}
#sideleft p {padding:10px;}
#sideright { float:left; width:549px;}
#sideright p {padding:10px;}
#footer {position:relative; bottom:0;clear:both; background:#cc9; height:30px;
border-top: 1px #663 solid;
border-bottom: -1px;}
ul li {list-style-type:none;line-height:1.8em;}
ul li a{text-decoration:none; font-size:1.0em;}
ul li a:hover {font-size:1.2em; text-decoration:underline;}
</style>

<style type="text/css" media="print">
img.masthead{display:none;}
#midwrap { background-color: #fff;}
#sideleft {display:none;}
#footer {background-color:#fff;}
</style>
</head>
<body>

<div id="header"><div id="title"><h1 title="Africorps: study abroad, field research, volunteer-service missions">Africorps</h1></div>
<div id="headertop"></div>
<div id="headermid">
<img class="masthead" alt="" alt="Africorps: study abroad, field research, volunteer-service missions" title="Africorps: study abroad, field research, volunteer-service missions"src="http://www.africorp.org/new/headerbanner.gif" />
</div>

<div id="headerbase"></div>

<div id="midwrap">
<div id="sideleft">
<h3 title="navigation" style="margin:12px 0 1px 30px; color:#808080;">Navigation</h3>
<ul>
<li><a href="#">Link One</li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>

<div id="sideright">
<img src="http://www.africorp.org/fieldpictures04/afrilogo.gif" alt="" style="margin:15px 10px 5px 15px; float:left; clear:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.
Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>

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

Fembot

07-12-2006, 06:04 PM

WebJoel

07-12-2006, 06:38 PM

thank you SO MUCH for agreeing to help me out...i didn't know that negative values weren't widely supported. I wish there was a place I could go to learn this kind of info.

Is it even possible to push the footer down? I just assumed that it was possible (like with tables) but I guess I haven't really seen any examples...

Actually, TABLEs are the supported method of 'shoving down' a section of a web page to always be on the bottom of any size screen. I read a few sites that note this aspect of legacy, -but somewhere I have seen an instruction page that shows how to do what you ask and it's done with styles/css I beleived. I'm still searching for this..

That's kind of a neat page that you're doing. I changed a few things and if they or anything that I offer aren't to your liking, do change them back. :)