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
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts

    My footer and content are showing up. My sidebar doesn't touch my header

    Heres my site http://www.stylishknockouts.com

    heres my html and css

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="shortcut icon" href="/favicon-1.ico">
    <title>Stylish Knockouts!</title>
    <meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="Knockout.css" />
    </head>
    <body id="home">
    <div id="outer">
    <div id="header">
    </div>
    
    <ul id=""nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    <div id="main">
    <div id="content" class="clearfix">
    <div id="col1"></div>
    <div id="maincol"></div>
    <div id="footer"></div>
    </div>
    </div>
    </body>
    </html>
    Code:
    html, body{
      margin:0;
      padding: 0;
      font-weight: inherit;
      font-style: inherit;
      font-size: 100%;
      font-family: inherit;
      vertical-align: baseline;
      border-left: 0;
      background:#FFFFFFF;
    }
    
    #outer{
      width: 1024px;
      margin:auto;
      text-align:left;
    }
    
    #header{
      width:1024px;
      height: 227px;
      background:url(http://www.stylishknockouts.com/images2/Header.jpg) no-repeat;
    }
    
    ul#nav{
      width: 244px;
      font-size: 92%;
      padding: 18px 115px 5px 0;
      text-align:right;
    }
    
    #col1{
          width:244px;
          height:634px;
          background:url(http://www.stylishknockouts.com/images2/Navigation.jpg) no-repeat;
    
    }
    
    #footer{
      position: center;
      width: 1024px;
      height: 136px;
      padding: 20px 0 0 0;
      background:url (http://www.stylishknockouts.com/images2/Footer.jpg) no-repeat 0 0;
      clear:both;
    }
    
    #maincol{
      width:780px;
      height:634px;
      background:url(images2/Content.jpg) no-repeat;
      border: 1px;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2008
    Posts
    122
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I meant my foot and content aren't showing up

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Mccall101,
    The validator shows why. Have a look at the links about validation in my sig below.
    Compare this code to yours -
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body{
    	font-size: 100%;
    	background: #FFFFFF;
    }
    * {
    	margin: 0;
    	padding: 0;
    }
    #outer{
    	width: 1024px;
    	margin: 0 auto;
    	text-align: left;
    }
    #header{
    	width: 1024px;
    	height: 227px;
    	background: url(http://www.stylishknockouts.com/images2/Header.jpg) no-repeat;
    }
    ul#nav{
    	width: 244px;
    	margin: 18px 0 0 0;
    	font-size: 92%;
    	text-align: center;
    }
    #col1{
    	width: 244px;
    	height: 634px;
    	float: left;
    	background: url(http://www.stylishknockouts.com/images2/Navigation.jpg) no-repeat;
    }
    #maincol{
    	width: 780px;
    	height: 634px;
    	margin: 0 0 0 244px;
    	background: url(images2/Content.jpg) no-repeat;
    }
    #footer{
    	width: 1024px;
    	height: 136px;
    	padding: 20px 0 0 0;
    	background: #000 url(http://www.stylishknockouts.com/images2/Footer.jpg) no-repeat;
    	clear: both;
    }
    </style>
    </head>
    <body>
    	<div id="outer">
    		<div id="header"></div>
    			<div id="content">
    					<div id="col1">
    						<ul id="nav">
    							<li><a href="#">Home</a></li>
    							<li><a href="#">Home</a></li>
    							<li><a href="#">Home</a></li>
    							<li><a href="#">Home</a></li>
    						</ul>
    					<!--end col1--></div>
    				<div id="maincol">
    				<!--end maincol--></div>
    			<!--end content--></div>
    		<div id="footer"></div>
    	<!--end outer--></div>
    </body>
    </html>
    Your's has things like background:#FFFFFFF; (7 F's instead of 6 or 3)
    and <ul id=""nav"> (double quote marks)
    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
    •