Try this. What I did was:
1. Created a "container" DIV to limit the width of your content and so you can place everything at the middle of the page.
2. Fixed up your logo since you have it inside a UL but not inside an LI.
3. Created a "content" DIV to separate page content from your navigation bar, floated the navbar left and and gave content the appropriate margin so that text will not go under navbar.
4. Fixed mixed-case code in the ADDRESS element.
Take bigboy's advice too, validate your pages because in many cases, CSS rendering anomalies are caused by malformed markup.
I hope that helped. Cheers!
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Your Title Here</title>
<style type="text/css">
<!--
body {
color: #000066 ;
margin : 0px ;
padding : 40px 0px ;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
address {
border-top : 1px #000066 solid ;
padding-top : 10px ;
}
#container {
width : 720px ;
margin : auto ;
}
#content {
margin-left : 200px ;
}
#navbar {
width : 175px ;
list-style-type : none ;
float : left ;
margin : 0px ;
padding : 0px ;
}
#navbar li {
width : 152px ;
background : #000066 ;
border-right: 15px #CCCCCC solid ;
margin : .5em 0em ;
padding : 5px 10px ;
}
#navbar #logo {
border : 0px ;
padding : 5px 0px 5px 20px ;
}
#navbar a:link, #navbar a:visited {
color : #fff ;
text-decoration : none ;
}
//-->
</style>
</head>
<body>
<div id="container">
<!-- Site navigation menu -->
<ul id="navbar">
<li id="logo"><img src="http://www.personal.psu.edu/sjc5002/images/small_psu.gif"></li>
<li><a href="index.html">Welcome</a></li>
<li><a href="major.html">Major</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="links.html">Links</a></li>
</ul>
<div id="content">
<h1>Sam Chodur's E-Portfolio, Welcome!</h1>
<p>Hello and welcome to my e-portfolio.</p>
<p>I'd first like to tell you what you will find here on my webspace.</p>
<p>Here you will be able to find information about my College Education at Penn State University. Use the navigation bar on the left side of the page to hopefully find what you are looking to learn about me. If you have any suggestions for my page please send me an e-mail. You can do that by clicking my name at the bottom of any page.</p>
<address>
Last Updated: 9 Oct 2007<br>
by <a href="mailto:sjc5002@psu.edu">Samuel J. Chodur Jr.</a>
</address>
</div>
</div>
</body>
</html>
Bookmarks