[Solved] Having trouble adding a footer

[kerninglife]

I have been trying to add a basic footer with an email link and social media icons to my redesigned site and making it stay at the bottom of my site with some padding around it, but what I end up with is a footer that is fixed on the page and doesn’t stay at the bottom.

I’ve read several articles of people trying to achieve this “sticky-footer” that stays at the bottom of the page but I haven’t been able to do it. I’m thinking my CSS might have some conflicting code but considering I’m not THAT knowledgable in HTML/CSS I don’t know.

The link to this site is http://www.garrettbdesigns.com/V2/index.html. It is still a work in progress and if I need to post code or anything please post a comment letting my know. I’m really trying to get this figured out since a previous post in regards to this on codingforums.com failed to get response.

[Paulie_D]

A reduced example in Codepen.io would be very helpful.

We really can’t wade through your entire site using Developer tools just to find one line of code that might be the problem.

That said, using position:absolute to position everything on your page (I’ll leave aside the issues with the actual HTML structure) is not a good idea and it’s quote likely the root of your problems.

Also, there is no footer in your code that I can see.

[kerninglife]

To be honest I have never used Codepen and also I don’t know how I would create a “reduced” example : /

Is there any other way to provide the code? Or could I just put my sites code into Codepen and post that?

Sorry for not knowing these things.

[Paulie_D]

Reduced just means, basically, put as much HTML/CSS into the relevant boxes in Codepen to reproduce the problem , don’t just check it all in.

We don’t need 30 images, just 5 or so will do (you can even use one dummy image..perhaps from lorempixel.com several times), we don’t need any special effects because this is a layout issue not an ‘effects’ problem.

[kerninglife]

Oh ok, that I can do. I’ll post that as soon as I can. Thanks Paulie_D!

[Paulie_D]

Here’s one I made earlier…with a sticky footer.

http://codepen.io/Paulie-D/pen/ozvGA

[kerninglife]

Alright this is what I have, let me know if I can provide or do anything else.

http://codepen.io/kerninglife/pen/zkFgj

[Paulie_D]

There is no footer in your example…did you look at the example I provided?

Could you not use what i gave you and just incorporate the bits of code you need?

Also…absolute positioning…ugh.

http://learnlayout.com/

[kerninglife]

The problem I am having is getting the footer to the bottom of the site. I applied your example to my code and am still having the same issue as before. I’ll play with it some more but can you suggest anything?

[Paulie_D]

Like I said, all the absolute positioning you are using is making it really hard to do what you are trying to.

It’s the last option you should use for layout except for specific situations.

[kerninglife]

I had a feeling that might be an issue but wasn’t sure. What is recommended in place of absolute? Also what are the specific situations where absolute should be used?

I’m mainly a graphic designer and my web skills are fairly dusty since I don’t use them very often.

[Paulie_D]

Try looking through the http://learnlayout.com/ site.

For the images, I would suggest wrapping each image in a div (not a <p>) and using display:inline-block.

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

[kerninglife]

Awesome! Just changing the position from absolute to relative made some positive changes so I’ll look at those resources you posted and see what I can do. Thanks so much Paulie_D!! I really appreciate the help!

I’ll repost with my progress as well.

[kerninglife]

I’ve been able to mess with my code, and have noticed that to get my images back to where I want them using relative positioning, I need to use negative numbers. I was told using negative numbers is “bad”, is this true?

http://codepen.io/kerninglife/pen/zkFgj/

[Paulie_D]

I was told using negative numbers is “bad”, is this true?

Not necessarily but unless you are doing it for specific effect then try and stay away from it….kind of like absolute positioning.

For your images you should be thinking either floats or inline block. Review the learn-layout link I gave…it gives some great easy to understand answers.

[Author]

Posts