SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DIV is there but not in Source Code?

    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

    Code:
    #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 ?

    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" 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">← Previous Page</a></li>
                 {/block:PreviousPage}
                 {block:NextPage}
    				<li><a href="{NextPage}" class="rounded">Next page →</a></li>
                 {/block:NextPage}
    		</ul>
    		<!--{/block:IndexPage}-->
    		<!--{block:PermalinkPage}-->
    		<ul class="faint">
    			<li><a href="/" class="rounded">← 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
    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Hello Tezdread,

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

    Here's the line:

    Code:
    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:
    Code CSS:
    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;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #4
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •