Maybe you could make use of this:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ruth's Assignment Center</title>
<style type="text/css">
/* CSS Browser Clean Up */
body {
margin: 0;
padding: 0;
}
:link, :visited {
text-decoration: none;
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6, pre, code, kbd {
font-size: 1em;
}
dl, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}
a img, :link img, :visited img, abbr {
border: none;
}
address, abbr {
font-style: normal;
}
</style>
<style type="text/css">
/* Page Styling */
body {
color: #6e0000;
background: #660000 url('http://www.glennstevenson.com/rmoratz/swirl.gif');
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
min-width: 750px;
font-size: 16px;
}
#bodyall {
margin: 5% auto;
width: 750px;
color: inherit;
background: #c57a7a;
border: inset;
padding: 2.5%;
}
#title {
display: block;
font-size: 2em;
text-align: right;
}
#line1 {
margin-bottom: 5%;
}
#links {
display: block;
float: left;
width: 18%;
background: url('http://www.glennstevenson.com/rmoratz/swirl.gif');
border: outset;
text-align: center;
}
#links li, #links li a, #links li a:link {
display: block;
height: 1.3em;
line-height: 1.3em;
color: #e38c8c;
background-color: inherit;
}
#links li a:visited {
color: #e38c8c;
background-color: inherit;
}
#links li a:hover {
color: #a50000;
background-color: inherit;
}
#welcome, #other {
margin-left: 25%;
font-size: 1.5em;
}
#books {
display: block;
text-align: center;
}
#last {
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="bodyall">
<h1 id="title">Ruth's Assignment Center</h1>
<hr id="line1" />
<ul id="links">
<li><a href="assignment1/">Assignment 1</a></li>
<li><a href="assignment1/">Assignment 2</a></li>
<li><a href="assignment1/">Assignment 3</a></li>
<li><a href="assignment1/">Assignment 4</a></li>
<li><a href="assignment1/">Assignment 5</a></li>
<li><a href="assignment1/">Assignment 6</a></li>
<li><a href="assignment1/">Assignment 7</a></li>
<li><a href="assignment1/">Assignment 8</a></li>
<li><a href="assignment1/">Assignment 9</a></li>
<li><a href="assignment1/">Assignment 10</a></li>
</ul>
<p id="welcome">Hello and welcome to my assignment center, where all my assignments can be found in one central and easy to find location.</p>
<div id="books"><img src="http://www.glennstevenson.com/rmoratz/books1.gif" alt="pictures of books" width="200" height="62" /></div>
<p id="other">I plan to add more to this page as I learn to do things in javascript. So for now it's pretty plain.</p>
<div id="last"><!-- --></div>
</div>
</body>
</html>
Which is just a rewrite of your page.
Things you want to possibly do is eliminate the overuse of ID attributes. An example of how you could do such things based on the code above is this:
before:
Code:
#welcome, #other {
margin-left: 25%;
font-size: 1.5em;
}
after:
Code:
#bodyall p {
margin-left: 25%;
font-size: 1.5em;
}
Where this will set all 'p' elements inside the bodyall container.
Another concern I have is the color and background-color for some elements, especially hover where the colour change is too close to the background. One thing to look at is that on the body, you're using a background image, the background color should be a color from that, the color of the default font should be a color that is easily seen with that background. This will mean you'll actually need to specify the color of the wrapper differently, but that isn't too difficult.
I should have also mentioned that I've got two style elements declared, the first one is just a browser clean up, removing default and sometimes browser dependant settings so that I have a clean slate to work with. The second is the styling used for this page. It would be a good idea to put them in their own external CSS file and just link to them. Making sure that the clean up is first loaded, otherwise it's changes can override your own if loaded last.
Cheers,
MC
