Header |
Header |
Richie |
Feb 25 2011, 03:54 PM
Post
#1
|
Group: Members Posts: 2 Joined: 25-February 11 Member No.: 13,976 |
Hello, hello!
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> Is it possible or is there something I need to edit? Any help is appreciated, thanks! This post has been edited by Richie: Feb 25 2011, 03:55 PM |
mcgillis |
Feb 25 2011, 07:49 PM
Post
#2
|
Newbie Group: Members Posts: 11 Joined: 22-April 10 Member No.: 11,713 |
#contentcolumn{ {block:IfAlignLeft} position:absolute; left:70px; {/block:IfAlignLeft} width:500px; margin:auto; overflow:shown; } <body> <div id="contentcolumn"> </div> </body> </html>[/code] Your contentcolumn division is absolutely positioned in your CSS with no top distance specified. So, I think if you just add CODE top:50px; (or whatever the distance would need to be to clear your banner) that might do the trick. |
Richie |
Feb 26 2011, 12:37 PM
Post
#3
|
Group: Members Posts: 2 Joined: 25-February 11 Member No.: 13,976 |
I'll try it, thanks!
Tried adding that, doesn't seem to make a difference. This post has been edited by Richie: Feb 26 2011, 12:47 PM |
Frederiek |
Feb 27 2011, 04:19 AM
Post
#4
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You have markup errors. Pass the page through the validator (links at top and bottom of this page) and fix the errors.
The CSS file can not be found (404) and there are 244 warnings about images loaded with the wrong MIME TYPE (as reported by Safari's Web Inspector). BTW, are you aware that the page loads over 900 elements, weighs over 140Mb and takes 2.7 minutes to load? |
Lo-Fi Version | Time is now: 29th March 2024 - 04:42 PM |