0

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]

2
Contributors
2
Replies
3
Views
9 Years
Discussion Span
Last Post by tjl30
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;
	
	
}

you need to change h1 margin tjl30, that white space is cause by top margin of your h1
just change it to

margin: 0 .1em .5em .1em;
0

ya i realized shortly after that margins do that...

I thought that the margin of the h1 would push it downward but I mixed up padding and margins. Thanks for the reply though.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.