NHS Designs
Web Design Tutorials

Layout with Layers and CSS

Today we're going to make a Web site layout very much like the one used for nhsdesigns.com.

 

Preparatory Step

  1. View the page source for this page to see the HTML code (right-click in the page and select View Page Source.)
  2. Take a look at the source. Does this page use any tables? If not, how did it manage to have all these separate sections?
  3. Create a folder called firstnamelastinitial_csslayers.
  4. Create an assets folder inside of this folder.
  5. Open Dreamweaver.

 

Step One: Create the Body

First, we'll set up a gray background behind it all, and set the font style.

  1. Create a new, blank HTML document in Dreamweaver.
  2. Save the file as index.html inside your CSS Layers folder.
  3. In the Document tool bar, change the Title to CSS Layers.
  4. Show the CSS Styles panel (located in the Design panel) and click on the New CSS Rule icon. Use these settings and click OK:
    1. Tag: body
    2. Selector Type: Tag
    3. Define in: (New Style Sheet File)
  5. Save the style sheet file as main.css in your CSS Layers folder.
  6. In the CSS Rule definition for body box, use these settings and click OK:

Category

Setting

Value

Type

Font

Verdana, Arial, Helvetica, sans serif

Size

10 pixels

Color

#000000

Background

Background color:

#cccccc

  1. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step one

 

Step Two: Create the Outer Container

Next, we'll create the large white rectangle that contains everything else. Using this layer outside of the layer in step three will create a nice, 15-pixel white border.

  1. Click inside the page.
  2. In the CSS Styles panel, click on the New CSS Style icon.
  3. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #container
    2. Selector Type: Advanced
    3. Define in: main.css
  4. In the CSS Rule definition for #container box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Background

 

Background color:

#ffffff

Box

Width

720 pixels

 

Padding (UNCHECK same for all)

Top

0

Margin (UNCHECK same for all)

Top

0

Right

Auto

Bottom

0

Left

Auto

Border (same for all)

Style

solid

Width

15 pixels

Color

#ffffff

  1. Choose the following menu command: Insert > Layout Objects > Div Tag.
  2. In the dialog box, select ID: container.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step two

 

Step Three: Create the Header

Here we'll create a header area in which a banner image could go later. It will have a baby blue background and have a 1-pixel white bottom border.

  1. Click inside the #container layer. Delete the text that automatically filled the layer but leave your cursor inside the layer.
  2. In the CSS Styles panel, click on the New CSS Style icon.
  3. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #header
    2. Selector Type: Advanced
    3. Define in: main.css
  4. In the CSS Rule definition for #header box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Background

 

Background color:

#22b5ff

Box

 

Width

720 pixels

Height

220 pixels

Border (UNCHECK same for all in all 3 columns)

Bottom

Style

solid

Width

1 pixel

Color

#ffffff

  1. Let's use a shortcut to insert the Div tag:
    1. In the Insert Bar, change the dropdown to Layout.
    2. Click on the Insert Div Tag icon (the second one.)
  2. In the dialog box, select ID: header.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step three

 

Step Four: Create the Navigation Area

We need a rectangle below the banner for links. It will have a dark blue background and white text. It will also have a 1-pixel white bottom border, and 10 pixels of padding around its text. First, we need to tell Dreamweaver precisely where to put it by viewing the code.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just before it:
    </div>
    </body>
    </html>
  3. Click on the Design button on the Document tool bar.
  4. In the CSS Styles panel, click on the New CSS Style icon.
  5. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #navigation
    2. Selector Type: Advanced
    3. Define in: main.css
  6. In the CSS Rule definition for #navigation box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Type

Color

#ffffff

Background

 

Background color:

#005ac9

Box

 

Width

700 pixels

Height

20 pixels

Border (UNCHECK same for all in all 3 columns)

Bottom

Style

solid

Width

1 pixel

Color

#ffffff

  1. In the Insert Bar, click on the Insert Div Tag icon.
  2. In the dialog box, select ID: navigation.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step four

 

Step Five: Create the Lower Container

Now we'll create the main content rectangle. It won't be visible by itself, but it is necessary as a frame for the multi-colored columns.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just before it:
    </div>
    </body>
    </html>
  3. Click on the Design button on the Document tool bar.
  4. In the CSS Styles panel, click on the New CSS Style icon.
  5. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #local-container
    2. Selector Type: Advanced
    3. Define in: main.css
  6. In the CSS Rule definition for #local-container box, use these settings and click OK twice:

Category

Setting

Value

Type

Color

#000000

Box

Width

720 pixels

Positioning

Type

relative

  1. In the Insert Bar, click on the Insert Div Tag icon.
  2. In the dialog box, select ID: local-container.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step five

 

Step Six: Create the Left-Hand Column

We'll create three columns for the content. The first column will be for sidebar information. It has a grass green background, 10 pixels of padding around its text, and a 1-pixel white border on its right side. We need to tell it to float left because we will be putting layers side-by-side here rather than one atop the other.

  1. Click inside the local-container layer and delete the text there. Leave your cursor inside the layer.
  2. In the CSS Styles panel, click on the New CSS Style icon.
  3. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #left
    2. Selector Type: Advanced
    3. Define in: main.css
  4. In the CSS Rule definition for #left box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Background

Background color

#9cff00

Box

Width

150 pixels

Float

Left

 

Padding (Same for all)

Top

10

Border (UNCHECK same for all for all 3 columns)

Right

Style

solid

Width

1 pixel

Color

#ffffff

  1. In the Insert Bar, click on the Insert Div Tag icon.
  2. In the dialog box, select ID: left.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step six

 

