body
{
background-image: url(paper3.gif);
color: #000000;
}
notice the use of margin/padding to get no indentation for the list
ul.list-of-links {
margin: 0px;
padding: 0px;
list-style-type: none;
font-weight: bold;
}
notice the use of text-indent/margin-left to get a hanging indent. Setting
the padding to 0 eliminated the natural indentedness of the list.
ul#instructors {
padding: 0px;
text-indent: -20px;
margin-left: 20px;
list-style-type: none;
}
In order to center the main content I needed the outer wrapper to fill
the part of the window not occupied by the menu. It's not possible to
make it exactly fill the window, but by trial and error I found that
making its width be 80% of the window got me a roughly centered column.
div#main-content-outer-wrapper {
width: 80%;
float: left;
text-align: center;
}
Dr. Berry made the content of his main column be 550px, hence the 550
px width
div#main-content-inner-wrapper {
width: 550px;
text-align: left;
margin-left: auto;
margin-right: auto;
}
There is no special formatting for the course-information, but the block
is there in case special formatting would be added in the future
div#course-information {
}
Notice the use of "pseudo" attributes to specify the different colors
for links
a:link {
color: #000099;
}
a:visited {
color: #aaaaaa;
}
a:active {
color: #aaaa00;
}
There is no hard-and-fast rule for making width be 120px. I used a border
during testing to see how wide I needed to make the menu in order to
accommodate its widest element, which was the "Assignment" link
div#menu {
width: 120px;
float: left;
}
Dr. Berry used different size fonts to get his headers, but they were
properly headers and I made them be headers in the html document and
then formatted them using style rules.
h1 {
text-align: center;
font-size: x-large;
}
The text-align attribute is meant to center the three headers that
follow, but it didn't always work, so I had to add "text-align: center"
to each of the three headers as well.
div.header {
text-align: center;
}
hr {
border: solid 2pt gray;
}
h1#main-title {
font-weight: normal;
color: #0000aa;
}
hr.headerrule {
width: 400px;
}
div.course {
font-size: 24px;
color: #0000aa;
}
I used margin-top for each of the next two headers in order to pull
them in more tightly with the header above them.
h2#semester {
text-align: center;
margin-top: -10px;
font-size: large;
color: #990000
}
h3#timeplace {
text-align: center;
margin-top: -10px;
font-size: medium;
color: #990099;
}
div.announcements {
font-weight: bold;
color: red;
}
div#exam1-content {
background-color: yellow;
}
span.date {
color: red;
}
div#mathworks {
text-align: center;
}