Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Adding Content and
Finishing the Style Sheet

Now that the page structure is defined and coded, it's time to add some content to the sidebar and the main content cells.

Adding Content to the Sidebar

We're going to build the sidebar content by using a heading (h2) followed by a series of paragraphs. Our links will start out as paragraphs but will be converted to unordered (bullet) lists.

-Place your cursor in the sidebar cell and type the word: Sidebar.

-Use the Properties inspector to make it a Heading 2 <h2>

-Press Enter after the heading and type a paragraph of descriptive text

Adding Content

-Press Enter after the paragraph and type a label for your first set of links. For example:

Main Links Here:

-Make "Main Links Here:" strong (bold) by selecting it and clicking the B button on your Properties inspector

Adding More Content

-Enter three sample links

-Make a secondary label after your first set of links, then make three more sample links below it

-Make a new paragraph below the second set of sample links and type in some placeholder text

Content Complete

-Select the first three sample links and click the unordered list button on your Properties inspector to make it an unordered (bullet) list

-Select the second set of sample links and make it an unordered list, too

Your sidebar cell should look something like this:

Sidebar content

Adding Content to the Main Cell

-Type the heading: Main Content then set it to a Heading 1 on your Properties inspector

-Press enter and add several paragraphs of placeholder text

Your table should now look like this:

Main Content Filled in

Notice that the sidebar content is not flush to the top of the cell. To correct this, we can use CSS.

Editing the #sidebar rule

-Open project.css and scroll down to the #sidebar rule

-Make a new line just after the font-size property

Edit the Sidebar Rule

-On the new line, enter: vertical-align: top;

-Save project.css but leave it open

The sidebar content will now be flush top:

Sidebar Aligned to Vertical Top

Activating the Sidebar Links

Set null links on each of the six sample links in the sidebar.

-Select a link

-Type a # (hash mark) in the Properties inspector link box

Note: As you add pages you would, of course, replace the hash marks with actual links.

-Repeat to make all six links active

Activating Sample Links

Adding Header and Footer Content

At this point you can add a logo to your header and some footer content. If you don't want to do that, simply type placeholder text for now. In the header, type: [ Logo ] and in the footer, type: [ Footer ]... just like we've done in our example page.

Add the Remaining CSS Rules

Let's enter the remaining CSS rules manually and discuss them as we go.

-Open project.css

-Create a new line below the #footer selector and enter the following rules:

td, p, ul {
 	font-family: Georgia, "Times New Roman", Times, serif;
 }

What it does: Because Netscape 4 does not understand Font-Family on the body selector, we need to assign our font to more specific selectors. As your page evolves you can add more tags as necessary. To add a new tag, add a comma after the last one, then add the new tag: td, p, ul, ol {

 h1:first-child {margin-top: 0;}/*starts first h1 in TD flush top*/
 h2:first-child {margin-top: 0;}/*starts first h2 in TD flush top*/

What it does: Modern browsers render a default top margin for heading (and paragraph) elements. We want the first instance of the h1 and the h2 element in a given table cell to be flush with the top of the cell. The first-child selector does just what we want. In our main cell, for example, h1:first-child affects only the first h1 element inside the <td> tag.

 h1 { font-size: 160%; }
 h2 { font-size: 140%; }

What it does: Remember that our base font-size (on the body element) is 14px. The font-size for our main content cell is 100%, so it too is 14px. The percentage sizes assigned to the h1 and h2 elements within the main cell are, therefore, based upon a percentage of 14px. That is, the h1 element is 14px times 160% = 22.4px. An h2 element in the sidebar is calculated a bit differently because the #sidebar element has a font-size of 85% of 14 px... or 11.9 pixels. An h2 element in the sidebar cell, therefore, would be 11.9px times 140% = 16.66 pixels. Alternatively, an h2 element in the main cell would be 14px times 140% = 19.6 pixels.

Note: Browsers will round fractional pixel sizes.

#sidebar a {
 	/*/*/padding: 3px;
 	display: block;
 	border: 2px dotted #CCC;
 	text-decoration: none;
 	line-height: 1em;
 	width: 160px; /* */
 }

What it does: This rule defines the <a> tag inside the sidebar. The properties in this rule are what make each link look and act like a button. Padding provides a bit of space around the link inside the 2px dotted border we are defining. Display: block makes the entire width (in this case 160px) clickable. We turn underlining off (text-decoration: none), and we set line-height to 1em (to turn off the 1.5em line-height assigned to the parent #mainTable element). The entire rule is wrapped inside nested comment tags to hide everything from Netscape 4, because any one of the properties defined would cause a problem in that browser.

#sidebar a:link, #sidebar a:visited {
 	color: #666;
 }

What it does: This multiple selector rule defines the same color (#666 or medium gray) to both unvisited and visted links inside the #sidebar element.

#sidebar a:hover, #sidebar a:active {
 	color: #FFFFFF;
 	background-color: #CC0000;
 	border: 2px solid #000;
 }

What it does: This rule sets the hover (mouse over) and active (mouse being clicked) styles for #sidebar links. We are changing the color from medium gray to white (#FFFFFF) and we are also assigning a background-color #CC0000 (deep red). We are also changing the border from dotted gray to solid black for emphasis. Note that when a border is used on the hover or active states, a border of the same width should be used on all other link states to prevent the screen and your layout from "jumping". Netscape 4 completely ignores hover and active states so we do not have to hide them.

#sidebar ul {
 	/*/*/padding-left: 1em;
 	margin-left: 1em;
 	list-style-type: none; /* */
 }

What it does: This rule sets the left offset of a bulleted list to 1em (the width of the letter "m"), which seems to us to be a lot nicer than the default left offset. Because some browsers calculate ul offsets based on padding, while others use margin, we declare both padding and margin. We also turn off rendering of the bullet character by setting list-style-type to "none". This rule is completely hidden from Netscape 4 because it would cause problems otherwise.

#sidebar li {
 	/*/*/margin: 0px 0px 6px 0px; /* */
 }

What it does: This rule sets the bottom margin of the l<li> element to 6 pixels for all lists inside the #sidebar element. This means that since each link is a list item, each link will have 6 pixels of space from its bottom to the top of the next link (Netscape 4 will pose problems if it tries to interpret this rule, so we hide it from that browser).

-Close and Save project.css

Preview Your Work

Preview your page to see how it works. It should behave just like our example page.