This is a sample page for creating valid, two-column web pages. The left column is designated a menu column and the right is the main text. The left column had a colored background color created by a .gif file, while the right will be the background color of the entire document.
See how all this is done by visiting the How It Works. You can view the CSS to see the CSS and right-click and select View the Source on any page to see the html. With these two items you can hijack this entire site and recreate it for any page you care to use. Nothing on this site is copyrighted, but if you are going to use the site without modification, please put a link back to my pages -- and it would be nice if you'd use pictures of your own family.
The Demo of Tricks page has some more exotic demonstration items so you can see some of the possibilities for creating more exciting and interesting web pages. It will also tell you how to change the CSS to change some of the effects.
If you are a CIPCUG member, please feel free to call me with any problems you might be having. I will probably have to schedule a time to work on things with you (my work schedule is so hectic that I'm probably not going to be able to help immediately). If you stumbled on this page from the Internet-at-large, please feel free to swipe anything you can use, but please don't ask for help.
There are two concepts that need to be understood before you can use this site effectively: (1) how div's work and (2) the difference between block elements and inline elements. A complete explanation is far beyond the scope of this demo, but the following should get you going:
Div's (displayed by <div id="something"> followed by some text and ending with </div> create a separate division of the document that can have it's own formatting and characteristics. So, for example, you can have text in the main document black and the background white, while in a div you could have a red background with white text. Div's can have either an id attribute (as shown above) or a class attribute (class="something"). The difference is that there can only be one instance of an id on a page, while you can have an unlimited number of the class div's. The id's are used to mark off the major sections of a document that you don't want to have duplicated -- like menus, page headers, main text area, etc. Classes are used to contain images, change the color of the background or text, or otherwise modify the default settings on the page.
Block elements are items that have both horizontal and vertical definitions, while inline elements have only horizontal definitions. As an example, headlines can be either inline or block. If you define headlines as inline and put the headline text followed by several lines of regular text, one line of regular text will follow the headline, with the rest of the text below. If you create the headline as a block element, for example by floating it to the left, several lines of text will be adjacent to the headline. Here's the CSS for the following examples, followed by examples with the style information included in the headlines:
<style type="text/css">Here the text displays to the right of the headline, but with each line of text the height of regular text. Several lines of text can float to the right of the headline until the text begins flowing below the headline. The choice of whether you want to display items as inline or block depends on how you want to display elements. However, confusion as to the distinction between inline and block is one of the major stumbling blocks to getting things to display the way you intended. Once you know the difference, you will be able to fix problems far more easily.
On the demo page you'll see some more examples that use both inline and block elements.