How do I get my footer to move in relation to my expanding main content?

Printable View

01-07-2013, 09:09 PM
Darkmessiah

How do I get my footer to move in relation to my expanding main content?

Hello, am building my first site at the moment and am strugglin to move the footer in relation to my main content which expands and contracts with the amount of content in it. iv tried a couple of things with no luck, any help you can give me would be much appreciated!

excuse any rookie mistakes am using a combo of online tutorials and dreamweaver to get my code!

Quote:

Originally Posted by Index

<!DOCTYPE html>
<html>

<head>
<meta charset='UTF-8' />

<title>BASE</title>

<link rel='stylesheet' href='css/style.css' />



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script src='js/example.js'></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onLoad="MM_preloadImages('images/navbar/about_linkover.png','images/navbar/upcoming_linkover.png','images/navbar/previous_linover.png','images/navbar/involved_linkover.png')">

<div id="page-wrap">

<header>
<div id="logo"></div>
<nav>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','images/navbar/about_linkover.png',1)"><img src="images/navbar/about_link.png" name="About Us" width="107" height="59" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Upcoming Workshops','','images/navbar/upcoming_linkover.png',1)"><img src="images/navbar/upcoming_link.png" name="Upcoming Workshops" width="158" height="65" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Previous Workshop','','images/navbar/previous_linover.png',1)"><img src="images/navbar/previous_link.png" name="Previous Workshop" width="158" height="65" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Get Involved','','images/navbar/involved_linkover.png',1)"><img src="images/navbar/involved_link.png" name="Get Involved" width="158" height="65" border="0"></a>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','images/navbar/facebook_linkover.png',1)"><img src="images/navbar/facebook_link.png" name="Facebook" width="47" height="49" border="0"></a>
</nav>
</header>
<div id="main-content">

<h1>Title</h1>
<p>orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem.
</p>

</div>
</div> 

<footer>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Upcoming Workshops</li>
<li>Previous Workshops</li>
<li>Get Involved</li>
</ul>
</footer>

</body>

</html>

Quote:

Originally Posted by CSS

* { margin: 0; padding: 0; }
html {
background: black url(../images/bg.jpg);
height: 100%;
}
body {
font: 14px/1.4 Georgia, serif;
height: 100%
}
article, aside, figure, footer, header, nav, section { display: block; }

#page-wrap {
width: 870px;
margin-top: 125px;
margin-left: auto;
margin-right: auto;
}

header {
position: relative;
background: url(../images/navbar.png)
no-repeat;
width: 969px;
height: 139px;
z-index:2
}

#logo {
position: absolute;
top: -100px;
left: -120px;
background: url(../images/logo.png);
no-repeat;
width: 258px;
height: 406px;
}

nav {
position: absolute;
left: 140px;
top: 25px;
}

#main-content {
position: absolute;
top: 150px;
width: 820px;
padding: 160px 25px 25px 25px;
min-height: 60%;
background: white;
border:2px solid #000000;
z-index:1;
box-shadow: 0 0 20px #fbf7c1;
}

#page-wrap h1 {
text-align: right;
font: 32px trajan pro; color: #173583;
padding-bottom: 60px;
text-decoration: underline;
}

footer {
width: 870px;
margin: 50% auto 0px;
letter-spacing: 1px;
font-family: trajan pro;
color: white;
text-align: center;
position: relative;
}

footer ul {
list-style-type: none;
}

footer ul li {
display: inline;
padding: 5px;
}

Cheers John
01-08-2013, 05:21 AM
simplypixie

I would say it is because you have a min-height of 60% on your main content div and if your actual content takes up less than 60% of the screen height then it will appear that your footer is not moving up to meet the bottom of the content. Add a border to your main content div and you will be able to see if that is the case (obviously the border will need removing afterwards).

I would also like to recommend you move your relative and absolute positioning as they are not required (nor is the z-index) on the layout you have. Just replace top: 150px with margin-top: 150px.
01-10-2013, 11:54 AM
Darkmessiah

Thanks for the response Pixie, its haven't really got the issue with the footer moving up to meet the main content, am quite happy for it to be sat at the bottom of the page, the issue I have is the main content when filled with text to expand it beyond 60% covers over the footer, I need a way of having the footer move with the content when it extends beyond 60%, he is a Pictures so you can see what am talking about.

