Simple Life
Because sometimes you don't need a sidebar
Coding
PNG Opacity
One of IE's more annoying bugs is that it doesn't support PNG opacity unless you use a big chunk of ugly code. To create the dropshadow effect in IE, the following filter is applied in ie.css:
/* takes care of IE and its support for transparent .png */
#content {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/bg/content.png',sizingMethod='scale');
}
Since no other browers understand this, it's applied using a conditional comment. It's invalid CSS and if you don't want to use it, you'll just loose the content area dropshadow.
Column Widths
There are 6 different widths defined in the style sheet that allow you to customize how many columns the template has:
- width25 25 percent width
- width33 33 percent width
- width50 50 percent width
- width66 66 percent width
- width75 75 percent width
- width100 100 percent width
To use them, create a <div> tag and apply the class. To position the columns, use the floatLeft and floatRight classes. This is possible because you can stack CSS classes on an element. Follow this link to see examples.
If you want columns to be side by side, make sure the widths added up don't go over 100 percent. If they do, the rightmost column will be pushed down.
Below is an example of the skeleton code used to generate a 2 column layout:
<div class="width33 floatLeft">
Left Column content
</div>
<div class="width66 floatRight">
Right Column content
</div>
Images
Images are fully supported using the floatLeft and floatRight classes. Just apply one of them to the image you want to position. Images that have link tags around them will also have a nifty rollover effect, as long as you're using a standards complients browser.