hello im a student going for Graphic design.
thye dont teach web development...too bad.
but i found a small elective on html and css.
I have a HW assignment and my teacher said "just figure it out"
I did but I want to know if I did it right because I know I can fiddle around till it works but I want to do it correctly.

I was suppose to make a heading and then a paragraph and below that, is a horizontal menu bar.
the links in the bar lead to similar pages with the same heading, but a dfferent paragraph. But no matter what size paragraph, my teacher wants the menu to stay put in its place underneath. ( the homework assignment hasnt really been given yet so I dont know what the paragraphs are suppose to say or anything...)

automatically I though absolute positioning for the menu bar. so here is what I did. (after racking my brains and learning all about absolute positioning....grrrrr...)


html:
Code:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang="en">

<head>
 	<link rel="stylesheet" type="text/css" href="assignment_6.css"/>
 	<title>Assignment 6</title>
 </head>

<body>
	<header>
	  <h1>Assignment 6</h1>
    <p>Click an example in the navigation menu to view it</p>
</header>
 <nav>
  <ol>
  	<li> <a href= index.xhtml>Home</a></li>
    <li><a href= example1.xhtml>Example 1</a></li>
    <li><a href= example2.xhtml>Example 2</li>
  </ol>
 </nav>
</body>
</html>
and heres the CSS:

Code:
header h1 { 
   color: Orange;
   background: blue;
  background-image: -moz-linear-gradient(top, #028E9B, #006064);
  background: -webkit-gradient(linear, left top, left bottom, from(#028e9b), to(#006064));
 
  text-align: center;
  width: 15em;
  margin:auto; /* centered */
  text-shadow: 0px 1px 1px #3CA;
}

header p{
  text-align: center;
}

nav {
  position: absolute; /* apparently this sets width to contents size*/
  top: 8em;
  right: 0;
  left: 0;
  margin: auto;
  width: 80%;
}

nav ol{
    
    margin: 0;
    list-style-type: none;
    text-align: center;
    padding: 0; 
    
}

nav ol li{ 
   float: left;
   width: 33%;
}

nav ol li a{
     padding: 4px;
     border: black solid 1px;
     display: block;
     background-image: -moz-linear-gradient(top, #028E9B, #006064);
     background: -webkit-gradient(linear, left top, left bottom, from(#028e9b), to(#006064));
      
}

I had fun with the gradients