November 24, 200817 yr Hey everyone. I'm having problem with this code. Been over it several times, and just can't seem to find the problem. My nav div isn't showing up when I preview. And as a result, the rest of the rough design is being pushed to the left of the page. Any help would be greatly appreciated. Here's the code: /*-------------------------------*/ /*--Browser default style reset--*/ /*-------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p, blockquote,th,td {margin:0; padding:0;} table {border-collapse:collapse; border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} /*---------------*/ /*--Link styles--*/ /*---------------*/ a:link {text-decoration:none; color:#A97F7F;} a:visited {text-decoration:none; color:#bf6a6a;} a:hover {text-decoration:none; color:#6565ff;} a:active {text-decoration:none; color:#bf6a6a;} /*--------------------*/ /*--Text and spacers--*/ /*--------------------*/ h1 { font-size:130%; font-weight:bold;} h2 { font-size:90%; font-weight:bold;} h3 { padding:0px 0px 5px 0px;} .spacer { width:130px; height:auto; float:left; display:inline;} .spacer1 { width:850px; height:15px;} /*------------------*/ /*--Content styles--*/ /*------------------*/ body { margin:0 auto; color: #ffffff; background-color: #000000; font-family:Geneva,Arial,Helvetica,sans-serif;} #center { width:600px; height:auto; float:left;} #container { width:850px; height:auto; margin:0 auto;} #content { width:550px; height:300px; float:left; display:inline; overflow:auto; padding:20px; /*border-style:solid; border-color:#754e4e; border-width:2px;*/} #footer { width:850px; height:60px; float:left;} #footer p { text-align:center; font-size:70%;} .frame { width:600px; height:50px; text-align:center; float:left;} #header { width:850px; height:100px; float:left; background-image: url(img/header.jpg); text-align:center;} #main { width:850px; height:auto; float:left;} .mainContent { width:400px; height:150px; float:left; display:inline; padding:0px 10px 10px 10px;} .mainContent p { font-size: 70%;} .mainPhoto { width:100px; height:auto; float:left; display:inline;} #nav { width:130px; height:auto; float:left; text-align:left; margin:40px 0px 20px 10px;} #nav p{ text-align:center; display:inline; font-size:80%;} Here is the html code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="styles3.css" /> </head> <div id="container"> <div class="spacer1"> </div> <div id="header"> </div> <div class="spacer1"> </div> <!-- ------- Navigation -------- --> <div id="main"> <div id="nav"> <a href="index.html">Home</a> <br /> <a href="about.html">About</a> <br /> <a href="projects.html">Projects</a> <br /> <a href="reels.html">Reels</a> <br /> <a href="contact.html">Contact</a> </div> <!-- ------- Main content -------- --> <div id="center"> <div class="frame"> <img src="img/content-frame-top.gif" alt="frame-top" /> </div> <div id="content"> <div class="mainPhoto"> <img src="img/test.jpg" alt="DVD cover" title="Planet B-boy DVD cover" width="100px" height="142px" /> </div> <div class="mainContent"> <h2>PLANET B-BOY DVD RELEASE</h2> <p>After a successful worldwide theatrical release, Planet B-boy will be will be released on DVD on Nov 11, 2008 in the US. Pre-order today. It is currently available on DVD in Canada and Germany...the rest of the world coming soon. For more info, visit <a href="http://www.planetbboy.com" target="_blank">planetbboy.com</a> and sign up for their news updates.</p> </div> <div class="mainPhoto"> <img src="img/test.jpg" alt="DVD cover" title="Planet B-boy DVD cover" width="100px" height="142px" /> </div> <div class="mainContent"> <h2>TOE TO TOE EDIT UPDATE</h2> <p>Principal editing of the narrative feature film "Toe to Toe" is complete. Over the next couple months we'll be making some tweaks to it, composing music for, sound editing/mixing and color correcting. We'll hopefully be premiering at a major festival this winter.</p> </div> <div class="mainPhoto"> <img src="img/test.jpg" alt="DVD cover" title="Planet B-boy DVD cover" width="100px" height="142px" /> </div> <div class="mainContent"> <h2>Article 3</h2> <p>Principal editing of the narrative feature film "Toe to Toe" is complete. Over the next couple months we'll be making some tweaks to it, composing music for, sound editing/mixing and color correcting. We'll hopefully be premiering at a major festival this winter.</p> </div> </div> <div class="frame"> <img src="img/content-frame-bottom.gif" alt="frame-bottom" /> </div> </div> <div id="footer"> <br /> <p>©2008 Last Frame Of Action. All rights reserved.<br /></p> </div> </div> </div> </body> </html>
November 24, 200817 yr Is main a container for all your content? If it isnt then close it after nav Seems to be a few unclosed divs there.
November 24, 200817 yr Hmm as 54 said u didnt close all div tags exp. <div id="main"> --- should be closed after u listed ur navigation links
November 24, 200817 yr Author Thanks for the replies. Actually, the problem was that, in my html code, the html comments had extra dashes (-), and extended onto 3 lines. Once i consolidated the html comment onto 1 line, the problem was resolved.
Create an account or sign in to comment