Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts

    Problem with css and div code

    Hey everyone. I'm relatively new to the design world, and still learning on a daily basis. I've been over this code a couple dozen times, and I can't figure out where I went wrong. When I preview in brower, my nav section does not appear and the center content ends up being pushed to the left, because the left nav isn't there. Any help would be greatly appreciated.

    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's the html code, if it helps:
    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">&nbsp;
       </div>
       <div id="header">
       </div>
       <div class="spacer1">&nbsp;
       </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>&copy;2008 Last Frame Of Action. All rights reserved.<br /></p>
    		</div>
    	</div>
    </div>
    
    </body>
    
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello optimus203,
    I didn't try your page locally yet. I looks like multiple edits have done away with some essential tags - see below in red.
    Run it through the validator, see my sig below. It will find others too.

    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>
    <body>
    <div id="container">
       <div class="spacer1">&nbsp;
       </div>
       <div id="header">
       </div>
       <div class="spacer1">&nbsp;
       </div>
    
    <!-- -------
    Navigation
    -------- -->
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Thanks for the response. I noticed it was missing the body tag, but that wasn't the problem. The problem was actually with the HTML comments I added in the HTML. I don't know if it was the additional dashes (-) i had, or the fact I separated the comments onto 3 lines, but once I changed those HTML comments to a one liner, the problem was resolved.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Glad it's working - would have taken me a while to figure out it was extra dashes!
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •