The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Header
Richie
post 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>&nbsp;&nbsp;<a href="{RSS}">RSS</a>&nbsp;&nbsp;
<a href="/ask">ask</a>&nbsp;&nbsp;
{block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>&nbsp;&nbsp;{/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>&rarr; {Name}&nbsp;</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}&nbsp;{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;">&mdash; {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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mcgillis
post Feb 25 2011, 07:49 PM
Post #2


Newbie
*

Group: Members
Posts: 11
Joined: 22-April 10
Member No.: 11,713



QUOTE(Richie @ Feb 25 2011, 01:54 PM) *


#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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Richie
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 05:06 AM