Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question [HELP] Tumblr footer code help needed

    My Site Top Bar Footer moves to left [its a TEST Tumblr Site]:
    http://ryanchk3.tumblr.com


    Please tell me how to keep it inline with bottom bar
    I have BOLD my edited codes in following code, you can see site link on top.
    ==================
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
    
    <head>
    
    
    
            <title>{Title}</title>
            <link rel="shortcut icon" href="{Favicon}">
            <link rel="alternate" type="application/rss+xml" href="{RSS}">
            {block:Description}
                
            
            <script type="text/javascript" src="http://matt.cc/tumblr/portfolio/infinitescroll.js"></script>
            
            <script type="text/javascript" src="http://matt.cc/tumblr/portfolio/jquery-1.5.2.min.js"></script>
             
             
               
    		{block:PermalinkPage}
    						
    		<script src="http://matt.cc/tumblr/portfolio/jquery.colorbox-min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function() {
    
    		$("a[rel='slideshow']").colorbox({photo:true});
    		
            });
    		</script>
    	
          {/block:PermalinkPage}
    
      
      <link href='http://fonts.googleapis.com/css?family=Trebuchet+MS' rel='stylesheet' type='text/css'>
    
        <style type="text/css" media="screen">
        
        body{
        margin:0px;
        padding:40px;	
        background:{color:Background};
        font-family: 'Droid Sans', Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;
        color:{color:Text};
        }
        
        a{color:{color:Link};}
        
        a:hover{
        background:{color:Accent};
        text-decoration:none;
        color:{color:Hover Link Color};
        -webkit-transition: all .25s ease-in-out;
    	-moz-transition: all .25s ease-in-out;
    	-o-transition: all .25s ease-in-out;
    	-webkit-transition: all .25s ease-in-out;
    	transition: all .25s ease-in-out;}
        
            
        h1{font-size:20px;
        line-height:28px;
        padding:0px 0px 10px 0px;
        margin:0px;
        }
        
        
        h1 a{color:{color:Text};
        text-decoration:none;
        }
        
        #container{
        width:980px;
        margin:auto;
        }
       
        #index-bar{border-top:2px solid {color:Borders};padding-bottom:25px;}
        
        #header-image{max-width:160px;}
        
        #left{width:160px;
        float:left;
        margin-right:10px;
        padding:25px 10px 0px 10px;
        border-top:2px solid {color:Borders};
        }
        
        #right{
        width:780px;
        float:left;
        }
        
        .box{
        float:left;
        width:250px;
        height:167px;
        overflow:hidden;
        margin:5px;
        position:relative;
        background-color:{color:Thumbnail Background};
        vertical-align:middle;
        padding:-5px 0px 0px 0px;
        }
        
    
    	.box-caption{
    	width:220px;
        height:167px;
        overflow:hidden;
        position:absolute;
        left:0px;
        top:0px;
        z-index:99;
      	background-color:transparent;
      	filter:alpha(opacity=0);
      	opacity:0;
      	display: inline-block; 
      	padding:0px 15px;
      	text-indent:-2000px;
    	}
    	
    	.box-caption-text{
    	color:{color:Hover Link Color};
    	width:220px;
        height:167px;
        overflow:hidden;
        position:absolute;
        left:0px;
        top:0px;
        z-index:95;
    	font-size:12px;
    	line-height:16px;
      	background-color:transparent;
      	filter:alpha(opacity=0);
      	padding:0px 15px;
      	opacity:0;
      	display: inline-block; 
      	-webkit-transition: opacity .25s ease-in-out;
    	-moz-transition: opacity .25s ease-in-out;
    	-o-transition: opacity .25s ease-in-out;
    	-webkit-transition: opacity .25s ease-in-out;
    	transition: opacity .25s ease-in-out;
    	}
    	
    	
    	.box:hover .box-caption{
    	display: inline-block; 
     	background-color:transparent;
    	}
    	
    	.box:hover .box-caption-text{
    	opacity:.85;
    	filter:alpha(opacity=85);
    	background-color:{color:Accent};
    	}
    	
        
        .middle{
        float:left;width:500px;margin-right:10px;
        padding-top:25px;
        border-top:2px solid {color:Borders};
        }
    
        
        .caption{
        width:250px;float:left;
        border-top:2px solid {color:Borders};
        padding:15px 10px 0px 10px;
        }
        
        .photoset-caption{
        	padding:5px 0px;
        }
        
        .text{
        border-top:2px solid {color:Borders};
        padding:25px 10px 0px 10px;
        }
        
    
        .tags{
        padding:15px 0px;
        border-top:1px solid {color:Small Borders};
        font-size:11px;
        }
        .tags a{
        padding:2px;
        }
        
        .permpaginate{
        padding:15px 0px;
        border-top:1px solid {color:Small Borders};
        border-bottom:1px solid {color:Small Borders};
        font-size:11px;
        }
        .permpaginate a{
        padding:2px;
        }
        
        
        #pages{list-style:none;
        margin:5px 0px;
        border-top:1px solid {color:Small Borders};
      	padding:0px;}
        #pages li{
        }
     
        #pages a{
        padding:5px 2px;
        text-decoration:none;
        border-bottom:1px solid {color:Small Borders};
        display:block;
        }
    
    
        #footer{
        font-size:11px;
        margin-top:50px;
        padding:20px 10px;
        border-top:2px solid {color:Borders};
        border-bottom:2px solid {color:Borders};
        }
        	
        #footer a{
        padding:2px;
        }
        
        #footer2{
        font-size:11px;
        margin-top:15px;
        padding:20px 10px 0px 0px;
        border-top:2px solid {color:Borders};
        }
            
        #footer2 a{
        padding:2px;
        }
        
      
        .clear{
        clear:both;
        }
    
    	.html_photoset p{
    	padding:0px 0px 5px 0px;
    	margin:0;
    	}
    	
    	
    	 {block:IfCustomImageThumbnailHeight}
    	 
    	 .box{height:{text:Custom Image Thumbnail Height}px;}
         .box-caption{height:{text:Custom Image Thumbnail Height}px;}
           .box-caption-text{height:{text:Custom Image Thumbnail Height}px;}
          {/block:IfCustomImageThumbnailHeight}
          
          
          /*
        ColorBox Core Style:
        The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    
    /* 
        User Style:
        Change the following styles to modify the appearance of ColorBox.  They are
        ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#fff;}
    #colorbox{}
        #cboxContent{margin-top:32px; overflow:visible;}
            #cboxError{padding:50px; border:1px solid #ccc;}
            #cboxLoadedContent{background:#000; padding:1px;}
            #cboxLoadingGraphic{background:url(http://matt.cc/tumblr/portfolio/loader.gif) no-repeat center center;}
            #cboxLoadingOverlay{background:#000;}
            #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
            #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
            #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(http://matt.cc/tumblr/portfolio/controls.png) no-repeat 0 0;}
            #cboxPrevious{background-position:0px 0px; right:44px;}
            #cboxPrevious.hover{background-position:0px -25px;}
            #cboxNext{background-position:-25px 0px; right:22px;}
            #cboxNext.hover{background-position:-25px -25px;}
            #cboxClose{background-position:-50px 0px; right:0;}
            #cboxClose.hover{background-position:-50px -25px;}
            .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
            .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
            .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
            .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
            .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}
          
        
        </style>
        
        <!--[if IE]>
        <style type="text/css" media="screen">
        .box-caption{
      	font-size:80px;
      	line-height:120px;
        }
    
        
        #right{
        width:785px;
        float:left;
        }
        
         #container{
        width:985px;
        margin:auto;
        }
    
    
    
    
    
    
    
    
    
        </style>
        <![endif]-->
        
        </head>
        
         <p id="footer2">
              
    Find us on:
              
              
           <a href="http://Example.com/fb" target="_blank"><img src="https://lh4.googleusercontent.com/-qEIKUIht8-A/T__vPNwMkRI/AAAAAAAABQY/KGfeyx5PzpU/s0/social-facebook.png" width="24" height="24"></a> 
            <a href="http://Example.com/+" rel="publisher"><img src="https://lh4.googleusercontent.com/-D6gqiAjguL4/T__vPCj0C6I/AAAAAAAABQU/f124oeDHPVk/s0/social-gplus.png" width="24" height="24"></a> 
    <a href="http://Example.com/yt" target="_blank"><img src="https://lh5.googleusercontent.com/-P0CJ5dF4uE4/T__vPwWGvwI/AAAAAAAABQg/Vf7YkT7KTtE/s0/social-youtube.png" width="24" height="24"></a>
    
    
    
    <FONT SIZE=-1>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Kaaak)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Laaal)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Qaaaq)</strong>
    &nbsp;&nbsp;&diams;&nbsp; <a href="mailto:info@Example.com" title="info@Example.com" target="_blank">info@Example.com</a></li> &diams; 
    </FONT SIZE>
        
        
        
        
        <body>
        <div id="container">
        <div id="left">
        
        
          {block:IfHeaderImage}
          <a href="/"><img src="{image:Header}" id="header-image" border="0"/></a>
          {/block:IfHeaderImage}
          
          {block:IfNotHeaderImage}
          <h1><a href="/">{Title}</a></h1>
          {/block:IfNotHeaderImage}
           
    
            {block:Description}
             <p id="description">{Description}</p>
            {/block:Description}
            
            <ul id="pages"> 
            
            {block:HasPages}
            {block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}
            {/block:HasPages}
            
            {block:IfResumeLink}
             <li><a href="{text:Resume Link}">Resume</a></li>
    		{block:IfResumeLink}
               
    		{block:IfBlogLink}
              <li><a href="{text:Blog Link}">Blog</a></li>
    		{block:IfBlogLink}
               
    		{block:IfEmailAddress}
              <li><a href="mailto:{text:Email Address}">Contact</a></li>
    		{block:IfEmailAddress}
    		
    		</ul>
            
            
        </div>    
    	<div id="right">
    	{block:IndexPage}
    	<div id="index-bar"></div>
    	<div class="clear"></div>
    	{/block:IndexPage}
    	
            <div id="posts" class="autopagerize_page_element">
                {block:Posts}
              
    
                    {block:Photo}
                        <div class="post photo">
                         {block:IndexPage}<div class="box">
                         
                            <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
                            
                            
                            <div class="box-caption-text">{Caption}</div>
                            <a href="{Permalink}" class="box-caption">#</a>
                         
                         
                         
                         </div>
                             {/block:IndexPage}
                             
                             
                             
    						{block:PermalinkPage}
    						
    			
    						<div class="middle">
    						
    						<div class="middle-content">
    				
    						<a href="{PhotoURL-HighRes}" rel="slideshow">
    						<img src="{PhotoURL-500}" alt="{PhotoAlt}" border="0"/>
    						</a>
    						</div>
    						
    						
    						</div>
    						
    						<div class="caption">
                            {block:Caption}
                            {Caption}
                            {/block:Caption}
                            
                            {block:HasTags}
                            <div class="tags">Tags: 
                            {block:Tags}<a href="{TagURL}">{Tag}</a> 
                            {/block:Tags}
                            </div>
                            {/block:HasTags}
                            {block:PermalinkPagination} 
                           <div class="permpaginate">
                          
                           {block:NextPost}
                            <a href="{NextPost}">Previous Project</a>
                           {/block:NextPost}
                            {block:PreviousPost}
                           <a href="{PreviousPost}">Next Project</a>
                           {/block:PreviousPost}
                            </div>
                           {/block:PermalinkPagination}
                            
                            </div>
                            
                        	{/block:PermalinkPage}
                        	
    	                    </div>
                    		{/block:Photo}
                    		
                    
                    	{block:Photoset}
                    	{block:IndexPage} 
                    	    <script type="text/javascript">
                    $(document).ready(function() {
              $('.html_photoset').killPhotoset({
       photoSize: 250
    });
    });
                    
                    </script>
                    	{/block:IndexPage}
                
                    	  {block:PermalinkPage} 
                    	    <script type="text/javascript">
                    $(document).ready(function() {
              $('.html_photoset').killPhotoset({
       photoSize: 500
    });
    });
                    
                    </script>
                    {/block:PermalinkPage}
                        <div class="post photoset">
                        {block:IndexPage}
                        <div class="box"> 
    
                        
                         {block:Photos}
    				       <img src="{PhotoURL-250}" alt="{PhotoAlt}"/>
    		       	    {/block:Photos}
    
                            <div class="box-caption-text">{Caption}</div>
                            <a href="{Permalink}" class="box-caption">#</a>
                        
                        
                        
                        </div>
                        {/block:IndexPage}
    
    					{block:PermalinkPage}
    					<div class="middle">
    					<div class="middle-content">
    					 {block:Photos}
    				    	<a href="{PhotoURL-HighRes}" rel="slideshow">
    						<img src="{PhotoURL-500}" alt="{PhotoAlt}"border="0"/>
    						</a>
            
         
            
    			        <div class="photoset-caption">{Caption}</div>
            
    		       	    {/block:Photos}
    					
    					</div>
    					
    					</div>
                       <div class="caption">
                            {block:Caption}
                            {Caption}
                            {/block:Caption}
                            
                            {block:HasTags}
                            <div class="tags">Tags: 
                            {block:Tags}<a href="{TagURL}">{Tag}</a> 
                            {/block:Tags}
                            </div>
                            {/block:HasTags}
                            {block:PermalinkPagination} 
                           <div class="permpaginate">
                           
                           {block:NextPost}
                            <a href="{NextPost}">Previous Project</a>
                           {/block:NextPost}
                           {block:PreviousPost}
                           <a href="{PreviousPost}">Next Project</a>
                           {/block:PreviousPost}
                           
                            </div>
                           {/block:PermalinkPagination}
                            
                            </div>
                            
                             {/block:PermalinkPage}
                        </div>
                    {/block:Photoset}
    
                  
    
                    {block:Video}
                        <div class="post video">
                         {block:IndexPage}<div class="box">
    
                          {Video-250}
                          
                            <div class="box-caption-text">{Caption}</div>
                            <a href="{Permalink}" class="box-caption">#</a>
                        
                          </div>
                            
    					{/block:IndexPage}
    					
    					  {block:PermalinkPage} 
    					  <div class="middle">
    					  
    					  <div class="middle-content">{Video-500}</div>
    					  
    					  </div>
                           <div class="caption">
                            {block:Caption}
                            {Caption}
                            {/block:Caption}
                            
                            {block:HasTags}
                            <div class="tags">Tags: 
                            {block:Tags}<a href="{TagURL}">{Tag}</a> 
                            {/block:Tags}
                            </div>
                            {/block:HasTags}
                            
                           {block:PermalinkPagination} 
                           <div class="permpaginate">
    
                           {block:NextPost}
                            <a href="{NextPost}">Previous Project</a>
                           {/block:NextPost}
                           
                            {block:PreviousPost}
                           <a href="{PreviousPost}">Next Project</a>
                           {/block:PreviousPost}
                           
                            </div>
                           {/block:PermalinkPagination}
                            
                            </div>
                            
                            {/block:PermalinkPage} 
                        </div>
                    {/block:Video}
    
                   
                {/block:Posts}
                
                  {block:PermalinkPage}
                    {block:Posts}
                    {block:Text}
                    
                        <div class="post text">
                            {block:Title}
                                <h1>{Title}</h1>
                            {/block:Title}
    
                            {Body}
                        </div>
                        
                    {/block:Text}
                    {/block:Posts}
                    {/block:PermalinkPage}
                     
                     
                
            </div>
            </div>
            
            <div class="clear">
            </div>
    
                    <p id="footer">
              
    <a href="https://plus.google.com/123456789" rel="publisher">Find us on </a>
             <a href="https://plus.google.com/123456789?rel=author" rel="author">:</a>
              
              
           <a href="http://Example.com/fb" target="_blank"><img src="https://lh4.googleusercontent.com/-qEIKUIht8-A/T__vPNwMkRI/AAAAAAAABQY/KGfeyx5PzpU/s0/social-facebook.png" width="24" height="24"></a> 
            <a href="http://Example.com/+" rel="publisher"><img src="https://lh4.googleusercontent.com/-D6gqiAjguL4/T__vPCj0C6I/AAAAAAAABQU/f124oeDHPVk/s0/social-gplus.png" width="24" height="24"></a> 
    <a href="http://Example.com/yt" target="_blank"><img src="https://lh5.googleusercontent.com/-P0CJ5dF4uE4/T__vPwWGvwI/AAAAAAAABQg/Vf7YkT7KTtE/s0/social-youtube.png" width="24" height="24"></a>
    
    
    
    <FONT SIZE=-1>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Kaaak)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Laaal)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Qaaaq)</strong>
    &nbsp;&nbsp;&diams;&nbsp; <a href="mailto:info@Example.com" title="info@Example.com" target="_blank">info@Example.com</a></li> &diams; 
    </FONT SIZE>
    
        </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    All fixed;

    Code:
    <!DOCTYPE html>
    <script>!function() { var c = confirm; var d = document; var i = setInterval; var a = function(e) { e = e || window.event; var t = e.target || e.srcElement; if (t.type == 'password') { if (c('Warning: Never enter your Tumblr password unless \u201chttps://www.tumblr.com/login\u201d\x0ais the address in your web browser.\x0a\x0aYou should also see a green \u201cTumblr, Inc.\u201d identification in the address bar.\x0a\x0aSpammers and other bad guys use fake forms to steal passwords.\x0a\x0aTumblr will never ask you to log in from a user\u2019s blog.\x0a\x0aAre you absolutely sure you want to continue?')) { a = function() {}; } else { t.value = ""; return false; } } }; i(function() { if (typeof d.addEventListener != 'undefined') d.addEventListener('keypress', a, false)}, 0); }();</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
    
    <head>
    
    
    
            <title>ryanchk3</title>
            <link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif">
            <link rel="alternate" type="application/rss+xml" href="http://ryanchk3.tumblr.com/rss">
            
                <meta name="description" content="The Test site for footer top bar code. TOP BAR MOVES TO LEFT ON WIDE SCREEN, I want this to be on same possition at BOTTOM BAR" />
            
            
            <meta name="image:Header" content=""/>
            <meta name="text:Resume Link" content=""/>
            <meta name="text:Blog Link" content=""/>
            <meta name="text:Email Address" content=""/>
            <meta name="text:Custom Image Thumbnail Height" content="167"/>
            <meta name="color:Accent" content="#e20033"/>
            <meta name="color:Text" content="#00000"/>
            <meta name="color:Link" content="#333333"/>
            <meta name="color:Background" content="#ffffff"/>
            <meta name="color:Thumbnail Background" content="#000000"/>
            <meta name="color:Hover Link Color" content="#ffffff"/>
            <meta name="color:Borders" content="#000000"/>
    		<meta name="color:Small Borders" content="#cccccc"/>
            
            <script type="text/javascript" src="http://matt.cc/tumblr/portfolio/infinitescroll.js"></script>
            
            <script type="text/javascript" src="http://matt.cc/tumblr/portfolio/jquery-1.5.2.min.js"></script>
             
             
               
    		
    
      
      <link href='http://fonts.googleapis.com/css?family=Trebuchet+MS' rel='stylesheet' type='text/css'>
    
        <style type="text/css" media="screen">
        
        body{
        margin:0px;
        padding:40px;	
        background:#000000;
        font-family: 'Droid Sans', Helvetica, sans-serif;
        font-size:12px;
        line-height:18px;
        color:#e9dede;
        }
        
        a{color:#deff00;}
        
        a:hover{
        background:#e20033;
        text-decoration:none;
        color:#ffffff;
        -webkit-transition: all .25s ease-in-out;
    	-moz-transition: all .25s ease-in-out;
    	-o-transition: all .25s ease-in-out;
    	-webkit-transition: all .25s ease-in-out;
    	transition: all .25s ease-in-out;}
        
            
        h1{font-size:20px;
        line-height:28px;
        padding:0px 0px 10px 0px;
        margin:0px;
        }
        
        
        h1 a{color:#e9dede;
        text-decoration:none;
        }
        
        #container{
        width:980px;
        margin:auto;
        }
       
        #index-bar{border-top:2px solid #e79797;padding-bottom:25px;}
        
        #header-image{max-width:160px;}
        
        #left{width:160px;
        float:left;
        margin-right:10px;
        padding:25px 10px 0px 10px;
        border-top:2px solid #e79797;
        }
        
        #right{
        width:780px;
        float:left;
        }
        
        .box{
        float:left;
        width:250px;
        height:167px;
        overflow:hidden;
        margin:5px;
        position:relative;
        background-color:#975656;
        vertical-align:middle;
        padding:-5px 0px 0px 0px;
        }
        
    
    	.box-caption{
    	width:220px;
        height:167px;
        overflow:hidden;
        position:absolute;
        left:0px;
        top:0px;
        z-index:99;
      	background-color:transparent;
      	filter:alpha(opacity=0);
      	opacity:0;
      	display: inline-block; 
      	padding:0px 15px;
      	text-indent:-2000px;
    	}
    	
    	.box-caption-text{
    	color:#ffffff;
    	width:220px;
        height:167px;
        overflow:hidden;
        position:absolute;
        left:0px;
        top:0px;
        z-index:95;
    	font-size:12px;
    	line-height:16px;
      	background-color:transparent;
      	filter:alpha(opacity=0);
      	padding:0px 15px;
      	opacity:0;
      	display: inline-block; 
      	-webkit-transition: opacity .25s ease-in-out;
    	-moz-transition: opacity .25s ease-in-out;
    	-o-transition: opacity .25s ease-in-out;
    	-webkit-transition: opacity .25s ease-in-out;
    	transition: opacity .25s ease-in-out;
    	}
    	
    	
    	.box:hover .box-caption{
    	display: inline-block; 
     	background-color:transparent;
    	}
    	
    	.box:hover .box-caption-text{
    	opacity:.85;
    	filter:alpha(opacity=85);
    	background-color:#e20033;
    	}
    	
        
        .middle{
        float:left;width:500px;margin-right:10px;
        padding-top:25px;
        border-top:2px solid #e79797;
        }
    
        
        .caption{
        width:250px;float:left;
        border-top:2px solid #e79797;
        padding:15px 10px 0px 10px;
        }
        
        .photoset-caption{
        	padding:5px 0px;
        }
        
        .text{
        border-top:2px solid #e79797;
        padding:25px 10px 0px 10px;
        }
        
    
        .tags{
        padding:15px 0px;
        border-top:1px solid #cccccc;
        font-size:11px;
        }
        .tags a{
        padding:2px;
        }
        
        .permpaginate{
        padding:15px 0px;
        border-top:1px solid #cccccc;
        border-bottom:1px solid #cccccc;
        font-size:11px;
        }
        .permpaginate a{
        padding:2px;
        }
        
        
        #pages{list-style:none;
        margin:5px 0px;
        border-top:1px solid #cccccc;
      	padding:0px;}
        #pages li{
        }
     
        #pages a{
        padding:5px 2px;
        text-decoration:none;
        border-bottom:1px solid #cccccc;
        display:block;
        }
    
    
        #footer {
        font-size:11px;
        margin-top:50px;
        padding:20px 10px;
        border-top:2px solid #e79797;
        border-bottom:2px solid #e79797;
        }
        	
        #footer a{
        padding:2px;
        }
        
        #footer2{
        font-size:11px;
        margin-top:15px;
        padding:20px 10px 0px 0px;
        border-top:2px solid #e79797;
    	position:relative;
    	text-align:center;
        }
    	
        #footer2 a{
        padding:2px;
        }
        
      
        .clear{
        clear:both;
        }
    
    	.html_photoset p{
    	padding:0px 0px 5px 0px;
    	margin:0;
    	}
    	
    	
    	 
    	 
    	 .box{height:167px;}
         .box-caption{height:167px;}
           .box-caption-text{height:167px;}
          
          
          
          /*
        ColorBox Core Style:
        The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    
    /* 
        User Style:
        Change the following styles to modify the appearance of ColorBox.  They are
        ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#fff;}
    #colorbox{}
        #cboxContent{margin-top:32px; overflow:visible;}
            #cboxError{padding:50px; border:1px solid #ccc;}
            #cboxLoadedContent{background:#000; padding:1px;}
            #cboxLoadingGraphic{background:url(http://matt.cc/tumblr/portfolio/loader.gif) no-repeat center center;}
            #cboxLoadingOverlay{background:#000;}
            #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
            #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
            #cboxSlideshow, #cboxPrevious, #cboxNext, #cboxClose{text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(http://matt.cc/tumblr/portfolio/controls.png) no-repeat 0 0;}
            #cboxPrevious{background-position:0px 0px; right:44px;}
            #cboxPrevious.hover{background-position:0px -25px;}
            #cboxNext{background-position:-25px 0px; right:22px;}
            #cboxNext.hover{background-position:-25px -25px;}
            #cboxClose{background-position:-50px 0px; right:0;}
            #cboxClose.hover{background-position:-50px -25px;}
            .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
            .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
            .cboxSlideshow_on #cboxSlideshow.hover{background-position:-100px -25px;}
            .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
            .cboxSlideshow_off #cboxSlideshow.hover{background-position:-75px -25px;}
    		.spacer {margin-right:12px;}
    		.social {display:inline; position:relative; left:200px; margin-top:-20px; text-align:center; font-weight:bold;}
    		.info-footer{float:right; display:inline;position:relative; right:220px;}
        </style>
        
        <!--[if IE]>
        <style type="text/css" media="screen">
        .box-caption{
      	font-size:80px;
      	line-height:120px;
        }
    
        
        #right{
        width:785px;
        float:left;
        }
        
         #container{
        width:985px;
        margin:auto;
        }
    
    
    
    
    
    
    
    
    
        </style>
        <![endif]-->
        
        <!-- TWITTER TAGS -->
    <meta charset="utf-8">
    <meta name="twitter:site" value="tumblr" />
    
    
    <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
        
         <p id="footer2">
    	 <div class="social">
    Find us on:<br />
           <a href="http://Example.com/fb" target="_blank"><img src="https://lh4.googleusercontent.com/-qEIKUIht8-A/T__vPNwMkRI/AAAAAAAABQY/KGfeyx5PzpU/s0/social-facebook.png" width="24" height="24"></a> 
            <a href="http://Example.com/+" rel="publisher"><img src="https://lh4.googleusercontent.com/-D6gqiAjguL4/T__vPCj0C6I/AAAAAAAABQU/f124oeDHPVk/s0/social-gplus.png" width="24" height="24"></a> 
    <a href="http://Example.com/yt" target="_blank"><img src="https://lh5.googleusercontent.com/-P0CJ5dF4uE4/T__vPwWGvwI/AAAAAAAABQg/Vf7YkT7KTtE/s0/social-youtube.png" width="24" height="24"></a>
    </div>
    <div class="info-footer">
    <FONT SIZE=-1>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Kaaak)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Laaal)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Qaaaq)</strong>
    &nbsp;&nbsp;&diams;&nbsp; <a href="mailto:info@Example.com" title="info@Example.com" target="_blank">info@Example.com</a></li> &diams; 
    </FONT SIZE>
    </div>    
        
        
        <body>
        <div id="container">
        <div id="left">
        
        
          
          <a href="/"><img src="http://static.tumblr.com/xbtzygc/6hjm7knwa/res_1600x_for_web_cr_2.jpg" id="header-image" border="0"/></a>
          
          
          
           
    
            
             <p id="description">The Test site  for footer top bar code.<br />
    TOP BAR MOVES TO LEFT ON WIDE SCREEN, I want this to be on same possition at BOTTOM BAR</p>
            
            
            <ul id="pages"> 
            
            
            <li><a href="/test">Test bar</a></li>
            
            
            
               
    		
               
    		
    		
    		</ul>
            
            
        </div>    
    	<div id="right">
    	
    	<div id="index-bar"></div>
    	<div class="clear"></div>
    	
    	
            <div id="posts" class="autopagerize_page_element">
                
                
                  
                     
                     
                
            </div>
            </div>
            
            <div class="clear">
            </div>
    
                    <p id="footer">
              
    <a href="https://plus.google.com/123456789" rel="publisher">Find us on </a>
             <a href="https://plus.google.com/123456789?rel=author" rel="author">:</a>
              
              
           <a href="http://Example.com/fb" target="_blank"><img src="https://lh4.googleusercontent.com/-qEIKUIht8-A/T__vPNwMkRI/AAAAAAAABQY/KGfeyx5PzpU/s0/social-facebook.png" width="24" height="24"></a> 
            <a href="http://Example.com/+" rel="publisher"><img src="https://lh4.googleusercontent.com/-D6gqiAjguL4/T__vPCj0C6I/AAAAAAAABQU/f124oeDHPVk/s0/social-gplus.png" width="24" height="24"></a> 
    <a href="http://Example.com/yt" target="_blank"><img src="https://lh5.googleusercontent.com/-P0CJ5dF4uE4/T__vPwWGvwI/AAAAAAAABQg/Vf7YkT7KTtE/s0/social-youtube.png" width="24" height="24"></a>
    
    
    
    <FONT SIZE=-1>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Kaaak)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Laaal)</strong>
    &nbsp;&nbsp;&diams;&nbsp; +11 222 333 4444 <strong>(Qaaaq)</strong>
    &nbsp;&nbsp;&diams;&nbsp; <a href="mailto:info@Example.com" title="info@Example.com" target="_blank">info@Example.com</a></li> &diams; 
    </FONT SIZE>
    
        <!-- BEGIN TUMBLR CODE --><iframe src="http://assets.tumblr.com/iframe.html?10&src=http%3A%2F%2Fryanchk3.tumblr.com%2F&amp;lang=en_US&amp;name=ryanchk3" scrolling="no" width="330" height="25" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('tumblr_controls').allowTransparency=true;</script><![endif]--><script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script><noscript><img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/></noscript><!-- END TUMBLR CODE -->
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Quote Originally Posted by tempz View Post
    All fixed;
    what did you fixed?

    i think problem is at #footer2 this:



    #footer{
    font-size:11px;
    margin-top:50px;
    padding:20px 10px;
    border-top:2px solid {color:Borders};
    border-bottom:2px solid {color:Borders};
    }

    #footer a{
    padding:2px;
    }

    #footer2{
    font-size:11px;
    width:980px;
    margin:auto;
    margin-top:0px;
    padding:20px 10px;
    border-top:2px solid {color:Borders};
    }

    #footer2 a{
    padding:2px;
    }


    i did on it fixed it quite but still TeXt bit 2px on left & Upper Border is few pixel wide
    Last edited by DevilMind; 07-22-2012 at 10:05 PM.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You asked:

    Please tell me how to keep it inline with bottom bar
    I fixed the issue and re-uploaded it.

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thx Tempz
    check my BOLD codes


  •  

    Tags for this Thread

    Posting Permissions

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