DIV is there but not in Source Code?

HTML & CSS
1

Hi,

I’m trying to get my head around this tumblr template but I just can’t understand how a DIV is on the page.

this is the page avonsports.tumblr.com

There’s a big white area at the bottom, when I ‘Inspect Element’ using Google Chrome I see the DIV is called credit but when I look at the source code it’s not there?

This is the only reference to the credit DIV

#credit{
        position:fixed;
	left:730px;
	bottom:15px;
	font-size:11px;
	color:#bbbbbb;                 
}                
#credit a{
	text-decoration:none;
	border-bottom:1px solid #eeeeee;
	color:#bbbbbb;
}                                  
#credit a:hover{
	color:#666666;
	border-bottom:1px solid #ffffff;
}

This is the page code (template code to generate page) and I can’t see any reference to the credit DIV ?

<!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" xml:lang="en" lang="en">
    <head>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>{Title}{block:PostSummary} - {PostSummary}{/block:PostSummary}</title>
        <link rel="icon" href="{Favicon}"/>
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
		<link rel="stylesheet" type="text/css" href="http://phatjoints.com/blog/testcss.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/VGGkpy5vm/swfaddress.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/zhlkpy5w3/jquery.cookie.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/xhpdxdi/bzKkztwyg/magic.js"></script>
		<script type="text/javascript">
		// specify your default format. Options include "grid" and "list".
		default_format = "grid"
		//
		{block:PermalinkPage}
		is_index = false        
		var disqus_url = "{Permalink}"; 
		var disqus_title="{block:PostTitle}{PostTitle}{/block:PostTitle}";
		{/block:PermalinkPage}
		{block:IndexPage}
		is_index = true
		{/block:IndexPage}     
		{block:PreviousPage}
		var previous_page = "{PreviousPage}"
        {/block:PreviousPage}
        {block:NextPage}
		var next_page = "{NextPage}"
        {/block:NextPage}   
		//
		</script>
		<meta name="color:Video BG" content="#000000">
		<meta name="color:Regular and Quote BG" content="#08bcc3">
		<meta name="color:Chat BG" content="#f392dd">
		<meta name="color:Link BG" content="#a10789">
		<meta name="color:Audio BG" content="#ff4040">
		<meta name="text:Disqus Shortname" content="" />
		<meta name="if:Show About In Nav" content="1"/>
		<meta name="if:Show Following In Nav" content="1"/>
		
		<style>
		/* custom colours */
		.grid .post_thumb .video{
			background-color:{color:Video BG};
		}
		.grid .post_thumb .regular,
		.grid .post_thumb .quote{    
			background-color:{color:Regular and Quote BG};			
		}       
		.grid .post_thumb .chat{
			background-color:{color:Chat BG};
		}         
		.grid .post_thumb .link{
			background-color:{color:Link BG};
		}           
		.grid .post_thumb .audio{
			background-color:{color:Audio BG};
		}
