You might think this is a table layout, but you would be wrong. This three column liquid layout was designed to emulate a table layout. It was also designed to as a challenge. The cetral iframe is nested in a fluid div, and will expand and contract according to browser width I added a beveled background just to make it more of a challenge. There are empty, sized divs flanking the iframe. The empty divs use the CSS background property to display the left and right segments of the bevel. There are also top and bottom segments with repeating background images to display the top and bottom bevel segments.
CSS Bytes will take you beyond simple css layouts and teach you advanced techniques. You will learn the relationships between elements and view demonstrations that will help it all make sense!
The templates and code can be used as is or modified to suit your needs. As you learn the css layout techniques, you will be able to modify any of the templates to create your own custom stylesheets.
This is a text box float styled div which can be used for announcements, as a callout box, or for other hightlighted material. This float box is also useful for bringing focus to important links.
Floating text boxes can also serve as versatile floating columns. The left and right columns of this layout are placed using position:absolute, and in this instance, each is assigned a fixed width. Each could have been styled as floats. Future updates will discuss the pros and cons of each method.
While CSS templates are useful as well as convenient, there is little to be learned by cut and paste style coding. CSS is not at all difficult to learn. It is frustrating at times, in almost every case of frustration, it is not CSS that is to blame, rather it is the webmaster working with a preconceived perception of "how css should behave" that is the problem. Put your table layout mentality aside and let CSS show you how it functions. It is far more versatile than you could ever imagine!
It is nice to see Webmasters using the W3.org CSS Validator http://jigsaw.w3.org/css-validator/ - it is an encouraging sign. There is one very common bit of confusion however. The CSS Validator is a bit "over cautious" and hands out WARNINGS in abundance, with little regard for the paranoid nature of the poor souls seeking validation!
The quote below is from another post and provides a good example:
The W3C CSS Validator gave me warnings about redefining my border attributes when using the shorthand version.
For the record: Warnings are not ERRORS!
Think of them as "kindly Old Mother Validator" asking you if you remembered to brush your teeth, wash behind your ears, and… as you head out the door, remembered to bring your rubbers. (What?—It looks like rain! Sheesh! What were YOU thinking?)
"Warnings" are just that… kindly, but at times stern sounding, even a bit annoying, reminders to be sure you know what you are doing, and why you are doing it. In everyday, practical terms, valdator warnings, even if a bit intimidating AND slightly annoying, are very useful. They are serve as "prompts" telling us to make certain we want "that colored backgound" matched with this "colored text."
On large sites with varying color schemes and global style sheets hurled about with abandon, WARNINGS need to be heeded very carefully. BUT!—if you know your site, and are certain of your CSS application, and KNOW that you will not have unfortunate color clashes or other such potential problems… take WARNINGS for what they really are… safety checks. Remember, a STOP SIGN is a warning too, but it does not mean you can't cross the intersection.
BIGBAER Urban Alternative - CSS Bytes ©2002 [CONTACT CSS Bytes] ::: [Site Map] ::: [ BIGBAER Urban Alternative Music Magazine]