Step Seven: Create the Center Column

This column will contain the main content. It has a white background, 10 pixels of text padding, and 1-pixel white borders on the top and bottom. It also needs to float left.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just after it:
    <div id="left">Content for id "left" Goes Here</div>
  3. Click on the Design button on the Document tool bar.
  4. In the CSS Styles panel, click on the New CSS Style icon.
  5. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #center
    2. Selector Type: Advanced
    3. Define in: main.css
  6. In the CSS Rule definition for #center box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Background

 

Background color:

#ffffff

Box

 

Width

358 pixels

Float

Left

 

Padding (same for all)

Top

10

Border (UNCHECK same for all in all 3 columns)

 

Top

Style

solid

Width

1 pixel

Color

#ffffff

Bottom

Style

solid

Width

1 pixel

Color

#ffffff

  1. In the Insert Bar, click on the Insert Div Tag icon.
  2. In the dialog box, select ID: center.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step seven

 

Step Eight: Create the Right Column

This last column will be for secondary navigation.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just after it:
    <div id="center">Content for id "center" Goes Here</div>
  3. Click on the Design button on the Document tool bar.
  4. In the CSS Styles panel, click on the New CSS Style icon.
  5. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #right
    2. Selector Type: Advanced
    3. Define in: main.css
  6. In the CSS Rule definition for #right box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Background

Background color

#22ffd8

Box

Width

150 pixels

Float

Left

 

Padding (Same for all)

Top

10

Border (UNCHECK same for all for all 3 columns)

Left

Style

solid

Width

1 pixel

Color

#ffffff

  1. In the Insert Bar, click on the Insert Div Tag icon.
  2. In the dialog box, select ID: right .
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this.

step eight

 

Step Nine: Create the Footer

Finally, we'll put a nice bottom rectangle to allow for copyright information and other small notations and links. It has the same white text and dark blue background as the navigation bar, 10 pixels of text padding, and 1-pixel white borders on the top and bottom.

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just before it:
    </div>
    </body>
    </html>
  3. Click on the Design button on the Document tool bar.
  4. In the CSS Styles panel, click on the New CSS Style icon.
  5. In the New CSS Rule box, use these setting and click OK:
    1. Tag: #footer
    2. Selector Type: Advanced
    3. Define in: main.css
  6. In the CSS Rule definition for #footer box, use these settings and click OK twice:

Category

Subcat.

Setting

Value

Type

Color

#ffffff

Background

 

Background color:

#005ac9

Box

 

Width

700 pixels

Height

40 pixels

Float

Left

 

Padding (same for all)

Top

10

Border (UNCHECK same for all in all 3 columns)

 

Top

Style

solid

Width

1 pixel

Color

#ffffff

Bottom

Style

solid

Width

1 pixel

Color

#ffffff

  1. In the Insert Bar, click on the Insert Div Tag icon.
  2. In the dialog box, select ID: footer.
  3. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step nine

 

Step Ten: Cleaning up the Footer Issue

This site design is nice but it has a couple of layout flaws. Sometimes we need to do a dreaded "CSS Hack" to get a CSS site to behave the way we want.

Let's look at what's wrong:

  1. Click inside the center column and press Enter about ten times.
  2. Click inside the left column and press Enter twice.
  3. Notice that the green and teal columns do not expand along with the center column.
  4. Select the menu command File > Preview in Browser > Firefox.
  5. Notice that in Firefox not even the footer moved down. It wants to stay up high. It is better behaved in Internet Explorer, but we need it to work in all major browsers.

Firefox:
step ten

Internet Explorer:
step ten

 

First, we need a horizontal rule to push that footer down, and we need it to be invisible.

  1. In the CSS Styles panel, click on the New CSS Rule icon. Use these settings and click OK:
    1. Tag: clear
    2. Selector Type: Class
    3. Define in: main.css
  2. In the CSS Rule definition for .clear box, use these settings and click OK:

Category

Setting

Value

Block

Display

Block

Box

Clear

Left

Positioning

Visibility

Hidden

  1. Click on the Code button on the Document tool bar.
  2. Find this bit of code and click just after it:
    <div id="right">Content for id "right" Goes Here</div>
  3. Click on the Design button on the Document tool bar.
  4. On the Insert Bar, select HTML from the dropdown menu.
  5. Click on the first icon for Horizontal Rule.
  6. In the Property Inspector, set the Class to clear.
  7. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser. It should look like this:

step ten

 

Step Eleven: Color Fill

That does a nice job of pushing that footer down. Now all we need to do is use a background image in the #container layer to give the impression that the left and right columns are going all the way down too.

  1. Add the 3-column background image to your site files. Right click on the link below and save the image into your assets folder:
    bg-image.gif
  2. In the CSS Styles panel, select the #container style and click the Edit Style Sheet... icon.
  3. Go to the Background section and click on the Browse button next to Background Image.
  4. Navigate to bg-image.gif inside your assets folder and click OK.
  5. Save both files (File > Save All), and with index.html active press F12 to view the page in a browser.
  6. Go back to Dreamweaver and look at all the HTML and CSS code you created in Dreamweaver.
    1. Bring index.html up front by clicking on its tab. Click on the Code button on the Document tool bar. Find the various DIV tags which tell the layers where to go. HTML is used for STRUCTURE.
    2. Bring main.css up front by lciking on its tab. Notice how the CSS tells the layers what size to be, what to look like and how to behave. CSS is used for PRESENTATION.

nhsdesigns.com CSS layout

 


ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by >