Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Footer won't stay at the bottom!


  • Please log in to reply

#1
theinnernette

theinnernette

    New Member

  • Member
  • Pip
  • 2 posts
I love the theme I'm using on my website, (Corporattica), because it looked great!

...And then I purchased a monitor that wasn't from 2002.

Actually, everything still looks great but the footer is RIGHT beneath the body of the page. I looked up the tutorials for a "sticky" footer, but none seem to work.

HTML:
<body>
	<div id="bg">
		<div class="wrap"> (Content...)
		</div>
			
		<!-- footer -->
		<div id="footer">
			<div id="footerbg">
				
					<!-- footer links --><!-- /footer links -->
					
					<p id="copy"><span>Company Name</span></p>
					
					<div class="clear"></div>
			</div>
		</div>
		<!-- /footer -->
		
	</div>
</body>
</html>

CSS:

body { 
	font: .8em Arial, Verdana, Tahoma, Sans-Serif; 
	background: #f4f4f4 url(../images/bgtile.jpg) repeat-x; 
	color: #555; 
}

#bg { 
	background: url(../images/bg.jpg) no-repeat center top; 
}

.wrap { 
	margin: 0 auto; 
	width: 960px;
	height: 100%;
}

/* footer */
#footer { 
	clear: both; 
	color: #999; 
	background: url(../images/footertile.jpg) repeat-x;
	font-size: .9em;
	clear:both;
}
#footerbg {
	padding: 35px 0 15px 0;
	background: url(../images/footer.jpg) no-repeat center top;
}
#footer p {
	margin: 0 0 12px;
	padding: 6px 0;
	text-align: center;
}
#footer_menu {
	float: right;
	padding: 4px 0 0;
}
#footer a { 
	color: #999; 
	margin: 0 5px 0 0; 
	padding: 6px 10px;
	background: url(../images/dot.png) no-repeat left center; 
	border: 1px solid transparent;
}
#footer a:hover {
	border-color: #555;
}
#fleft {
	clear: both;
	padding: 25px 0 0;
	font-size: .94em;
}

#copy { 
	color: #777; font-size: 1.5em; 
}
#copy span {
	color: #999;
	text-align: center;
}

Any help would be greatly appreciated! Also, an explanation of the code would help immensely, as this is part of a school project, and the point of it is to learn.
  • 0

Advertisements


#2
AstraNut

AstraNut

    Member

  • Member
  • PipPipPip
  • 384 posts
The template looks fine and seems to be XHTML coded. Do you have a link to the online layout you are currently using as posted code is not enough? You shouldn't need to use "sticky footer" coding with that template.

How to Do Templates:

How to Download and Edit a Template Video Tutorial: http://www.clantempl...L_and_Edit.html
How to Make a New Page Video Tutorial: http://www.clantempl...a_New_Page.html
How to Upload Your Template Video Tutorial: http://www.clantempl..._to_Upload.html

Edited by AstraNut, 19 May 2011 - 09:07 PM.

  • 0

#3
theinnernette

theinnernette

    New Member

  • Topic Starter
  • Member
  • Pip
  • 2 posts
http://www.solucija....te/corporattica
  • 0

#4
schmelfhelp

schmelfhelp

    Member

  • Member
  • PipPip
  • 12 posts
This sticky footer has always worked for me
http://www.cssstickyfooter.com/



so if you compare it to what you have right now - your footer should be outside of the wrapper which contains the content (see below) - notice that i am moving the footer outside of the div that contains it (#bg div). This may break something else in the page - you may wanna check it out.

<div id="bg">
<div class="wrap"> (Content...)
</div>
</div> <!--end of div #bg -->

<!-- footer -->
<div id="footer">
<div id="footerbg">

<!-- footer links --><!-- /footer links -->

<p id="copy"><span>Company Name</span></p>

<div class="clear"></div>
</div>


</div>

Then you also need to set your css - including some general styles to the overall site


* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {height: 100%;}

#bg {min-height: 100%;}

.wrap {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}



/* IMPORTANT

You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->

*/



As for explaining it all well have a read through the site this is from and then google away to find html tutorials.. sorry :) It's late here but this should help for now.

hope it helps
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP