To continue with the final CSS touches which include our main body, footer, and basic fades. At this time you will notice we do not have any alignments for our left and right classes also which some alignments are off.
/* Main Body and Holders */
.mBody { background: url(../images/body/Main-Body.png) right top repeat-y #FFFFFF; padding: 10px 0px 0px 0px; }
.sider { width: 238px; margin: 0px 14px 10px 0px; }
.sider .mb { margin: 0px 0px 10px 0px; }
.main { width: 603px; margin: 0px 0px 10px 10px; }
.main .mb { margin: 0px 0px 8px 0px; border-bottom: 1px solid #D2D2D2; padding: 0px 0px 3px 0px; }
.mBody img { border: 3px solid #D2D2D2; margin: 3px 3px 3px 3px; }
.mBody img:hover { border: 3px solid #878787; }
With the code pasted we setup our sections under both our sider and main classes. You will also notice we setup a background on our main body holder class this is then repeated on the y-axis. Next up in the list we setup properties for images on the body in which has a hover so it looks like you are clicking a button even if there is not link on the image.
/* Footer Area */
.footer { }
.footer .navigation { margin: 10px 0px 0px 0px; font-size: 12px; }
.footer .copy { color:#FFFFFF; font-size: 11px; font-weight: bold; text-align: right; margin: 8px 0px 0px 0px; }
If you haven’t noticed we didn’t setup the ul or li tags for the navigation in the code above. Well this is because used the same setup that we used in our banner allowing us to not have to duplicate our code. The only thing we needed to change on our navigation is the margin and font-size to position the information better. But from the code above we have also setup our copy class to since this wasn’t already made.
/* Text Tags */
.header { font-size: 13px; font-weight: bold; color: #09F; margin: 0px 0px 3px 5px; }
/* Fades */
.f10 { background: url(../images/Fades/Fade-10.png) left top repeat; }
.f20 { background: url(../images/Fades/Fade-20.png) left top repeat; }
/* Float and Cache Tags */
.left { float:left; }
.right { float:right; }
.clear { clear:both; }
Well this kind of looks like a lot but is a lot simpler than everything else in which is the reason I grouped it all as one. So we setup our header for our body sections because I did not use standard headers in the design. Next we have the fades in which we have setup for the slideshow. In this case I have two so if needed you can make the fade darker around the slideshow by changed the class of f10 to f20 or vise versa. Next we have all our left, right, clear classes this is my positioning information for alignment on left and right. If you noticed they have one property in each this is because instead of setting float left, right, or clear both in each class that needed I can simplify my code to have it stated once in CSS and be easily delivered to all the tags needed. Also this brings in the use of using it later and not having to setup another class to have a float in it.