So I decided I would try to make a website that is completely valid, and very simple. So far this is working out well, but there is a white space in between the main content area and the navigation area that I don't know how to get rid of.
Here is the code:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Portfolio</title>
<style type="text/css">
@import url('style.css');
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>The Portfolio</h1>
</div>
<div id="nav">
<ul>
<li><a href="home">Home</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</div>
<div id="main">
<h1>This is a header</h1>
<p>This is a paragraph where words normally go. People tend to read words.</p>
<h2>Part one: Heres a start</h2>
<p>It is important that you know the letters asdf and jkl; because these are the keys you should have you fingers on at all times.</p>
<p>If you find that you hands are in another place, then you are a noob</p>
<h2>Part two: how not to be a noob</h2>
<p>Juz don typ wid bad spelz. Some people use lorerd isbum delorio what ever its called to fill up random text but now me!</p>
<p>I thought that I would put mroe text into this example because after all who doesnt like realding a lot of text on the screen. Its cool that way, and I right, idk. STFU</p>
</div>
<div id="footer">
<p>The Portfolio is a website of all my works, under the Creative Commons License</p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/us/">
<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/us/80x15.png"/>
</a>
</div>
</div>
</body>
</html>
CSS
/*
Main Elements
*/
body {
text-align: center;
background-color: black;
}
a {
color: #75a1ec;
text-decoration: none;
padding: 0;
margin: 0;
}
a:hover{
color: #4137cd;
text-decoration: none;
padding: 0;
margin: 0;
}
h1{
font-style:normal; /*normal, italic, oblique*/
font-variant:small-caps; /*normal, small-caps*/
font-weight:bolder; /*norma, bold, bolder, lighter, or 100-900 */
font-size:2em; /*xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, %*/
line-height: 1em; /*normal, number, %, length */
font-family: "Arial Black",serif; /*arial, "lucida console", sans-serif*/
color: white;
margin: .8em .1em .5em .1em;
}
h2 {
font: normal normal bold 1em "Arial Black";
line-height: 1em;
margin: 1em .1em 1em .1em;
color: white;
}
p{
font-style:normal; /*normal, italic, oblique*/
font-variant:normal; /*normal, small-caps*/
font-weight:normal; /*norma, bold, bolder, lighter, or 100-900 */
font-size:1em; /*xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, %*/
line-height: 1em; /*normal, number, %, length */
font-family: arial, serif, sans-serif; /*arial, "lucida console", sans-serif*/
color: white;
margin: 0 2em 0 2em;
}
/*
Div Sections
*/
#wrapper {
background-color: white;
width: 600px;
padding: 0;
margin:0 auto 0 auto;
text-align: center;
border: 1px solid white;
}
#header {
background: #ffffff url('header.jpg') no-repeat top left;
width: 600px;
height: 100px;
border-bottom: 1px solid black;
margin: 0;
padding: 0;
}
#header h1{
font-style:normal; /*normal, italic, oblique*/
font-variant:normal; /*normal, small-caps*/
font-weight:bolder; /*norma, bold, bolder, lighter, or 100-900 */
font-size:3em; /*xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, %*/
line-height: 1em; /*normal, number, %, length */
font-family: "Arial Black",serif; /*arial, "lucida console", sans-serif*/
text-align: center;
color: white;
padding: 25px 0 0 0;
margin: 0;
}
#nav{
width: 600px;
height: 1em;
margin: 0;
padding: 0;
background-color: black;
/*
background: #ffffff url('navbr') repeat-x top left;
*/
overflow: hidden;
}
#nav ul{
padding:0;
margin: 0;
float: left;
}
#nav li{
margin: 0 5px 0 5px;
padding: 0;
display: inline;
}
#nav a{
margin: 0;
padding: 0;
}
#main{
margin: 0;
padding: 0;
background-color: black;
text-align: left;
}
#footer{
text-align: center;
clear: both;
margin: 0;
padding: 0;
background-color: black;
border-top: 1px solid white;
height: 3em;
}
#footer p{
color: white;
margin: 0 0 0 0;
padding: .8em 0 0 0;
font-weight:normal;
font-size: .7em;
}
object embed{
margin: .5em 2.5em .5em 2.5em;
}Here is the problem
[img]http://farm3.static.flickr.com/2173/2371699404_519528f0cd_o.jpg[/img]
