Header and Content Seperating?

Discussion in 'HTML & Website Design' started by blktallos, Jul 5, 2008.

0
  1. #1 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>The Lycanthrope HTML/CSS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="description" content="A brief description of the current page 

goes here.">
<meta name="keywords" content="keywords, go, here, only, once, page, 

content, has, been, finished">
<!-- <link rel="stylesheet" type="text/css" href="/styles/screen.css" 

media="screen,projection"> -->
<style type="text/css" media="screen,projection">
<style type='text/css'>
  html, body, a, abbr, acronym, address, area, b, bdo, big, blockquote, button, 

caption, cite, code, col, colgroup, dd, del, dfn, div, dl, dt, em, fieldset, form, 

h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, legend, li, map, object, ol, p, 

param, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, 

tfoot, th, thead, tr, tt, ul, var {
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
body {
-x-system-font:none;
background:#D6D6BC none repeat scroll 0% 0%;
color:#000000;
font-family:tahoma,verdana,arial,helvetica,sans-serif;
font-size:85%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
line-height:150%;
margin:0pt auto;
max-width:1150px;
min-width:750px;
}
code, pre {
white-space:pre;
}
del {
text-decoration:line-through;
}
dfn {
font-style:italic;
font-weight:bold;
}
em {
font-style:italic;
}
fieldset {
border:0pt none;
display:inline;
}
h1, h2, h3, h4, h5, h6 {
-x-system-font:none;
background:transparent none repeat scroll 0% 0%;
color:#003567;
font-family:georgia,garamond,"times new roman",times,serif;
font-size:1em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.5;
}
h1 {
font-size:1.5em;
}
img {
border:0pt none;
letter-spacing:0pt;
vertical-align:bottom;
}
ins {
text-decoration:none;
}
strong {
font-weight:bold;
}
tt {
display:block;
margin:0.5em 0pt;
padding:0.5em 1em;
}
.award {
float:left;
margin:0pt 1em 0.5em 0pt;
}
.skip {
left:-999em;
position:absolute;
}
#container {
background:#FFFFFF none repeat scroll 0% 0%;
border-color:#000080;
border-style:solid;
border-width:0pt 1px;
}
#header {
background:#FFFFFF url(images/header-bg.png) repeat-y scroll right top;
border-bottom:2.5em solid #003567;
border-top:1px solid #000080;
color:#000000;
height:80px;
margin:0pt 0pt -2.5em;
padding:0pt 0pt 0pt 1em;
}
#menu {
background:#003567 none repeat scroll 0% 0%;
height:2.5em;
line-height:2.5em;
padding:0pt 0pt 0pt 0.5em;
}
#menu li {
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
white-space:nowrap;
}
#menu li a {
background:transparent none repeat scroll 0% 0%;
color:#FFFFFF;
float:left;
font-weight:600;
height:2.5em;
margin:0pt 0.5em 0pt 0pt;
padding:0pt 0.5em;
text-decoration:none;
}
#menu li a:hover, #menu li a:active, #menu li a:focus {
color:#FFD700;
}
#content {
background:#F3F3F3 none repeat scroll 0% 0%;
border-top:1px solid #000080;
color:#000000;
float:left;
margin:0pt -221px 0pt 0pt;
width:100%;
}
#content .wrapper {
background:#FFFFFF none repeat scroll 0% 0%;
border-right:1px solid #000080;
color:inherit;
margin:0pt 220px 0pt 0pt;
overflow:hidden;
padding:1em 1em 0pt;
}
#content .wrapper h2 {
font-size:1.25em;
font-variant:small-caps;
}
#content .wrapper h3 {
font-size:1.15em;
font-style:italic;
}
#content .wrapper p {
padding:0.5em 0pt;
}
#sidebar {
background:#F3F3F3 none repeat scroll 0% 0%;
border-color:#000080;
border-style:solid;
border-width:1px 0pt 0pt 1px;
float:left;
padding:1em 0pt;
width:220px;
}
#sidebar * {
padding:0pt 1em;
}
#sidebar * * {
padding:0pt;
}
#search-form div {
padding:0pt 0pt 0.5em;
}
#search-form legend span {
background:transparent none repeat scroll 0% 0%;
color:#003567;
font-weight:bold;
}
#search-form label {
left:-999em;
position:absolute;
}
#search-form input {
margin:0pt;
vertical-align:middle;
}
#search-field {
height:1.2em;
width:115px;
}
#search-form .submit {
padding:0pt 1px;
}
#sidebar ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#footer {
background:#F8F8EF none repeat scroll 0% 0%;
border-bottom:1px solid #000080;
border-top:1px solid #000080;
clear:left;
color:inherit;
height:1%;
padding:0.5em 0pt;
text-indent:1em;
}
#footer em {
font-style:normal;
}
#error404 {
}
#error404 h1 {
-x-system-font:none;
color:#DC143C;
font-family:georgia,garamond,"times new roman",times,serif;
font-size:1.5em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:2;
}
#error404 p {
padding:0pt 0pt 0pt 1em;
}
#error404 h2 {
-x-system-font:none;
font-family:georgia,garamond,"times new roman",times,serif;
font-size:1em;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:1.5;
margin:0.5em 0pt;
}
#error404 ol {
list-style-type:lower-alpha;
margin:0pt 0pt 0pt 2.4em;
}
#error404 ul {
margin:0pt 0pt 0pt 1.5em;
}
#error404 strong {
font-style:italic;
font-weight:normal;
}
#error404 #search-field {
width:16em;
}
#error404 small {
color:#DC143C;
display:block;
font-size:0.85em;
font-weight:bold;
margin:2em 0pt 1em;
}
#error404 small span {
font-size:1.25em;
}
#gb_form fieldset {
display:block;
padding:0.5em 0pt 0pt;
}
#gb_form legend span {
background:#FFFFFF none repeat scroll 0% 0%;
color:#000000;
font-weight:bold;
}
#gb_form .fieldset .fieldset {
background:#EEEEEE none repeat scroll 0% 0%;
border:1px solid #999999;
color:inherit;
margin:1.5em 0pt 1em;
padding:1em;
position:relative;
}
#gb_form .fieldset .fieldset legend span {
border:1px solid #999999;
display:block;
font-weight:normal;
padding:0.25em 0.5em;
position:absolute;
top:-1em;
}
#gb_form .contact-info label {
clear:left;
float:left;
margin:0pt 0pt 0.25em;
padding:0.1em 0pt 0pt;
vertical-align:middle;
width:15em;
}
#gb_form .contact-info input {
margin:0pt 0pt 0.5em;
padding:0pt 0.25em;
vertical-align:middle;
width:14em;
}
#gb_form textarea {
display:block;
padding:0.5em 8px;
width:550px;
}
#gb_form .whythis a {
text-decoration:none;
}
#gb_form .whythis a span {
color:#000000;
display:none;
}
#gb_form .whythis a:hover span {
display:inline;
}
#gb_form .submit {
margin-top:0.25em;
}
        </style>

