Jump to content

mysterious White space

tjl30

By tjl30
in CSS Help

Recommended Posts

tjl30 Newbie

tjl30

Posted
Posted

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.

2371699404_519528f0cd_o.jpg

 

The 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>

 

The 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;
}

 

 

Link to comment
https://forums.phpfreaks.com/topic/98492-mysterious-white-space/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.