.regular img { max-width: 100&#37;; }
		{CustomCSS}
		</style>
    </head>
    <body class="cargo {block:IndexPage}index{/block:IndexPage}{block:PermalinkPage}perma{/block:PermalinkPage}">
	<div id="info" class="hide">
		{block:NextPage}
		<span class="next_page">{NextPage}</span>
        {/block:NextPage}       
	</div>
	<div id="loading"></div>
	<div id="debug"></div>
	<div id="main_column">
		<!--{block:IndexPage}-->
		<div class="list hide">
			<!--{block:Posts}-->
			<div class="post" id="{PostID}">
			<div class="gallery_hold"></div>
			<div class="inner{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
			{block:Regular}
                <div class="regular">
                    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                    <div class="copy">{Body}</div>
                </div>
            {/block:Regular}
			{block:Photo}
                <div class="photo">
                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
                    {block:Caption}
                    <div class="copy">{Caption}</div>
                    {/block:Caption}                  
                </div>
            {/block:Photo}
			{block:Video}
                <div class="video">
                    {Video-500}
                    {block:Caption}
                     <div class="copy">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Video}
  			{block:Photoset}
  				<div class="photoset">{Photoset-500}</div>
				{block:Caption}
				<div class="copy">{Caption}</div>
				{/block:Caption}
  			{/block:Photoset}
			{block:Quote}
			<div class="quote">
				<div class="the_quote">{Quote}</div>
			   	{block:Source}
					<div class="copy">&ndash; {Source}</div>
				{/block:Source}
			</div>
			{/block:Quote}
			{block:Audio}
			<div class="audio">
				<div class="album_info">
					{block:Artist}<span class="artist">{Artist}</span>{/block:Artist}&nbsp;&ndash;&nbsp;{block:TrackName}<span class="track">{TrackName}{/block:TrackName}
				</div>
				{block:AlbumArt}
					<div class="album_art"><img src="{AlbumArtURL}" /></div>
				{/block:AlbumArt}
				<div class="player">{AudioPlayerBlack}</div>
				{block:Caption}
	            <div class="copy">{Caption}{block:ExternalAudio}<p class="download"><a href="{ExternalAudioURL}">Download MP3</a></p>{/block:ExternalAudio}</div>
	            {/block:Caption}
			</div>
			{/block:Audio} 
			{block:Chat}
			<div class="chat">
				{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
				<div class="copy">
					<ul class="chat">
						{block:Lines}
						<li class="{Alt} user_{UserNumber}">
							{block:Label}
							<span class="chat_label">{Label}</span>
							{/block:Label}
							<span class="chat_line">{Line}</span>
						</li>
						{/block:Lines}
					</ul>
				</div>
			</div>
			{/block:Chat}
			{block:Link}
			<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
			{block:Description}
			<div class="copy">
				<span class="description">{Description}</span>
			</div>
			{/block:Description}
			{/block:Link}
			<div class="info">
				<p><a href="{Permalink}" class="date">{TimeAgo}</a>&nbsp;{block:NoteCount} <a href="{Permalink}#notes" class="notes">{NoteCountWithLabel}</a>{/block:NoteCount}{block:Photo}{block:HighRes} <a target="_blank" href="{PhotoURL-HighRes}" class="zoom_image">View Larger Image</a>{/block:HighRes}{/block:Photo}{block:IfDisqusShortname} <a href="{Permalink}#disqus_thread">view comments</a>{/block:IfDisqusShortname}</p>
			</div>
			</div><!-- /.inner -->       
			</div><!-- /.post -->  
			<!--{/block:Posts}-->    		
		</div>
		<!--{/block:IndexPage}-->
		<!--{block:IndexPage}-->
		<div id="entry"></div>
		<!--{/block:IndexPage}-->
		
		<div id="pages" class="hide list">
			 <!--{block:Posts}-->
				<div class="gallery_hold"></div>
				<div class="inner{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
				{block:Regular}
	                <div class="regular">
	                    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
	                    <div class="copy">{Body}</div>
	                </div>
	            {/block:Regular}
				{block:Photo}
	                <div class="photo">
	                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
	                    {block:Caption}
	                    <div class="copy">{Caption}</div>
	                    {/block:Caption}
	                </div>
	            {/block:Photo}  
				{block:Audio}                 
				<div class="audio">
					{block:AlbumArt}
						<div class="album_art"><img src="{AlbumArtURL}" /></div>
					{/block:AlbumArt}
					<div class="player">{AudioPlayerBlack}</div>
					{block:Caption}
		            <div class="copy">{Caption}{block:ExternalAudio}<p class="download"><a href="{ExternalAudioURL}">Download MP3</a></p>{/block:ExternalAudio}</div>
		            {/block:Caption}
				</div>
				{/block:Audio}
	            {block:Video}
	                <div class="video">
	                    {Video-500}
	                    {block:Caption}
	                     <div class="copy">{Caption}</div>
	                    {/block:Caption}
	                </div>
	            {/block:Video} 
	  			{block:Photoset}
	  				<div class="photoset">{Photoset-500}</div>
					{block:Caption}
					<div class="copy">{Caption}</div>
					{/block:Caption}
	  			{/block:Photoset}
				{block:Quote}
				<div class="quote">
					<div class="the_quote">{Quote}</div>
				   	{block:Source}
						<div class="copy">&ndash; {Source}</div>
					{/block:Source}
				</div>
				{/block:Quote}
				{block:Chat}
				<div class="chat">
					{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
					<div class="copy">
						<ul class="chat">
							{block:Lines}
							<li class="{Alt} user_{UserNumber}">
								{block:Label}
								<span class="chat_label">{Label}</span>
								{/block:Label}
								<span class="chat_line">{Line}</span>
							</li>
							{/block:Lines}
						</ul>
					</div>
				</div>
				{/block:Chat}
				{block:Link}
				<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
				{block:Description}
				<div class="copy">
					<span class="description">{Description}</span>
				</div>
				{/block:Description}
				{/block:Link}
				</div><!-- /.inner --> 
				<!--{/block:Posts}-->			
		</div>
		
		<!--{block:PermalinkPage}-->
		<div id="entry">
			<!--{block:Posts}-->
			<div class="gallery_hold"></div>
			<div class="inner{block:HasTags}{block:Tags} {Tag}{/block:Tags}{/block:HasTags}">
			{block:Regular}
                <div class="regular">
                    {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                    <div class="copy">{Body}</div>
                </div>
            {/block:Regular}
			{block:Photo}
                <div class="photo">
                    {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" class="the_photo" />{LinkCloseTag}
                    {block:Caption}
                    <div class="copy">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Photo}  
			{block:Audio}                 
			<div class="audio">
				{block:AlbumArt}
					<div class="album_art"><img src="{AlbumArtURL}" /></div>
				{/block:AlbumArt}
				<div class="player">{AudioPlayerBlack}</div>
				{block:Caption}
	            <div class="copy">{Caption}{block:ExternalAudio}<p class="download"><a href="{ExternalAudioURL}">Download MP3</a></p>{/block:ExternalAudio}</div>
	            {/block:Caption}
			</div>
			{/block:Audio}
            {block:Video}
                <div class="video">
                    {Video-500}
                    {block:Caption}
                     <div class="copy">{Caption}</div>
                    {/block:Caption}
                </div>
            {/block:Video} 
  			{block:Photoset}
  				<div class="photoset">{Photoset-500}</div>
				{block:Caption}
				<div class="copy">{Caption}</div>
				{/block:Caption}
  			{/block:Photoset}
			{block:Quote}
			<div class="quote">
				<div class="the_quote">{Quote}</div>
			   	{block:Source}
					<div class="copy">&ndash; {Source}</div>
				{/block:Source}
			</div>
			{/block:Quote}
			{block:Chat}
			<div class="chat">
				{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
				<div class="copy">
					<ul class="chat">
						{block:Lines}
						<li class="{Alt} user_{UserNumber}">
							{block:Label}
							<span class="chat_label">{Label}</span>
							{/block:Label}
							<span class="chat_line">{Line}</span>
						</li>
						{/block:Lines}
					</ul>
				</div>
			</div>
			{/block:Chat}
			{block:Link}
			<h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
			{block:Description}
			<div class="copy">
				<span class="description">{Description}</span>
			</div>
			{/block:Description}
			{/block:Link}
			<div class="info">
				<p>Posted <span class="date">{TimeAgo}</span>{block:HasTags} &amp; Filed under {block:Tags} <a href="{TagURL}">{Tag}</a>, {/block:Tags}{/block:HasTags}{block:PostNotes} <a href="#notes">{NoteCountWithLabel}</a>{/block:PostNotes}{block:Audio} {FormattedPlayCount} plays{/block:Audio}{block:Photo}{block:HighRes} <a target="_blank" href="{PhotoURL-HighRes}" class="zoom_image">View Larger Image</a>{/block:HighRes}{/block:Photo}</p>
			</div>
			</div><!-- /.inner --> 
			{block:PostNotes}
			<a name="notes"></a>
			<div class="notes_hold">
				<h4>Notes:</h4>
				{PostNotes}					
			</div>         
			{/block:PostNotes}
			<!--{/block:Posts}-->           
			{block:Permalink}  
			<div id="post_comments">
			<div id="disqus_thread">
			</div>
		    {/block:Permalink}
			</div><!-- /#post_comments -->
		</div><!-- /#entry --> 
			{block:IfDisqusShortname}
			<div id="commentary">
                {block:Permalink}
				<div id="disqus_thread"></div>
                <script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
                {/block:Permalink}
			</div>
            {/block:IfDisqusShortname}
		<!-- {/block:PermalinkPage}-->
		<!--{block:IndexPage}-->
  		<div class="line hide"></div>
		<div class="grid hide">
			<!--{block:Posts}-->
			{block:Photo}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image photo rounded">
					<div class="bg rounded" style="background-image:url('{PhotoURL-250}')"></div>
					<div class="icon"></div>
				</div>
			</div>
			{/block:Photo}
			{block:Video}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image video rounded">
					<div class="icon"></div>
				</div>
			</div>
            {/block:Video}
           	{block:Photoset}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image photoset rounded">
					<div class="thumbs rounded"></div>
					<div class="icon"></div>
				</div>
			</div>
           	{/block:Photoset}
			{block:Regular}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image regular rounded">
					<div class="inner">{block:Title}{Title}{/block:Title}</div>	 
				</div>
			</div>
			{/block:Regular} 
			{block:Quote}
			<div class="post_thumb" id="thumb_{PostID}">  
				<div class="image quote rounded">
					<div class="inner">"{Quote}"</div>						
				</div>
			</div>
			{/block:Quote}
			{block:Chat}
			<div class="post_thumb" id="thumb_{PostID}">  
				<div class="image chat rounded">
					<div class="inner">{block:Title}{Title}{/block:Title}</div>						
				</div>
			</div>
			{/block:Chat}
			{block:Link}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image link rounded">
					<div class="inner">{Name}</div>						
				</div>
			</div>
			{/block:Link}
			{block:Audio}
			<div class="post_thumb" id="thumb_{PostID}">
				<div class="image audio rounded">  
					{block:AlbumArt}
						<div class="bg rounded" style="background-image:url('{AlbumArtURL}')"></div>
					{/block:AlbumArt}
					<div class="inner">{block:Artist}{Artist}&nbsp;&ndash;&nbsp;{/block:Artist}{block:TrackName}{TrackName}<br />{/block:TrackName}
						{Caption}</div>						
				</div>
			</div>
			{/block:Audio}
			<!--{/block:Posts}-->
			<div class="clear_left"></div>
		</div><!-- /.grid -->
		<!--{block:IndexPage}-->
	</div>
	<div id="nav_list">
		<h1><a href="/">{Title}</a></h1>		
		<ul class="faint" id="main_nav">
			{block:HasPages}		
			{block:Pages}
			<li><a href="{URL}" class="rounded">{Label}</a></li>
			{/block:Pages}
			{/block:HasPages} 
			{block:IfShowAboutInNav}
			<li><a href="/#about" class="rounded">About</a></li>
			{/block:IfShowAboutInNav}
			{block:IfShowFollowingInNav}			
			<li><a href="/#following" class="rounded">Following</a></li>
			{/block:IfShowFollowingInNav}			
			<li><a href="/#search" class="rounded">Search</a></li> 
			<li><a href="/archive" class="rounded">Archive</a></li>
		</ul>        
		<!--{block:IndexPage}-->   		
		<ul id="view_options" class="faint">
			
		</ul> 
		<ul>
			{block:PreviousPage}
				<li><a href="{PreviousPage}" class="rounded">&#8592; Previous Page</a></li>
             {/block:PreviousPage}
             {block:NextPage}
				<li><a href="{NextPage}" class="rounded">Next page &#8594;</a></li>
             {/block:NextPage}
		</ul>
		<!--{/block:IndexPage}-->
		<!--{block:PermalinkPage}-->
		<ul class="faint">
			<li><a href="/" class="rounded">&#8592; Index</a></li>
		</ul>
		<br>
		<p>{block:Posts}Posted on {DayOfWeek} the {DayOfMonth}{DayOfMonthSuffix} of {Month} {Year} at {12HourWithZero}:{Minutes}{AmPm}{/block:Posts}</p>   
		<br>
		<!--{/block:PermalinkPage}-->
	</div>
	<div id="about" class="hide">
		<h2>About:</h2>
		<div class="copy">
			<p>{Description}</p>
		</div>
	</div>                     
	<div id="search" class="hide">
		<h2>Search:</h2>
		<div class="copy">
			<form action="/search" method="get" id="search_form">
			<input type="text" name="q" id="search_field" value="{SearchQuery}"/>
			</form>
		</div>
	</div> 
	{block:IfShowFollowingInNav}				
	<div id="following" class="hide">
		<h2>Following:</h2>
		<div class="following_grid">
		<div class="copy">
			{block:Following}
			{block:Followed}
				<div class="i_follow">
					<a class="image rounded" style="background-image:url('{FollowedPortraitURL-128}')" href="{FollowedURL}"></a>
					<div class="info">
						<a href="{FollowedURL}">{FollowedTitle}</a>
					</div>
				</div>
			{/block:Followed}
			{/block:Following}
			<div class="clear_left"></div>
		</div>
		</div>
	</div>
	{/block:IfShowFollowingInNav}				
	{block:IfDisqusShortname}
        <script type="text/javascript">
            //<![CDATA[
            (function() {
                var links = document.getElementsByTagName('a');
                var query = '?';
                for(var i = 0; i < links.length; i++) {
                    if(links[i].href.indexOf('#disqus_thread') >= 0) {
                        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
                    }
                }
                document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
            })();
            //]]>
        </script>
    {/block:IfDisqusShortname}
    </body>
</html>

According to the info when I Inspect Element, the credit DIV should be right after </script>

I’m more concerned about the big white area than this little ‘credit’ DIV but I just can’t see how I can get the colour BG to cover the whole page.

Hope someone can see what I can’t :slight_smile:
Thanks

2

I keep working on it after my post here and I’ve now got the background img as I wanted it.

So the only thing is how have they managed to get this ‘credit’ DIV and the links on the page? when the source code suggests that they’re not on the page?

Thanks

note edit: I know I could remove it by adding display:none to the credit css but I really would like to know how it can be on the page but not in the source code.

3

Hello Tezdread,

the credit div is added dynamically via Javascript and appended to your body.

Here’s the line:

function add_credit(){
    $("html body").append("<div id=\\"credit\\"><a href=\\"http://cargotheme.tumblr.com\\">Cargo Theme</a> by <a href=\\"http://jarredbishop.tumblr.com\\">Jarred Bishop</a>. Inspired by <a href=\\"http://cargocollective.com\\">Cargo</a></div>")
}

The bottom white space is due to you having a 200px bottom padding set on your body:


body{
    font-family:Helvetica, Arial, Verdana;
    color:#777777;
    font-size:12px;
    line-height:10px; 
    padding-bottom:200px;
    background: url('background.jpg') top left repeat #3d454d;
}
4

Hey kohoutek,

I didn’t think to look in the external js files! I was searching for ‘credit’ in the HTML \ CSS only…doh!

Thanks for your help :slight_smile: