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

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

5. Choose the following menu command: Insert > Layout Objects > Div Tag.
6. In the dialog box, select ID: container.
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 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

5. 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.)
6. In the dialog box, select ID: header.
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 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

7. In the Insert Bar, click on the Insert Div Tag icon.
8. In the dialog box, select ID: navigation.
9. 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: 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

7. In the Insert Bar, click on the Insert Div Tag icon.
8. In the dialog box, select ID: local-container.
9. 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: 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

5. In the Insert Bar, click on the Insert Div Tag icon.
6. In the dialog box, select ID: left.
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 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

7. In the Insert Bar, click on the Insert Div Tag icon.
8. In the dialog box, select ID: center.
9. 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: 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

7. In the Insert Bar, click on the Insert Div Tag icon.
8. In the dialog box, select ID: right .
9. 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: 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

7. In the Insert Bar, click on the Insert Div Tag icon.
8. In the dialog box, select ID: footer.
9. 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: 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:

Internet Explorer:

 

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

3. Click on the Code button on the Document tool bar.
4. Find this bit of code and click just after it:
   <div id="right">Content for id "right" Goes Here</div>
5. Click on the Design button on the Document tool bar.
6. On the Insert Bar, select HTML from the dropdown menu.
7. Click on the first icon for Horizontal Rule.
8. In the Property Inspector, set the Class to clear.
9. 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 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.