Also thanks for the suggestions regards the z-index and relative/absolute positioning, I did try to remove them, but divs on the site move all over the place and I dont have enough experience to place them correctly without them.
01-10-2013, 11:59 AM
Darkmessiah

Hi Pixie, thanks for the response, the issue I have isnt so much the footer moving up to meet the content (am quite happy for it to sit at the bottom of the page when the main content is at 60%) its when the content expands beyond 60%, it covers over the footer rather than moving the footer in relation to it, here is a Picture so you can see what am talking about.

Also thanks for the advice on the z-index and rel/abs positioning, I did have a try at removing them but the divs just moved all over the place and I dont have enough experience to keep the divs in place another way
01-10-2013, 12:32 PM
iBeZi

Your problem is definitely all the absolute positioning you're doing...

You can fix most of your problems by moving all the styles that are on the main content on to the page wrap element, then your nav is inside the white area to begin with, then it's just a matter of centring the navigation.

Code:

<!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>BASE</title> <link type="style/css" href="css/style.css"/>  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script src='js/example.js'></script> <script type="text/javascript"> function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } </script> </head> <body onLoad="MM_preloadImages('images/navbar/about_linkover.png','images/navbar/upcoming_linkover.png','images/navbar/previous_linover.png','images/navbar/involved_linkover.png')"> <div id="page-wrap"> <header> <div id="logo"></div> <nav> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('About Us','','images/navbar/about_linkover.png',1)"><img src="images/navbar/about_link.png" name="About Us" width="107" height="59" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Upcoming Workshops','','images/navbar/upcoming_linkover.png',1)"><img src="images/navbar/upcoming_link.png" name="Upcoming Workshops" width="158" height="65" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Previous Workshop','','images/navbar/previous_linover.png',1)"><img src="images/navbar/previous_link.png" name="Previous Workshop" width="158" height="65" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Get Involved','','images/navbar/involved_linkover.png',1)"><img src="images/navbar/involved_link.png" name="Get Involved" width="158" height="65" border="0"></a> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Facebook','','images/navbar/facebook_linkover.png',1)"><img src="images/navbar/facebook_link.png" name="Facebook" width="47" height="49" border="0"></a> </nav> </header> <div id="main-content"> <h1>Title</h1> <p>orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. Donec ut lorem eu ligula rutrum ullamcorper id at risus. Morbi sit amet diam nisi. Phasellus porttitor adipiscing risus ut fringilla. Nam quis pretium turpis. Duis ullamcorper urna eget nunc lobortis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget mauris nisl, ut viverra nibh. Ut elementum tempus quam sit amet imperdiet. Vestibulum neque elit, vulputate id feugiat tincidunt, condimentum a ante. Aliquam vitae eros est, ut condimentum magna. Vestibulum convallis aliquet ipsum, sed placerat enim ultricies at. Duis at elit at justo aliquet vulputate. Pellentesque eros turpis, tincidunt at rhoncus id, tempor sit amet sapien.orem ipsum dolor sit amet, consectetur adipiscing elit. In lorem ipsum, placerat eget rhoncus ut, vestibulum nec sem. </p> </div> </div>  <footer> <ul> <li>Home</li> <li>About Us</li> <li>Upcoming Workshops</li> <li>Previous Workshops</li> <li>Get Involved</li> </ul> </footer> </body> </html>

Code:

* { margin: 0; padding: 0; } html { background: black url(../images/bg.jpg); height: 100%; } body { font: 14px/1.4 Georgia, serif; height: 100% } article, aside, figure, footer, header, nav, section { display: block; } #page-wrap { width: 820px; padding: 0px 25px 25px 25px; min-height: 60%; background: white; border:2px solid #000000; z-index:1; box-shadow: 0 0 20px #fbf7c1; margin-top: 125px; margin-left: auto; margin-right: auto; } header { background: url(../images/navbar.png) no-repeat; } #logo { position: absolute; top: -100px; left: -120px; background: url(../images/logo.png); no-repeat; width: 258px; height: 406px; } nav { width: 640px; margin: 20px auto; } #page-wrap h1 { text-align: right; font: 32px trajan pro; color: #173583; padding-bottom: 60px; text-decoration: underline; } footer { width: 870px; margin: 5% auto 0px; letter-spacing: 1px; font-family: trajan pro; color: white; text-align: center; position: relative; } footer ul { list-style-type: none; } footer ul li { display: inline; padding: 5px; }