Sometimes you want to have more than one DIV, P, UL or other item under your CSS control.

You can use multiple classes of objects on your pages to have some things on the top of the page, sides and middle. This gives a much more sophisticated layout of your pages.

Classes

CSS classes - http://www.w3schools.com/Css/css_id_class.asp

Make a page using HTML

In the embedded style sheet, create a class called ul.navbar

This will give you an unordered list for the navbar.

You can change the appearance of the navbar, backgrounds, etc http://www.w3schools.com/Css/css_background.asp

In the embedded style sheet, make a class called div.center

Again, you can change the backgrounds and other attributes.

Fill the content of the page with a <P>content content content</P> Add more content words to fill it up

Positioning

Here is a sample of some CSS code that places a navbar. :

This goes in the style sheet of the page:

ul.navbar
{       
	list-style-type: none;    //no dots, you can use other markers
	padding: o;
	margin: o;
	position: absolute;
	left: .5em;               //starts the navbar .5em from the left margin
	top: 2em;                 //sets the navbar 2em from from the top
	width: 9em                //defines the width of the navbar
}

To use the code, on your web page, you will want to use this code or similar:

This code goes in the body of the page:

<!-- Site navigation menu -->
<ul class="navbar">
       <li></li>  
       <li></li>  
</ul>

Your page should look similar to this in layout: http://dhswebdesign.pbworks.com/f/index.htm

Checklist:

Make a page that uses classes

use your name CSS Positioning and Classes in the title and headline of the page.

Make a navbar that sits on the left side of the page.

Link your navbar to your index, All Three CSS, DHS Web Design, your ning blog

make a div that sits to the right of the navbar

Use a color or picture for the background of the div

Upload your page to your angelfire site and link your index to it.

Print your code and hand it in.