Working With Footers
Tutorial hardness:
| Rate this tutorial: |
In this tutorial I will show you how to code and work with footers. It's footers that put an sweet end to your layout, they finish everything off cleanly and don't let the layout just wander down aimlessly to the bottom of the screen.
There are two main types of footer that you usually find:
1. The footer that is connected to your main container. |
2. The footer that runs accross the bottom of the page. |
3. And sometimes, you even get both of these combined.
First of all, you need the code for your footer:
#footer1 {
clear:both;
font-size : 11px;
font-family: 'Arial', Arial, Sans Serif;
background: transparent url(URL HERE) no-repeat;
height: ???px;
width: ???px;
padding: ?px;
}
- 'Footer1' is the name of the div; you could have call it anything, but calling it footer makes it easier to spot, and naming it (in this case with a number) can be useful if you plan on attempting both the short and long footer.
- The width is simply the width of your main container (if you're choosing to have both the footer and the container joined), if you want it to be even shorter than your container then that is also possible.
- The height is just any height you choose.
Now if you wish to make one like that shown in Example 2; there are only a few minor changes that need to be made to the CSS code shown above:
#footer2 {
clear:both;
font-size : 11px;
font-family: 'Arial', Arial, Sans Serif;
background: transparent url(URL HERE);
height: ???px;
padding: ?px;
}
- 'Footer2' is the name of the div; you could have call it anything, but calling it footer makes it easier to spot, and naming it (in this case with a number) can be useful if you plan on attempting both the long and short footer.
- The width is not included as the width will be automatically continuous and will run accross the page. If you're yet to notice, this div CSS code does not being with '
.divname', but instead '#divname, which I'm pretty sure makes this difference. - The height, again, is just any height you choose.
Everything else in the code is free to edit! This includes the font family, padding, font size and background URL.
How to work with the code
One important thing that has an effect of the footer is the code of your container, or just any divs used to contain your content. When coding in PHP/includes (which is what Wordpress themes are generally coded in), your footer page is not contained within the 'header.php' page and is instead it's own separate file (however, they do all in the end come together). As you work on your 'header.php' page and close all of those straying 'divs', your container 'div' (usually the first div), should be left open.
The container div being left open allows us to manipulate the footer in the '
footer.php' file. If you want your footer to be long and independent to the container, then the first thing that should appear on your 'footer.php' file is </div> - it is this div that closes up the container found in the 'header.php' file. If you want your footer to be joined to the container, then you should not close the container div until after you have closed the div of your footer.
If you want both the long and short footer, then you simply implement the code of your short div, close not only the short div but the container div and then implement the long div.
How to implement the code
<div id="footer?">
Information
</div>
Below is the basic code that would appear on my footer.php page if I decided to implement both the long and short footer:
<div id="footer1">
Information
</div> - This closes off the short footer. </div> - This closes up the container div.
<div id="footer2">
Information
</div> - This closes up the long footer.Good luck. ^_^
