Footer Help

+1 Brandon Bennett · September 23, 2014
I'm having some trouble keeping the footer at the bottom of my website. no matter what i try to put for styling rules i can't get it fixed at the bottom. what are some things you have done to make a footer stay at the bottom? i've tried using the "fixed" and "height properties, but it still is at about the middle of the screen...

Post a Reply

Replies

Oldest  Newest  Rating
0 Brandon Bennett · September 23, 2014
Thanks you two! both sets of code helped me a good lot!
0 JOhaL jaTT · September 23, 2014
may be this will help you...........
<html>
<head>
<title>footer</title>
<style>
body{
background:url("yourfolder/yourimage.jpg") repeat;

}
#footer{
  position:fixed;
  bottom: 0px;
  margin: 0px;
  left: 0px;
  right:0px;
  width: 100%;
  height: 40px;
  font-family: Arial;
  text-shadow: 1px 1px px black;
  border-top: 1px solid rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.25);
  box-shadow: inset 0 1px rgba(255,255,255,0.3);
  box-shadow: inset 0 1px rgba(255,255,255,0.3) ,
  inset 0 10px rgba(255,255,255,0.2) , inset 0 10px 20px 
  rgba(255,255,255,0.25)
  , inset 0 -15px 30px rgba(0,0,0,0.3);
  
  }
</style>
</head>
<body>
<div id="footer">
</div>
</body>
</html>
+1 James Grimshaw · September 23, 2014
Have you tried:
#myfooter {
    position: fixed;
    left: 0;
    bottom: 0;
width: 100%;
    height: 100px; /* Change this as necessary */
}


If you've tried everything and nothing is working, take a look at this great tutorial from phpacademy instead.

https://www.youtube.com/watch?v=Upc_fwaiosg&list=UUpOIUW62tnJTtpWFABxWZ8g

Good luck :)

James
  • 1

HTML / CSS / Web Design

107,015 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators