tjl30 Posted March 29, 2008 Share Posted March 29, 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. 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; } Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted March 30, 2008 Share Posted March 30, 2008 The h1 inside #main has a top-margin which is creating that whitespace. Either remove the top-margin from h1s inside #main (and use some top-padding on main) or use 1px of top-padding/border on #main to force the h1 margin not to spill out of #main. Quote Link to comment Share on other sites More sharing options...
tjl30 Posted March 30, 2008 Author Share Posted March 30, 2008 Wow I can't believe I missed that thanks for the help! Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted March 30, 2008 Share Posted March 30, 2008 Download the "firebug" extension for Firefox and it will really help you with debuging. The "Inspect" tool will be very useful for you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.