Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page [HELP] Tumblr footer code help needed

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-22-2012, 08:23 PM   PM User | #1
DevilMind
New to the CF scene

 
Join Date: Jul 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
DevilMind is an unknown quantity at this point
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>
DevilMind is offline   Reply With Quote
Old 07-22-2012, 09:47 PM   PM User | #2
tempz
Regular Coder

 
Join Date: Jul 2012
Location: London
Posts: 436
Thanks: 4
Thanked 80 Times in 80 Posts
tempz is an unknown quantity at this point
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>
tempz is offline   Reply With Quote
Old 07-22-2012, 09:50 PM   PM User | #3
DevilMind
New to the CF scene

 
Join Date: Jul 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
DevilMind is an unknown quantity at this point
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..
DevilMind is offline   Reply With Quote
Old 07-22-2012, 10:04 PM   PM User | #4
tempz
Regular Coder

 
Join Date: Jul 2012
Location: London
Posts: 436
Thanks: 4
Thanked 80 Times in 80 Posts
tempz is an unknown quantity at this point
You asked:

Quote:
Please tell me how to keep it inline with bottom bar
I fixed the issue and re-uploaded it.
tempz is offline   Reply With Quote
Old 07-22-2012, 10:07 PM   PM User | #5
DevilMind
New to the CF scene

 
Join Date: Jul 2012
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
DevilMind is an unknown quantity at this point
thx Tempz
check my BOLD codes
DevilMind is offline   Reply With Quote
Reply

Bookmarks

Tags
code, css, html, tumblr

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 03:52 PM.
Advertisement
Log in to turn off these ads.