WordPress.org

1. chrismayres
   Member
   Posted 9 months ago #

   Every time I convert my template to a WordPress theme and then add in content for a page, my footer moves down and to the left. I can go back into the CSS and hard code it to be center with the content, but then it doesn't scale down as the content increases.

   See the issue at chrisayreswebdev.com/goblin so you can see what I mean. The footer sits in the middle, despite the content going below it. It worked fine before I set it up as a wordpress theme!

   I'm sure it's just my poor CSS habits and I just don't know what to do to fix it.

2. chrismayres
   Member
   Posted 9 months ago #

   I'm suspecting that it might have something to do with the page.php or loop-page.php. Because it worked before I added those to the directory. I'm just at a loss here. Thanks!

3. irfan_np
   Member
   Posted 9 months ago #

   Try not specify fixed height for your #container

   Irfan

4. chrismayres
   Member
   Posted 9 months ago #

   *facepalm*

   Thanks irfan! I can't believe I did that.

   I also had the min-height set too long, so if the page had little content, the footer hung off the bottom. I started to ask about that on here but I was able to figure that one out. Thanks again!

5. chrisayres
   Member
   Posted 9 months ago #

   Alright, I had to change some layout issues and it broke my footer again. I've spent several hours now trying to fix it when I realized that there was some duplicate code coming in from the page.php file. Anyway, I cleaned that up and I still have this issue. I know my code isn't the best, but I usually can figure this crap out.

   http://www.thegoblinmarketrestaurant.com - Is it my bad code or am I doing something wrong with the theme setup?

6. diogorighi
   Member
   Posted 9 months ago #

   Yeah, it's a little messy, but try this:

   Put the footer INSIDE the div CONTENT. At the end.

   Then, on your #footer css, put this:

   #footer {
   position: absolute;
   bottom: 0;
   left: 0;
   }

   and

   #footer .fnavbar {
   position: relative;
   bottom: 0px;
   left: -15px;
   background-image: url(images/bot_nav.png);
   background-repeat: no-repeat;
   width: 829px;
   height: 54px;
   z-index: 20;
   }

   That should work.

7. chrisayres
   Member
   Posted 9 months ago #

   diogorighi - thanks for the idea but that just moved it further left.

   OK, after looking into it more, when you view source, it's closing off my 'content' and 'container' div before the footer. It has to have something to do with the way the page is being looped in. In the view source you can see it's pulling a lot of extra code for the stuff that's usually in the side bar, like the meta stuff. Somewhere in there it's closing out my 2 divs which is putting the footer outside of the container.

8. diogorighi
   Member
   Posted 9 months ago #

   The problem is that you are using absolute positioning in almost everything! You don't need to do that.

   If you want to center something, just give it a width and use margin:0 auto; if you want to put something OUTSITE the box, then you use the absolute position.

   The absolute position os the element is relative to the first parent with position:relative.

   The footer it's not on the bottom because the content is position:absolute; and his height do not interfere with the page. You can see that if you take out the min-height.

   You will have better results if you remake your code.

9. chrisayres
   Member
   Posted 9 months ago #

   Right, like I said, I'm not that great with the CSS. Just never wrapped my brain around the positioning stuff. Oh well, life goes on.

   Anyway, I found the problem that I was having. I had a rogue </div> tag in the loop-page.php code. That was closing out my container div and the footer was out on it's own in the cold. I have that fixed now, so it's just time to get the footer to go where I tell it.

   Once I get it all figured out and it's working, I'll learn more about positioning and try to rebuild it more efficiently :)

   Thanks!

Reply

You must log in to post.