Here is the link to the page in question: http://bluntpower.tumblr.com
I am trying to add a header above the posts. I've tried creating a div and placing the image within it but it overlaps the posts so when you scroll down, the header covers the posts. What I'm trying to do is place the header above everything else and have the content mind its business underneath it without any overlapping.
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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<title>x</title>
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<!--
Constraints theme by http://phrenesis.tumblr.com
-->
<head> <!-- DEFAULT VARIABLES -->
<meta name="font:Body" content="Georgia"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Links" content="#000000" />
<meta name="color:Link Hover" content="#B9B9B9"/>
<meta name="text:Font Size" content="9"/>
<meta name="text:Permalink" content="∞"/>
<meta name="text:Next" content="NEXT"/>
<meta name="text:Previous" content="BACK"/>
<meta name="if:Show Title" content="1"/>
<meta name="if:Show Links" content="0"/>
<meta name="if:Endless Scroll" content="1"/>
<link href="/mystylesheet.css" rel="stylesheet" type="text/css"/>
<meta name="if:Align Left" content="0"/>
<meta name="if:Faded Pics" content="0"/>
<meta name="if:More Space Between Posts" content="0"/>
<div style="position: fixed; padding : 4px; width : 150px; height : 150px; left: 795px; top: 210px; overflow : auto; ">
{Description}
</div>
<style type="text/css">
body{
margin-top:35px;
position: absolute; left: 190px; top: 60px;
line-height: 12px;
background-color:#ffffff;
font-family:{font:Body};
color:{color:Text};
font-size:{text:Font Size}px;
text-align:justify;
}
{block:IfFadedPics}
img{
-webkit-transition: opacity 0.7s linear;
opacity: 0.9;
}
img:hover{
-webkit-transition: opacity 0.7s linear;
opacity: 1;
}
{/block:IfFadedPics}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
a:link, a:active, a:visited{
color:{color:Links};
text-decoration:none;
-webkit-transition-duration: 0.4s;
}
a:hover{
color:{color:Link Hover};
}
img
{ border-style: none;
}
#contentcolumn{
{block:IfAlignLeft}
position:absolute;
left:70px;
{/block:IfAlignLeft}
width:500px;
margin:auto;
overflow:shown;
}
.blogtitle {font-size:20px; text-align:center; font-family:{font:Body}; letter-spacing:3px; color:{color:Title}; margin-top:-25px; margin-bottom:20px; {block:IfShowLinks}margin-bottom:5px;{/block:IfShowLinks}text-transform:lowercase;}
.links {font-size:9px; font-family:times; color:{color:Text}; text-align:center; text-transform:uppercase; margin-bottom:20px; }
.title, h3 {
font-family:{font:Body};
font-weight:normal;
font-size:11px;
text-transform:uppercase;
border-bottom:1px solid;
line-height:12px;
margin-bottom:4px;
text-align:left;
letter-spacing:1px;
}
.audio {width: 500px!important; background-color:#000000;}
#entry{
margin-bottom:10px;
width: 500px !important;
}
#entry img{
width:500px;}
div.video embed,
div.post div.video object {
width:500px !important;
height:300px !important;
}
.perma {
float:left;
font-size:10px;
position: absolute;
text-align:left;
padding-left:10px;
margin-left:450px;
height:50px;
display:none;
z-index: 1000;
}
#entry:hover .perma {display: block;
}
{CustomCSS}
</style>
{block:IfEndlessScroll}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>{/block:IfEndlessScroll}
</head>
<body>
<div id="contentcolumn">
{block:IfShowTitle}<div class="blogtitle"><a href="/"><div style="color:{color:Title};">{Title}</div></a></div>{/block:IfShowTitle}
{block:IfShowLinks}<div class="links"><a href="/archive">archive</a> <a href="{RSS}">RSS</a>
<a href="/ask">ask</a>
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages}
<a href="http://phrenesis.tumblr.com/themes">theme</a></div>{/block:IfShowLinks}
{block:IfEndlessScroll}<div class="autopagerize_page_element">{/block:IfEndlessScroll}
{block:Posts}
{block:Text}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div style="margin-top:-5px; margin-bottom:-5px;">{Body}</div>
{block:PermalinkPage}<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div><div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>{/block:PermalinkPage}
</div>
{/block:Text}
{block:Photo}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<a href="{LinkURL}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="450"/></a>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
</div>
{/block:Photo}
{block:Photoset}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<center>{Photoset-500}</center>{block:Caption}{/block:Caption}</div>{/block:Photoset}
{block:Link}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<a href="{URL}" class="link" {Target}><h3>→ {Name} </h3></a>{/block:Link}
{block:Link}{block:Description}<P>{Description}</p>{/block:Description}</div>{/block:Link}
{block:Chat}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{block:PermalinkPage}
<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div><div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
{/block:PermalinkPage}
</div>
{/block:Chat}
{block:Quote}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<div style="margin-bottom:-10px; font-family:{font:Body}; font-style: italic; font-size:11px; line-height:12px; color:{color:Text};">{Quote}</div>
</span>
{block:Source}<br /><div style="margin-left:30px;">— {Source}</div>{/block:Source}
{block:PermalinkPage}{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}{/block:HasTags}
{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}{/block:HasTags}
<div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
{/block:PermalinkPage}
</div>
{/block:Quote}
{block:Audio}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<div class="audio">{AudioPlayerBlack}</div>
<div style="text-transform:uppercase; font-size:10px; text-align:center;padding:5px;">{block:Artist}<b>{Artist}</b>{/block:Artist} | {block:TrackName}<i>{TrackName}</i>{/block:TrackName}</div>
{block:PermalinkPage}
<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div><div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
{/block:PermalinkPage}
</div>
{/block:Audio}
<div class="video">
{block:Video}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
{Video-500}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div>{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}{/block:HasTags}
<div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>{/block:PermalinkPage}
</div>
{/block:Video}
</div>
{block:Answer}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<div style="margin-bottom:-15px;">
<span style="font-size:11px; font-family:{font:Body}; font-style:italic; text-align:left; line-height:12px; letter-spacing:1px; color:#000000;">{Asker}:</span> {Question}</div>
<br>{Answer}
</div>
{/block:Answer}
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{block:IfMoreSpaceBetweenPosts}<br>{/block:IfMoreSpaceBetweenPosts}
{/block:Posts}
{block:IfEndlessScroll}</div>{/block:IfEndlessScroll}
{block:IfNotEndlessScroll}{block:Pagination}<div style="margin-top:10px; margin-bottom:5px; font-family:courier new; letter-spacing:1px; font-size:12px; line-height:15px; border-top:1px dotted;"><div style="float:left">{block:PreviousPage}<a href="{PreviousPage}">{text:Previous}</a>{/block:PreviousPage}</div> <div style="float:right;">{block:NextPage}<a href="{NextPage}">{text:Next}</a>{/block:NextPage}</div></div>{/block:Pagination}{/block:IfNotEndlessScroll}
{block:IfNotShowLinks}
{/block:IfNotShowLinks}
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<title>x</title>
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<!--
Constraints theme by http://phrenesis.tumblr.com
-->
<head> <!-- DEFAULT VARIABLES -->
<meta name="font:Body" content="Georgia"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Links" content="#000000" />
<meta name="color:Link Hover" content="#B9B9B9"/>
<meta name="text:Font Size" content="9"/>
<meta name="text:Permalink" content="∞"/>
<meta name="text:Next" content="NEXT"/>
<meta name="text:Previous" content="BACK"/>
<meta name="if:Show Title" content="1"/>
<meta name="if:Show Links" content="0"/>
<meta name="if:Endless Scroll" content="1"/>
<link href="/mystylesheet.css" rel="stylesheet" type="text/css"/>
<meta name="if:Align Left" content="0"/>
<meta name="if:Faded Pics" content="0"/>
<meta name="if:More Space Between Posts" content="0"/>
<div style="position: fixed; padding : 4px; width : 150px; height : 150px; left: 795px; top: 210px; overflow : auto; ">
{Description}
</div>
<style type="text/css">
body{
margin-top:35px;
position: absolute; left: 190px; top: 60px;
line-height: 12px;
background-color:#ffffff;
font-family:{font:Body};
color:{color:Text};
font-size:{text:Font Size}px;
text-align:justify;
}
{block:IfFadedPics}
img{
-webkit-transition: opacity 0.7s linear;
opacity: 0.9;
}
img:hover{
-webkit-transition: opacity 0.7s linear;
opacity: 1;
}
{/block:IfFadedPics}
.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
a:link, a:active, a:visited{
color:{color:Links};
text-decoration:none;
-webkit-transition-duration: 0.4s;
}
a:hover{
color:{color:Link Hover};
}
img
{ border-style: none;
}
#contentcolumn{
{block:IfAlignLeft}
position:absolute;
left:70px;
{/block:IfAlignLeft}
width:500px;
margin:auto;
overflow:shown;
}
.blogtitle {font-size:20px; text-align:center; font-family:{font:Body}; letter-spacing:3px; color:{color:Title}; margin-top:-25px; margin-bottom:20px; {block:IfShowLinks}margin-bottom:5px;{/block:IfShowLinks}text-transform:lowercase;}
.links {font-size:9px; font-family:times; color:{color:Text}; text-align:center; text-transform:uppercase; margin-bottom:20px; }
.title, h3 {
font-family:{font:Body};
font-weight:normal;
font-size:11px;
text-transform:uppercase;
border-bottom:1px solid;
line-height:12px;
margin-bottom:4px;
text-align:left;
letter-spacing:1px;
}
.audio {width: 500px!important; background-color:#000000;}
#entry{
margin-bottom:10px;
width: 500px !important;
}
#entry img{
width:500px;}
div.video embed,
div.post div.video object {
width:500px !important;
height:300px !important;
}
.perma {
float:left;
font-size:10px;
position: absolute;
text-align:left;
padding-left:10px;
margin-left:450px;
height:50px;
display:none;
z-index: 1000;
}
#entry:hover .perma {display: block;
}
{CustomCSS}
</style>
{block:IfEndlessScroll}<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>{/block:IfEndlessScroll}
</head>
<body>
<div id="contentcolumn">
{block:IfShowTitle}<div class="blogtitle"><a href="/"><div style="color:{color:Title};">{Title}</div></a></div>{/block:IfShowTitle}
{block:IfShowLinks}<div class="links"><a href="/archive">archive</a> <a href="{RSS}">RSS</a>
<a href="/ask">ask</a>
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a> {/block:Pages} {/block:HasPages}
<a href="http://phrenesis.tumblr.com/themes">theme</a></div>{/block:IfShowLinks}
{block:IfEndlessScroll}<div class="autopagerize_page_element">{/block:IfEndlessScroll}
{block:Posts}
{block:Text}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div style="margin-top:-5px; margin-bottom:-5px;">{Body}</div>
{block:PermalinkPage}<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div><div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>{/block:PermalinkPage}
</div>
{/block:Text}
{block:Photo}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<a href="{LinkURL}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="450"/></a>
{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
</div>
{/block:Photo}
{block:Photoset}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<center>{Photoset-500}</center>{block:Caption}{/block:Caption}</div>{/block:Photoset}
{block:Link}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<a href="{URL}" class="link" {Target}><h3>→ {Name} </h3></a>{/block:Link}
{block:Link}{block:Description}<P>{Description}</p>{/block:Description}</div>{/block:Link}
{block:Chat}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
{block:PermalinkPage}
<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div><div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
{/block:PermalinkPage}
</div>
{/block:Chat}
{block:Quote}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<div style="margin-bottom:-10px; font-family:{font:Body}; font-style: italic; font-size:11px; line-height:12px; color:{color:Text};">{Quote}</div>
</span>
{block:Source}<br /><div style="margin-left:30px;">— {Source}</div>{/block:Source}
{block:PermalinkPage}{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}{/block:HasTags}
{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}{/block:HasTags}
<div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
{/block:PermalinkPage}
</div>
{/block:Quote}
{block:Audio}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<div class="audio">{AudioPlayerBlack}</div>
<div style="text-transform:uppercase; font-size:10px; text-align:center;padding:5px;">{block:Artist}<b>{Artist}</b>{/block:Artist} | {block:TrackName}<i>{TrackName}</i>{/block:TrackName}</div>
{block:PermalinkPage}
<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div><div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>
{/block:PermalinkPage}
</div>
{/block:Audio}
<div class="video">
{block:Video}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
{Video-500}{block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}
<div style="float:left">{block:Tags}#{Tag}{/block:Tags}</div>{block:HasTags}{block:Tags}<a href="{TagUrl}">#{Tag} </a>{/block:Tags}{/block:HasTags}
<div style="float:right;">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</div>{/block:PermalinkPage}
</div>
{/block:Video}
</div>
{block:Answer}
<div id="entry">
<span class="perma"><a href="{Permalink}">{text:Permalink}</a></span>
<div style="margin-bottom:-15px;">
<span style="font-size:11px; font-family:{font:Body}; font-style:italic; text-align:left; line-height:12px; letter-spacing:1px; color:#000000;">{Asker}:</span> {Question}</div>
<br>{Answer}
</div>
{/block:Answer}
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{block:IfMoreSpaceBetweenPosts}<br>{/block:IfMoreSpaceBetweenPosts}
{/block:Posts}
{block:IfEndlessScroll}</div>{/block:IfEndlessScroll}
{block:IfNotEndlessScroll}{block:Pagination}<div style="margin-top:10px; margin-bottom:5px; font-family:courier new; letter-spacing:1px; font-size:12px; line-height:15px; border-top:1px dotted;"><div style="float:left">{block:PreviousPage}<a href="{PreviousPage}">{text:Previous}</a>{/block:PreviousPage}</div> <div style="float:right;">{block:NextPage}<a href="{NextPage}">{text:Next}</a>{/block:NextPage}</div></div>{/block:Pagination}{/block:IfNotEndlessScroll}
{block:IfNotShowLinks}
{/block:IfNotShowLinks}
</div>
</body>
</html>
Is it possible or is there something I need to edit? Any help is appreciated, thanks!
