The new forums will be named Coin Return (based on the most recent vote)! You can check on the status and timeline of the transition to the new forums here.
The Guiding Principles and New Rules document is now in effect.
Wordpress Theme & CSS help
Kato
Registered User regular
Registered User regular
Ok...mods, feel free to do as you please with this thread, but I am past the whole homework part of this and it is now personal.
Yes...this project was done for school. Yes, the assignment was due earlier today and it was presented in class. I have already submitted the assignment and the files and the codes, so any future changes made are personal and have nothing to do with school. I am actually planning on continuing to use this blog and keep playing around with it. With that being said....
I am struggling with one section of code on my wordpress theme. I followed a tutorial and built the theme from the ground up. No copy paste or anything, but followed the tutorial and got it all working. I am working with the CSS and I can't figure out for the life of me how to get the sidebar to actually scroll down the page to the footer alongside the content. I imagine this is nothing new, but I simply can't find the fix for it with my google-fu.
Here is the link to the blog: http://blog.techfitz.com
As you can see, the sidebar does not cover the entire page. I am not posting the codes up here unless requested as I generally use Firebug or Chrome's built in developer to look at the code and make changes before I take the code to the live site. I have gone in to the sidebar class and tried to add in a few things like:
height: 100%
height: auto
I have also noticed that the wrapper class has no height, so I can't just code the wrapper class to have the same background color so it "appears" that the sidebar is scrolling down. So I don't think I can do much with the wrapper class and the more I work with this, I am not exactly why the tutorial set up the wrapper class in the first place other than to offer a constraint.
In short...how do I make my sidebar fill the rest of the page vertically to the footer?
On a side note, I am very open to critique and suggestions on how the code is done or just general appearance. This is my first attempt at my own theme...so lay it on me. I know this is nothing too special at all right now.
Yes...this project was done for school. Yes, the assignment was due earlier today and it was presented in class. I have already submitted the assignment and the files and the codes, so any future changes made are personal and have nothing to do with school. I am actually planning on continuing to use this blog and keep playing around with it. With that being said....
I am struggling with one section of code on my wordpress theme. I followed a tutorial and built the theme from the ground up. No copy paste or anything, but followed the tutorial and got it all working. I am working with the CSS and I can't figure out for the life of me how to get the sidebar to actually scroll down the page to the footer alongside the content. I imagine this is nothing new, but I simply can't find the fix for it with my google-fu.
Here is the link to the blog: http://blog.techfitz.com
As you can see, the sidebar does not cover the entire page. I am not posting the codes up here unless requested as I generally use Firebug or Chrome's built in developer to look at the code and make changes before I take the code to the live site. I have gone in to the sidebar class and tried to add in a few things like:
height: 100%
height: auto
I have also noticed that the wrapper class has no height, so I can't just code the wrapper class to have the same background color so it "appears" that the sidebar is scrolling down. So I don't think I can do much with the wrapper class and the more I work with this, I am not exactly why the tutorial set up the wrapper class in the first place other than to offer a constraint.
In short...how do I make my sidebar fill the rest of the page vertically to the footer?
On a side note, I am very open to critique and suggestions on how the code is done or just general appearance. This is my first attempt at my own theme...so lay it on me. I know this is nothing too special at all right now.
Signature??
Kato on
0
Posts
It's kind of a weird thing that lots people never really hear about, but nowadays with layouts being made solely with floated divs all the time, it's kinda important to know. The wrapper is there for a "faux column" effect, which is a good term google around for if you're still not sure what's going on with it.
Your border between the sidebar and content might be an issue if sometimes one has a height greater than the other and other times it doesn't. If one or the other is always going to have a greater height, you should set the one with the greater height to have the border so the border also follows all the way down to the bottom of the page.
I'd suggest adding the following rule to your theme's css.
.clearfix:after {
content: " ";
clear: both;
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
Now you only need to add the clearfix class to elements with floats in them.
If you need IE7 compatibility then you can also add the following:
*:first-child+html .clearfix {
zoom: 1;
}