</head>
<body>
<div id="container">
    <a id="top"></a>
    <div id="header">
        <img src="http://i25.tinypic.com/4vg2km.png" alt="Logo" 

align="left"/>
</div>   
    <ul id="menu">
        <li><a  href="/index.html" title="Homepage">Home</a></li>
        <li><a  class="current-page"  href="/about/" title="Information">Who I 

am</a></li>
        <li><a  href="/services/" title="whatido">What I Do</a></li>
        <li><a  href="/portfolio/" title="My Portfolio">My Portfolio</a></li>

        <li><a  href="/writing/" title="BlakeAnthonyBlog">My 

Writing</a></li>
        <li><a  href="/contact/" title="SendBlakeAnthonyMessage">Contact 

Me</a></li>
    </ul>
    <div id="content">
        <div class="wrapper">
<h2>Proper Development, the problem</h2>
    <p>
 


 
    </div>
   
<div id="footer">

        <em>Copyright © 2006-2008 <a href="http://blakeanthonydesign.com" 

rel="nofollow" title="BlakeAnthonyDesign">BlakeAnthonyDesign</a>. All 

rights reserved.</em>
    </div>
</div>
</body>
</html>
    Code (markup):


    Whats causing the Header and the content to be so far seperate ?
     
    blktallos, Jul 5, 2008 IP
  2. jprice259

    jprice259 Peon

    Messages:
    100
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    First of all, you have this tag for no reason: <a id="top"></a>... Remove that.

    and also, <h2>Proper Development, the problem</h2> <p>

    you forgot to close out the <p> ... </p> it.

    also the <h2> naturally has thick padding / margins so in this tag:
    h1, h2, h3, h4, h5, h6 {
    padding:0;
    margin:0;
    }
    you can try adding that.

    also,

    #menu {
    background:#003567 none repeat scroll 0% 0%;
    height:2.5em;
    line-height:2.5em;
    padding:0pt 0pt 0pt 0.5em;
    }
    #menu li {
    display:inline;
    list-style-image:none;
    list-style-position:eek:utside;
    list-style-type:none;
    white-space:nowrap;
    }

    try doing the same w/ margin:0 and padding:0...


    also, I think you forgot to close out the content or wrapper class / id in:

    <div id="content">
    <div class="wrapper">
     
    jprice259, Jul 6, 2008 IP