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 - An Alternate Style Sheet

When you click on the Alternate Style Sheet link below a new hidden division will appear explaining step by step 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 - Change to an Alternate Style sheet that extends the design via CSS.
Default Style Sheet - Switch back to the default Style Sheet.

Note that this section of the page only shows up when using the Alternate Style Sheet! 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 and we will post the solution.)

How to modify the example to use the changes found in the Alternate Style Sheet
  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: #FFFFFF;
  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: 4000px;
  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.

- - - - - - - - - - - - - - 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

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 the Alternate CSS File - Still quite sparse isn't it?

Authors Notes:
1. This 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.

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!

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.

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.

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. 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