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
    Apr 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Can't get this darn image to float (tumblr theme)

    Hi Guys,
    I've been trying forever to figure out why I have this blank space above the start of the body container in this custom tumblr. As best I can tell, it's because the image on the left isn't floated properly, so the body container div is starting just below it.

    Any ideas on how to remedy this? Theme below (originally adapted from Drifter Version 2.0). Thanks!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    
    
    
    <html>
        <head>
            <!--
                    Adapted from Drifter Version 2.0 (jon@fridayface.com) by Schuyler Null
                    -->
    
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <meta name="color:Highlight" content="#ffffff" />
                    <meta name="image:Header" content="0" />
                    <meta name="if:Larger Type" content="0"/>
                    <meta name="if:Sidebar fixes at top" content="1"/>
                    <meta name="if:Endless Scrolling" content="1"/>
                    <meta name="if:Show Date" content="0"/>
                    <meta name="if:Show Tags" content="0"/>
                    <meta name="image:BackgroundImage" content="http://static.tumblr.com/ybdgkw4/ffzkxsss6/bg-400-paper2.jpg"/>
    
            <title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
            <meta name="description" content="{MetaDescription}"/>
            <link rel="shortcut icon" href="{Favicon}"/>
      		<link rel="alternate" type="application/rss+xml" name="RSS" href="{RSS}"/>
    		<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
    
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    		{block:IfSidebarfixesattop}
    		<script type="text/javascript" src="http://static.tumblr.com/ahomusb/aIHl5l1tn/fixedsidebar.js"></script>
    		{/block:IfSidebarfixesattop}
    
    	<style class="text/css">
    
    	body {
    		background-color:#f8f8f8;
    		background-image:url({image:BackgroundImage});
    		margin: 0px;
    		padding: 0px;
    		width: 100%;
    		text-align: center;
    	}
    
    	html {
    		{block:IfNotLargerType}
                    font: 12px Georgia;
                    {/block:IfNotLargerType}
                    {block:IfLargerType}
    				font: 14px Georgia;
                    {/block:IfLargerType}
    		color: #000000;	
    	}
    	
    	a {
    		color: #6C6C6C;
    		text-decoration: underline;
    	}
    	
    	a:hover {
    		color: #E80046;     /* Pink highlight on grey background */
    		background-color: {color:Highlight};
    		text-decoration: none;
    	}
    	
    	#body_container {
    		margin-left: auto;
    		margin-right: auto;
    		width: 700px;
    		border: 0px solid #000;
    		text-align: left;
    	}
    
    	
    	#header {
    		text-align: right;
    		margin-top: 10px;
    		width: 700px;
    		max-width: 700px;
    		padding-top: 40px;  
    		/* add visibility: hidden if you want to hide header*/
    	}
    	
    	h1 {
    		font-family: 'Bevan', serif;
    		letter-spacing: 1px;
    		color: #235685;
    		width: 700px;
    	}
    	
    	#header a {
    		font-family: 'Bevan', serif;
    		font-size: 50px;
    		color: #235685;
    	}
    	
    	#avatar {
    		float: left;
    		clear: both;
    		padding-top: 50px;
    	}
    	
    	#sidebar {
    		float: left;
    		clear: both;
    		padding-top: 0px;
    	}
    
    		{block:IfSidebarfixesattop}
            .fixed {
            	position: fixed;
            	margin-top: 0px;
            	margin-left: 0px;
            }
    		{/block:IfSidebarfixesattop}
    	
    	#sidebar ul {
    		margin: 5px 0px 0px 0px; 
    		padding: 0px;
    		list-style: none;
    		text-transform: uppercase;
    		font: 11px Trebuchet MS;
    	}
    	
    	#sidebar li {
    		padding-top: 5px;
    		margin: 0px;
    	}
    	
    	#sidebar li a {
    		color: #000;
    		text-decoration: none;
    	}
    	
    	#sidebar a:hover {
    		text-decoration: none;
    		color: #235685;     /* Blue highlight on grey background */
    	}
    
    	#desc {
                    color: #000;
    	}
    	
    	#desc a {
    		color: #000;
    		text-decoration: underline;
    	}
    	
    	#desc a:hover {
    		color: #000;
    		background-color: {color:Highlight};
    		text-decoration: none;
    	}
    	
    	#search {
    		margin-top: 0px;
    	}
    
            form#search input {
    		{block:IfNotLargerType}
                    font: 14px Georgia;
                    width: 148px;
    				background: #235685;
    				color: #e6e6e4;
    				padding: 2px 2px 2px 6px;
    				margin-left: -1em;
    				-moz-border-radius: 5px;
    				border-radius: 5px;
    				border: 0;
            {/block:IfNotLargerType}
            {block:IfLargerType}
    				font: 16px Georgia;
                    width: 148px;
    				background: #235685;
    				color: #e6e6e4;
    				padding: 2px 2px 2px 6px;
    				margin-left: -1em;
    				-moz-border-radius: 5px;
    				border-radius: 5px;
    				border: 0;
            {/block:IfLargerType}
            }
    
    	form#search input:hover {
                    background: {color:Highlight};
    				color: #235685;
            }
    
    	form#search input:focus {
                    background: {color:Highlight};
                    width: 148px;
    				color: #235685;
            }
    	
    
    	#footer{
                    color: #6c6c6c;
    	}
    	
    	#footer a {
    		color: #6c6c6c;
    		text-decoration: underline;
    	}
    	
    	#footer a:hover {
    		color: #000;
    		background-color: {color:Highlight};
    		text-decoration: none;
    
            }
    	
    	#post_container {
    		margin: 0px;
    		float: right;
    		width: 520px;
    		padding-bottom: 30px;
    	}
    	
    	
    	#post {
    		width: 500px;
    		margin-top: 0px;
    		color: #000;
    		border-bottom: 1px solid #ccc;
    	}
    	
    	#notes, #notes a {
    		margin: 0px;
    		color: #6c6c6c;
    	}
    
    	#notes a:hover {
    		margin: 0px;
    		color: #E80046;     /* Pink highlight on grey background */
    		text-decoration: none;
    	}
    	
    	h3 {
    		font: 26px Trebuchet MS;
    		font-weight: bold;
    		color: #235685;
    		line-height: 1em;
    	}
    	
    	#chat ul {
    		list-style: none;
    		padding: 0px;
    		margin: 0px;
    		width: 500px;
    		text-align: left;
    	}
    	
    	#chat li {
    		padding: 2px;
    		background-color: #eee;
    		margin-top: 2px;
    	}
    	
    	#notes_page {
    		margin-top: 30px;
    		color: #000;
    	}
    	
    	#notes_page
    		color: #000;
    	}
    	
    	#notes_page a:hover {
    		color: {color:Highlight};
    	}
    	
    	#notes_page ol {
    		list-style: none;
    		padding: 0px;
    		margin: 0px;
    		width: 500px;
    	}
    	
    	#notes_page li {
    		padding: 2px;
    		background-color: #fff;
    		margin-top: 2px;
    	}
    	
    	#nav {
    		width: 500px;
    		margin-top: 50px;
    		height: 30px;
    		line-height: 30px;
    		
    	}
    	
    	#nav a {
    		text-decoration: none;
    		color: #000;
    	}
    	
    	#nav a:hover {
    		color: #E80046;
    	}
    	
    	#prev {
    		float:left;
    	}
    	
    	#next {
    		float:right;
    	}
    
    {CustomCSS}
    	</style>
    
    {block:IfEndlessScrolling}<script type="text/javascript" 
    src="http://static.tumblr.com/q0etgkr/mFbkoqlkr/tumblrautopager.js "></script>{/block:IfEndlessScrolling}
    
    <script type="text/javascript">
    
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-29036085-1']);
      _gaq.push(['_trackPageview']);
    
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsBy
        Name('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    
    </script>
    
    	</head>
    	<body>
    	<div id="body_container">
    		<div id="header">
            {block:IfHeaderImage}<a style="background-color:transparent" href="/"><img src="{image:Header}"/></a>{/block:IfHeaderImage}
            {block:IfNotHeaderImage}<a style="text-decoration: none;" href="http://schuylernull.com/">my web log.</a>{/block:IfNotHeaderImage}
        <script>
            $("h1").contents().stretch();
         </script>	
    		</div>
    		<div id="avatar">
    		<img src="https://lh4.googleusercontent.com/-fnn042d_NcA/T4dBURgnfpI/AAAAAAAADdU/N6dkno5NLNI/s128/avatar.png" style="float: left; clear: both;">
    		</div>
    		<div id="sidebar">
                    <span class="desc">{Description}</span>
    			<ul>
    {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
    				<li>{block:SubmissionsEnabled}<a href="/submit">Submit</a>{/block:SubmissionsEnabled}</li>
    				<li>{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}</li>
    				<li><a href="/archive">Archive</a></li>
    				<li><a href="{RSS}">RSS</a></li>
    				<li>
    		<form action="/search" method="get" id="search">
        		<input type="text" name="q" value="SEARCH" onfocus="value='{searchQuery}'" onblur="value='SEARCH'"/>
    
                    <input type="hidden" value="Search" />
    		</form></li>
    		
    			</ul>
    		<span id="footer">
    		</span>
    		</div>
    		
    		<div id="post_container">
    <div class= "autopagerize_page_element">
    			{block:Posts}
    			<div id="post">
    				{block:Text}                                                
    					{block:Title}<h3 style="font-style:italic; font-size: 21px">{Title}</h3>{/block:Title}
    					{Body}				
    				{/block:Text}
    				
    				{block:Photo}
    					{LinkOpenTag}<img src="{PhotoURL-500}" border="0" alt="{PhotoAlt}">{LinkCloseTag}
    					<p>
    					{block:Caption}{Caption}{/block:Caption}					
    				{/block:Photo}
    				
    				{block:Photoset}
    					{Photoset-500}
    					<p>
    
    					{block:Caption}{Caption}{/block:Caption}					
    				{/block:Photoset}
    				
    				{block:Quote}
    					<h3 style="font-style:italic; font-size: 21px">{Quote}</h3>
    					<p>
    					{block:Source}{Source}{/block:Source}					
    				{/block:Quote}
    				
    				{block:Link}
    					<h3><a href="{URL}" {Target}>{Name}</a></h3>
    					<p>
    					{block:Description}{Description}{/block:Description}					
    				{/block:Link}
    			
    				{block:Chat}
    					{block:Title}<h3>{Title}</h3>{/block:Title}
    					<div id="chat">
    
    					<ul>
    						{block:Lines}
    							<li>
    								{block:Label}{Label}{/block:Label}
    								{Line}
    							</li>
    						{/block:Lines}
    					</ul>
    					</div>
    					<p>					
    				{/block:Chat}
    				
    				{block:Audio}
    					{block:AlbumArt}<img src="{AlbumArtURL}" style="width:50px;height:50px;float:left;padding-right:10px;padding-bottom:10px;">{/block:AlbumArt}{AudioPlayerGrey}
    					<p>
    
    					{Caption}					
    				{/block:Audio}
    				
    				{block:Video}
    					{Video-500}
    					<p>
    					{Caption}					
    				{/block:Video}
    				
    				{block:Answer}
    					<h3>{Asker} asked: {Question}</h3>
    						{Answer}					
    				{/block:Answer}
    				
    <div id="notes">
    					<p>
    					{block:Date}{block:IfShowDate}<a href={Permalink}>{DayOfMonth} {ShortMonth} {Year}</a> / {/block:IfShowDate}{block:RebloggedFrom}Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a> with{/block:RebloggedFrom} {block:IfNotShowDate}<a href={Permalink}>{/block:IfNotShowDate}{NoteCountWithLabel}{block:IfNotShowDate}</a>{/block:IfNotShowDate}{block:IfShowTags}
                  {block:HasTags} / {block:Tags}<a href={TagUrl}>{Tag}</a>&nbsp;{/block:Tags}{/block:HasTags}{/block:IfShowTags}{/block:Date}</div>
    
    			</div>
    
    			{/block:Posts}
    </div>
    			{block:PermalinkPage}
    			<div id="notes_page">
              	{block:PostNotes}
                {PostNotes}
             	 {/block:PostNotes}
    			</div>
           		 {/block:PermalinkPage}
    
    <div id="nav">
    	<h3>
    		<span id="prev">{block:PreviousPage}
                    <a href="{PreviousPage}">&larr; NEWER</a>
                {/block:PreviousPage}
    		</span>
    	</h3>
    	<h3>
    		<span id="next">
                {block:NextPage}
                    <a href="{NextPage}">OLDER &rarr;</a>
                {/block:NextPage}
    		</span>
    	</h3>
    		</div>
    		</div>
    	</div>
    </html>
    	</body>

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    I believe it is because you are doing a clear:both on your avatar and sidebar divs.
    What might be better wrapping your content simliar to this.

    Code:
    <div class="container">
    <div class="left">
    Your avatar and sidebar would go here
    </div>
    <div class="right">
    All your other content would go here. 
    </div>
    </div>
    Where you have the content in a container.
    have class left floated left with a specific width
    have class right floated right with a specific width.

    And this should fix your problem.

    I think the only other way would be by not clearing both on avatar and sidebar,

    Let me know if this helps at all.

  • Users who have thanked aaronhockey_09 for this post:

    skyyaa (04-23-2012)

  • #3
    New to the CF scene
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Genius. The right container already existed essentially w/"post-container," so I just created one for the two elements on the left, removed all the extra clears, and it's working great. Thanks so much! Learning on the fly here...

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have the same problem, thi is the basecode of my theme, I don't know how can I fix this can you help me to?

    here's the code: HERE

  • #5
    Regular Coder
    Join Date
    Dec 2010
    Posts
    414
    Thanks
    22
    Thanked 55 Times in 55 Posts
    Quote Originally Posted by pilengero View Post
    I have the same problem, thi is the basecode of my theme, I don't know how can I fix this can you help me to?

    here's the code: HERE
    do you have a URL i can look at ?


  •  

    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
    •