shamguy4
21 Nov 2010, 03:29 PM
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:
<!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:
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
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:
<!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:
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