User Name Password Register
DaniWeb IT Discussion Community
Home
Forums
Tutorials
Code Snippets
Blogs
Link Directory
All
•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 427,255 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,208 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Join our community!
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 684 | Replies: 2
Reply
•
•
Join Date: Sep 2006
Posts: 10
Reputation: tjl30 is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
tjl30 tjl30 is offline Offline
Newbie Poster

White space

  #1  
Mar 29th, 2008
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
Help with Code Tags 
<!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
Help with Code Tags 
/*
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]
AddThis Social Bookmark Button
Reply With Quote  
•
•
Join Date: Jan 2008
Location: Bali - Indonesia
Posts: 62
Reputation: rudevils is an unknown quantity at this point 
Rep Power: 1
Solved Threads: 8
rudevils rudevils is offline Offline
Junior Poster in Training

Re: White space

  #2  
Apr 1st, 2008
•
•
•
•
Originally Posted by tjl30 View Post
Help with Code Tags 
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
Help with Code Tags 
margin: 0 .1em .5em .1em;
If love is blind, why there's a bikini ??

Post your article at Bali Side Notes share your knowledge
Reply With Quote  
•
•
Join Date: Sep 2006
Posts: 10
Reputation: tjl30 is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
tjl30 tjl30 is offline Offline
Newbie Poster

Re: White space

  #3  
Apr 2nd, 2008
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.
Reply With Quote  
Reply

•
•
•
•

Only community members can participate in forum threads. You must register or log in to contribute.

Register
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

•
•
•
•
Thread Tools Display Modes
Linear Mode Linear Mode

•
•
•
•
blackhole cancellation earth engine google hack hacking inbox it jobs linux microsoft nasa news noise pink search space storage universe unlimited white white hat hacker yahoo
Similar Threads
Other Threads in the HTML and CSS Forum

Advertising Opportunities on DaniWeb
Contact Us - Newsletter Archive - Sitemap - Privacy Statement
All times are GMT -4. The time now is 1:01 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC