Content Area
This is an example of a basic Left Sidebar layout using CSS

This page was created using common and simple techniques, it is not perfect but is intended to serve as an example of how a typical KompoZer user might use CSS to create this popular site layout,

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris ultricies, sapien nec suscipit lacinia, lorem lacus tempus velit, eget placerat enim orci ut lectus. Vestibulum mi. Integer at felis quis quam eleifend vulputate. Maecenas rutrum metus at orci malesuada hendrerit. Nullam turpis sapien, malesuada vitae, auctor id, hendrerit ut, risus. Donec mattis. Mauris euismod. Duis non tortor eget est euismod eleifend. Praesent in erat. In vitae tellus vitae risus sagittis adipiscing. Maecenas eget lectus sed nisi porttitor vestibulum. Suspendisse feugiat purus vel metus. Cras eu enim vitae tortor sodales gravida. Curabitur ac mi. Proin leo elit, imperdiet et, consectetuer vehicula, condimentum vitae, est. Cras orci quam, placerat tristique, ultricies ac, luctus at, est. Sed eget est. Nam vel risus eu diam mollis cursus.

If you are following along and creating this example you may want to enter only the content text above this sentence, in which case a navbar division height (step 22) of 350px should be sufficient.

Setting Up KompoZer

Before you begin you must set Kompozer up as follows:
  1. On the menu bar select View > Show/Hide:
    a. Check Format Toolbar 1
    b. Check Format Toolbar 2
  2. On the menu bar select Tools > Options > Settings > General:
    a. Check "Maintain     table Layout when inserting or deleting cells"
    b. Check "Use CSS styles instead of HTML elements and attributes

  3. On the menu bar select Tools > Options > Settings > Advanced:
    a. Check Markup > Language: HTML 4
     b. Check Markup > DTD: Transitional
    c. Check Behavior of Return Key > Return in a paragraph always creates a new paragraph

Creating the Page Step by Step:

Start with a new page and before going on click Save, give the page a title when it asks and save the file. If you want this to be your home page save the file as index.html, otherwise give the file a descriptive name when saving it. The instructions below are very descriptive and detailed, this is done to accommodate users of all levels but particularly new users who may want to follow along step by step on their own.

Note that I approach the layout of the page in a manner completely different than that of an author creating a table lay out. When using CSS I start by first creating the structure of the layout in CSS, this will make it easier to add content later.

Setting up the Layout Structure

  1. Click on CaScadeS

    Create the Wrapper Division
  2. Click on the painters palette to get the drop down menu.
  3. Click on > Style Rule
  4. Check "style applied to an element with specified ID attribute"
  5. Name the rule "#wrapper" in the box provided above the "Create Style rule" button.
  6. Click the "Create Style rule" button
  7. Click the > Box tab and set the following:
    width: 90%
    margin-right: auto
    margin-left: auto
  8. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create the Header Division
  9. Click on the painters palette to get the drop down menu.
  10. Click on > Style Rule
  11. Check "style applied to an element with specified ID attribute"
  12. Name the rule "#header" in the box provided above the "Create Style rule" button.
  13. Click the "Create Style rule" button
  14. Click the > Text tab and set the following:
    color: white
    text-align: center
  15. Click the > Background tab and set the following:
    color: #666666
  16. Click the > Box tab and set the following:
    height: 111px (to set the total height of the header area)
  17. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create the NavBar Division
  18. Click on the painters palette to get the drop down menu.
  19. Click on > Style Rule
  20. Check "style applied to an element with specified ID attribute"
  21. Name the rule "#navbar" in the box provided above the "Create Style rule" button.
  22. Click the "Create Style rule" button
  23. Click the > Background tab and set the following:
    color: #FFFF00
  24. Click the > Box tab and set the following:
    width: 150px
    height: 350px (or a height as needed, this page uses a height of 3600px)
    float: left
  25. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create the Content Division
  26. Click on the painters palette to get the drop down menu.
  27. Click on > Style Rule
  28. Check "style applied to an element with specified ID attribute"
  29. Name the rule "#content" in the box provided above the "Create Style rule" button.
  30. Click the "Create Style rule" button
  31. Click the > Background tab and set the following:
    color: #FFFFFF
  32. Click the > Box tab and set the following:
    padding-left: 155px;
  33. Click Ok to close CaScadeS
  34. Save your work

