Site Development
Downloads
Help!!
Home
The <div> BoxLesson 1: The <div> Box IdeaAn overview of how <div> box/<layer>s work and how to code them. Lesson 2: Borders How to put borders around your <div> box and how to style these borders. This is much more flexible than just coloring and sizing <table> borders. Lesson 3: Backgrounds & Dimensions How to size and color your <div> boxes. How to add an image background. CSS Box Review & Exam A quick review of the above lessons and a test to check your skills before moving on. CSS Positioning (CSS-P)Lesson 4: Positioning <div> Boxes With Pixels.Learn how to position your boxes with pixel precision or percentages. Lesson 5: Floating Your Boxes How to position your boxes by "floating" them. This works much like positioning images. Lesson 6: Using CLASS & ID Together How save yourself time and trouble by coding common box traits in a CSS CLASS. Lesson 7: Using Z-Index &: Visibility How to alter the "layering" of boxes that are positioned on top of one another. And, how to make your boxes invisible -- the first step in coding pop up menus. Lesson 8: Nesting <div> Boxes How to put and position <div> boxes inside other <div> boxes. Second Advanced CSS Review Review and test your skills before moving on to advanced layout techniques. CSS-P LayoutLesson 9: Making A Left ColumnHow to use CSS-P to make a left column. Short discussion on CSS-P vs tabular formatting. Lesson 10: Making A Relative CSS-P Layout How to use CSS-P to layout to layout a "relative" page that's looks proportionately the same at all resolutions. Like using a <table> with percentages, but with a lot of adantages. Lesson 11: Adjusting The Horizontal How to tweak a CSS-P relative layout. Lesson 12: Adding Content And Other Adjustments Adding content and padding to our layout boxes. How to adjust the boxes "height:" for even bottoms. Also, how to make a footer <div> to keep your boxes from resting right on the bottom of the page. Lesson 13: Floating Boxes - Making A Right Column Using CSS's "float:" property to make a right column on your pages. Lesson 14: Making Two Columns Using "float:" How to incorportate both of the columns above on one page. Lesson 15: Cross-Browser Issues Some quick work arounds for the differences in IE and Netscape renderings of CSS-P. Lesson 16: Using Layout <div>s How to nest boxes inside parent boxes that are used to position all of them at once. Lesson 17: Handling Excess Content With "Overflow:" Using the various values for the "overflow:" property to clip, scroll, or display any content that doesn't quite fit in the space you want it to. CSS-P Layout Exam Make the page linked above to test your skills at using pure CSS-P to layout a simple two column page with multiple <div> boxes. |
