Jump to content

Sticky footer, Confusing code


doodleplex
 Share

Recommended Posts

Long story short, I'm self taught, so maybe I'm missing something obvious here, but I'm working on this website for my job and I can't get the footer to stay at the bottom without adding a bunch of breaks after the text on the "About Us" page. I tried looking online on how to fix it, but the sticky footer codes I found don't seem to work in the theme's CSS, or maybe I'm just doing it wrong, I don't know. All I know is that it's not working no matter what I've tried.

 

I'm not going to post the CSS code as it's horribly long and I'm not entirely sure what is needed, so the link for the CSS is here: http://etsemerald.com/wp-content/themes/alexandria/lite.css?ver=3.6

 

In general, I dislike how the theme author wrote it, as I seem to have no control over the font type either, but as my boss is happy with the theme, I can't change it either.

Link to comment
Share on other sites

Hey there, I am self taught too so I know the feeling. So much so that I have disdain for templates "themes". Now with that it may be almost impossible to make this template have a sticky footer without completely rewriting allot. I don't know yet since I have not read the css...

 

In the mean time while I look it over, the most important factor of making a sticky footer is three things. One, you need a container that holds all the content besides the footer. Two, you need a div that can push the footer down within the container. Three, you need to make the html/body with a height of 100%, probably most of the sticky footer code has how to do that with respect to IE. Now being a template its hard to edit the HTML framework but play around.

 

I will look over your code and update you if you find nothing.

Link to comment
Share on other sites

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Sticky Footer</title><style>*{margin: 0;padding: 0;}img#logo {height: 120px;}html,body {height: 100%;min-height:600px;}#wrapper {min-height: 100%;background-color: #9f9;width: 800px;margin: 0 auto -100px auto; /* equal to footer height */text-align: center;border: 1px dotted green;}header {background: #393;margin: 0 auto;text-align: center;border 1px dotted green;}footer {height: 100px;background: #eee;margin: 0 auto;width: 800px;text-align: center;}</style></head><body><div id="wrapper"><header><img id="logo" src="http://www.fuelyourcreativity.com/files/a.jpg" alt="logo"/></header><p>Content...</p><img src="http://i.imgur.com/GbguM.png" id="cat1" alt="cat masked and unmasked"/><p>Content...</p></div><footer> <p>©Copyright 2013 Footer</p></footer></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...