Adding and styling Header, Navigation and Content text

  1. Type in the text "Header" and hit enter
  2. Type in the text "Navigation Bar" and hit enter
  3. Type in the text "Content Area" and hit enter
  4. Save your work

Adding and styling Header text

  1. Highlight the text "Header"
  2. From Toolbar 1 format dropdown list select > Generic Container (div)
  3. At the bottom of the Kompozer Window right click on the <div> tag and select
    ID > header
  4. Click > End key and then click > Enter to add a new line
  5. Type in the text "Vanilla Site created with CSS" and highlight this text
  6. From Toolbar 1 format dropdown list select > Heading 1
    The header is now complete
  7. Save your work

Adding and styling Navigation Bar text and links

  1. Highlight the text "Navigation Bar"
  2. From Toolbar 1 format dropdown list select > Generic Container (div)
  3. At the bottom of the Kompozer Window right click on the <div> tag and select
    ID > navbar
  4. Click > End key and then click > Enter to add a new line
  5. Click Insert > Link
    a. Enter the Link text ("Link 1" can be used, in the example Gary777 included a link back to the home page for ease of use in this example)
    b. Enter a URL for the link in the link location section (# was used in the example to refer to the same page)
    c. Click > OK
  6. Repeat Steps 50 and 50a - 50c until you have links 1 - 3 inserted.
  7. Highlight the text "Navigation Bar"
  8. Click on the Center Icon on Toolbar 2 (this creates an inline style)
  9. Click on the Bold Icon on Toolbar 2 (this creates an inline style)

Adding and styling Content Area text

  1. Highlight the text "Content Area"
  2. From Toolbar 1 format dropdown list select > Generic Container (div)
  3. At the bottom of the Kompozer Window right click on the <div> tag and select
    ID > content
  4. Click > End key and then click > Enter to add a new line
    a. Enter one or more paragraphs of descriptive text
    b. Highlight the text breaking your selections into logical paragraphs by highlighting text and selecting Paragraph from the Format 1 toolbar (by default it says Body)
    c. Click Ok
  5. Repeat Steps 58 and 58a - 58c until you are done.
  6. Save your work
You should now have a page that looks exactly like this page (with the exception of any text you decided to add or leave out from the content area.)

Converting the internal style sheet to an external Style Sheet

  1. Click on CaScadeS
  2. Click "Export stylesheet and switch to exported version"
  3. Name you new css file and be sure to include the extension .css (the style sheet in this example is named gary777.css)
  4. Click Save
When uploading this file to your server you must remember to also upload the CSS file created in steps 61-64, otherwise your page will default to no styles at all.

Extending the example - Alternate Style Sheets

When you click on one of the Alternate Style Sheet links below a new hidden division will appear giving step by step instruction on how to extend the original design. You may have to allow your browser to run javascript on this page if you currently have it disabled. Try it out!

Alternate Style Sheet A - Change to Alternate Style Sheet A that extends the design via CSS.
Alternate Style Sheet B - Change to Alternate Style Sheet B that extends the design via CSS and changes the design to a fixed layout.
Default Style Sheet - Switch back to the default Style Sheet.

Alternate Style Sheet A - Fluid width layout
Note that this section of the page only shows up when using Alternate Style Sheet A! Also note that we will not be explaining how to create an alternate style sheet or how to create this hidden division in this tutorial, if you'd like to know how feel free to ask in the forum and we will post the solution.

When making these modifications be sure you start with the original default style sheet that has not been previously altered (I.E Alternate Style Sheet A  modifications.)

How to modify the example to use the changes found in Alternate Style Sheet A
  1. Click on CaScadeS

    Create a new style for the body
  2. Click on the painters palette to get the drop down menu.
  3. Click on > Style Rule
  4. Check "style applied to all elements of type"
  5. Name the rule "body" in the box provided above the "Create Style rule" button.
  6. Click the "Create Style rule" button
  7. Click the > Text tab and set the following:
    font-family: Verdana,Helvetica,sans-serif;
    font-size: .8em;
    line-height: 1.2em;
    width: 90%
  8. Click the > Background tab and set the following
    background-color: #346767;
  9. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create a new h1 style
  10. Click on the painters palette to get the drop down menu.
  11. Click on > Style Rule
  12. Check "style applied to all elements of type"
  13. Name the rule "h1" in the box provided above the "Create Style rule" button.
  14. Click the "Create Style rule" button
  15. Click the > Text tab and set the following:
      font-size: 2.2em;
      line-height: 2em;
  16. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Modify the wrapper element
  17. Click on the wrapper element.
  18. Click the > Box tab and set the following:
    min-width: 800px; (See Authors note 6 below for browser support issues)
  19. Click the > Background tab and set the following:
    background-color: #EEEEE0; (Uses the wrapper div to make the left side bar appear the same size as the content area)
  20. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Modify the header element
  21. Click on the header element.
  22. Click the > Text tab and set the following:
    color: #191970;
  23. Click the > Background tab and set the following:
    background-image: url(images/bg02097.gif); (image is available on the server)
  24. Click the > Border tab and set the following:
    border-bottom: 2px solid black;
  25. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Modify the navbar element
  26. Click on the navbar element.
  27. Click the > Background tab and set the following:
    background-color: #EEEEE0;
  28. Click the > Border tab and set the following:
    border-right: 1px solid black;
  29. Click the > Box tab and set the following:
    height: 4150px;
  30. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create the navbar a:hover style
  31. Click on the painters palette to get the drop down menu.
  32. Click on > Style Rule
  33. Check "Custom Style rule"
  34. Name the rule " #navbar a:hover" in the box provided above the "Create Style rule" button.
  35. Click the "Create Style rule" button
  36. Click the > Text tab and set the following:
    color: #FF0000;
  37. Click ok to close CaScadeS
  38. Save your work.
And there you have it, you have extended the original style to add; additional color to the design, change the text line spacing a tad, added borders, a hover style on navbar links and a background image.
Alternate Style Sheet B - Fixed width layout
Note that this section of the page only shows up when using Alternate Style Sheet B!

This design sets the background color of the wrapper division to the same color as the navbar to make things appear as if the navbar changes size as the content grows, in actuality the navbar doesn't grow but the wrapper division does! Also note that we delete the navbar height property as it's no longer necessary! Also note that we have set the width of the header and wrapper division to 900px to make the layout a fixed width design. You may change these widths to 800px for compatibility purposes (or any other width you choose!)

We will not be explaining how to create an alternate style sheet or how to create this hidden division in this tutorial, if you'd like to know how feel free to ask in the forum and we will post the solution.

When making these modifications be sure you start with the original default style sheet that has not been previously altered (I.E Alternate Style Sheet A  modifications.)

How to modify the example to use the changes found in Alternate Style Sheet B
  1. Click on CaScadeS

    Create a new style for the body
  2. Click on the painters palette to get the drop down menu.
  3. Click on > Style Rule
  4. Check "style applied to all elements of type"
  5. Name the rule "body" in the box provided above the "Create Style rule" button.
  6. Click the "Create Style rule" button
  7. Click the > Text tab and set the following:
    font-family: Verdana,Helvetica,sans-serif;
    font-size: .8em;
    line-height: 1.2em;
    width: 90%
  8. Click the > Background tab and set the following
    background-color: #346767;
  9. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create a new h1 style
  10. Click on the painters palette to get the drop down menu.
  11. Click on > Style Rule
  12. Check "style applied to all elements of type"
  13. Name the rule "h1" in the box provided above the "Create Style rule" button.
  14. Click the "Create Style rule" button
  15. Click the > Text tab and set the following:
      font-size: 2.2em;
      line-height: 2em;
  16. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Modify the wrapper element
  17. Click on the wrapper element.
  18. Click the > Box tab and set the following:
    width: 900px; ( We are now creating a fixed width layout that isn't subject to fluid division placement issues)
  19. Click the > Background tab and set the following:
    background-color: #EEEEE0; (Uses the wrapper div to make the left side bar appear the same size as the content area)
  20. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Modify the header element
  21. Click on the header element.
  22. Click the > Text tab and set the following:
    color: #191970;
  23. Click the > Background tab and set the following:
    background-image: url(images/bg02097.gif); (image is available on the server)
  24. Click the > Border tab and set the following:
    border-bottom: 2px solid black;
  25. Click the > Box tab and set the following:
    width: 900px; ( We are now creating a fixed width layout that isn't subject to fluid division placement issues)
  26. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Modify the navbar element
  27. Click on the navbar element.
  28. Click the > Background tab and set the following:
    background-color: #EEEEE0;
  29. Click the > Border tab and set the following:
    border-right: 1px solid black;
  30. Click the > Box tab and set the following:
    Delete the height: property! (the height property is no longer needed!)
    margin-left: 2px;
  31. Do NOT hit ok... (If you do CaScadeS will close and you will have to reopen it!)

    Create the navbar a:hover style
  32. Click on the painters palette to get the drop down menu.
  33. Click on > Style Rule
  34. Check "Custom Style rule"
  35. Name the rule " #navbar a:hover" in the box provided above the "Create Style rule" button.
  36. Click the "Create Style rule" button
  37. Click the > Text tab and set the following:
    color: #FF0000;

    Modify the Content element
  38. Click on the content element.
  39. Click the > Border tab and set the following:
    border-left: 2px solid black;
  40. Click the > Box tab and set the following:
    width: 740px;
    margin-left: 2px;
    padding-right: 2px;
    float: left;
  41. Click ok to close CaScadeS
  42. Save your work.
And there you have it, you have changed the layout from a fluid layout to a fixed layout and have extended the original style to add; additional color to the design, change the text line spacing a tad, borders, a hover style on navbar links and a background image in the header.
- - - - - - - - - - - - - - Example file ends above this line - - - - - - - - - - - - - -
Author: Gary777
KompoZer Version used: 0.7.10 (20070831)
OS: WinXP Pro SP2
Markup: HTML4
DTD: Transitional
Validation: This page passes W3C; CSS and HTML4 Transitional validation
CSS File: gary777.css
Alternate CSS File: gary777-alt.css and gary777-altb.css

Browser Usage and Compatibility Notes:
1) This design passed testing on browsershots.org for the following browsers (all browsers available at time of testing)
Browser Windows Linux Mac OS
Firefox 1.5, 2.0 1.5 2.0
Opera 7.54, 9.23 9.23  
Safari 3.0   2.0
MSIE 5.0, 5.5, 6.0, 7.0    
Konqueror   3.5  
SeaMonkey 1.1.4    

View the CSS File
View the Default CSS File - Notice how sparse this css file is, you can do a lot with just a little bit of css!
View Alternate CSS File A - Still quite sparse isn't it?
View Alternate CSS File B - Just a few tweaks and she's nearly bullet proof!

Authors Notes:
1. The default CSS layout and the Alternate Style Sheet A layout requires that you set the height of the navbar division so that the left sidebar (navigation bar) height is equal to or greater than the height of the content area. There are various ways to make the height equal to the content area but it is the opinion of this author that there are no completely satisfactory methods currently available that do not require special support, work arounds or hacks to support all of the popular common browsers.

2. Please note that in step 32 I added padding-left: of 155px, this was done to correct an issue when using lists in floated divisions (there are also other methods available.) If you do not set this padding (try deleting this property in your own example) the numerical numbers in the list text will float outside of the content area into the left Navigation Bar area. This is not at all what we want. I could have set "list-style-position: inside" for the <ol> element in CaScadeS however Kompozer doesn't handle nested (indented) sublists very well and aligning these is more trouble than it is worth.  (This note does not apply to the Alternate Style Sheet B layout)

3. Please note that my use of <ol start="xx"> is the only thing keeping this page from validating for HTML4 Strict, I used the start property to align section heading titles of the tutorial for readability. This will only be an issue when a user wishes to use lists and does not affect the original design intent as the list items were used for tutorial purposes only and not to replicate the base content.

4. Please note that if you chose to enter only the Latin content text or if you add your own text you will have to adjust the height of the navbar division as explained in step 24. I suggest you experiment with this property by viewing your page in different browsers to see the difference in rendering, sometimes the differences can be dramatic! (This note does not apply to the Alternate Style Sheet B layout)

5. Note that setting a height for the content division will override the padding set in step 32 while using IE7 (and possibly others but not FF2) and the content area will shift 155px right of the navbar division and will also flow into the text below the content division (very messy!) The solution if you choose to use this method is to make sure that the navigation bar division is equal to or taller than the content area in all browsers. (Trial and error is the only reasonable method to use.) I am confidant that other contributors will suggest alternate work arounds to this issue.(This note does not apply to the Alternate Style Sheet B layout)

6. While I was creating this layout I personally felt hampered by the fact that the layout is fluid or liquid (I.E. the width and height of the Header and Content areas will vary based on user screen resolution and the width of a users browser window.) Personally I dislike this method as it takes control of the layout away from me as the author, the user will most likely not see the page as I intended them to see it. Some people have the exact opposite opinion and believe that the user should have control of the width and height of a page and that the author should perform additional work during the design phase to ensure the site will look good in almost any width or height.

As a side note, this issue would be much less problematic if IE, Opera and others supported the min-width, max-width properties, however this is not the case. Most current versions (October 2007) of IE and Opera lack support completely while Konqueror and Safari provide only partial support for this property and these can be buggy at times.

The fixed width example layout in Alternate Style Sheet B is much more to my personal liking, I restructured the underlying divisions (via CSS) and took advantage of the wrapper div to make it appear as if the navbar grows as the content area grows. The only thing to watch out for with this design is that now the content area has to be taller than the navbar area or you will now see an opposite effect from that of the default style sheet or Alternate Style Sheet A. If the content area is not as tall as the navbar there will now be a gray space (the color of the wrapper div background) beneath the content area to make up the difference in division heights. Check out Alternate Style Sheet B to see this layout in action.

7. Heading tags were utilized in a different manner than in the original examples, I understand that some users may disagree with my method of repeating the use of certain heading tags, however I choose this method because I feel that many of the tags hold equal weight in the relevance of the content within the document for SEO purposes.

8. In the Alternate style sheets I set the background color of the wrapper division to match that of the navbar division, so long as the content area remains taller than the navbar division the design holds up. Note that if you do not set the height of the navbar division equal to or taller than the content division as stated in note 1 above the content area will flow into the navbar area below the navbar region (only where it isn't tall enough.) (This note does not apply to Alternate Style Sheet B layout)

9. Discerning users will note that I included a blank space inside of empty browser support table cells, this was done because IE will not render a frame around an empty table cell, the result is a sloppy and unattractive table border. This note is provided for informational purposes only and can be ignored by all but the most critical and particular users among us.

Editors Notes:
The above example was made using simple methods and techniques intentionally, the author (who is also the editor of this example) is an experienced Kompozer user with moderate to advanced knowledge of CSS. In the example above the author is trying to duplicate the table design shown in the table example of the main page using CSS.

Design Notes:
Since the author is the initial editor of this design please refer to the authors comments for design notes, if other editors have comments on this design they will be posted here in the future.

Note to Users: Feel free to use this example as a template for your own site.

Modifications to the "step by step" text of this page and the Editors Notes section provided by Gary777

Back to KompoZer by Example