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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Tumblr posts with FLOAT function help!

    I don't really understand HTML/CSS code,
    My question is simple, this is my theme code :

    #entry {{block:ifshowshadows}-moz-box-shadow: 2px 2px 2px #eee; -webkit-box-shadow: 2px 2px 2px #eee; box-shadow: 2px 2px 2px #eee{/block:ifshowshadows} text-align:; background-color:{color: post background}; margin-left:5px; margin-bottom:15px; overflow:hidden; float:left; width:300px;
    {block:PermalinkPage}width:640px;{/block:PermalinkPage} height:100%; {block:PermalinkPage}height:100%;{/block:PermalinkPage} padding-left:4px; padding-right:4px; padding-top:4px; padding-bottom:4px;}
    #entry img {width:300px; {block:PermalinkPage}width:610px;{/block:PermalinkPage} overflow:hidden;}
    a img {border:none;}
    #entry:hover .permalink {opacity: 1;}
    And this is what I want :



    The height is not fixed but the width is fixed.
    Theres gaps between posts, how to remove the space?
    What do I have to do?
    I don't really care about posts order... But i dont want to have the height fixed...
    {block:Posts}

    {block:Text}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    {block:Title}<div class="title">{Title}</div>{/block:Title}
    <div style="margin-top:-5px;">{Body}</div>
    </div>
    {/block:Text}

    {block:Photo}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    {block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
    {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
    <img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}" width="420"/><div style="margin-top:-4px; margin-bottom:-4px;"></div>
    {block:IndexPage}</a>{/block:IndexPage}
    {block:PermalinkPage}{LinkCloseTag}
    {/block:PermalinkPage}
    </div>
    {/block:Photo}

    {block:Photoset}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    <div style="width:420px !important;">{Photoset-500}</div>
    {block:PermalinkPage}+{/block:PermalinkPage}
    {block:Ifshowcaptions}{Caption}{/block:Ifshowcaptions}
    </div>
    {/block:Photoset}

    {block:Quote}
    <div id="entry">
    <div class="quote"><span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span> "<i>{Quote}</i>"
    {block:Source}— <b>{Source}</b>{/block:Source}
    </div></div>
    {/block:Quote}

    {block:Link}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    <div class="h2"><a href="{URL}">{Name}</a></div>{blockescription}{Description}{/blockescription}
    </div>
    {/block:Link}

    {block:Chat}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    {block:Title}<i>{Title}</i>{/block:Title}<br>
    {block:Lines}{block:Label}<b>{Label}</b> {Line}<br>{/block:Label}{/block:Lines}
    </div>
    {/block:Chat}

    {block:Audio}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    <div class="audio">
    {AudioPlayerBlack}</div><br>
    <div style="padding:2px; font-size:10px; text-align:left;font-style:italic;">{block:TrackName}{TrackName} by {/block:TrackName}{block:Artist}{Artist}{/block:Artist}</div>
    {block:PermalinkPage}{block:ExternalAudio} <a href="{ExternalAudioURL}"> / download </a> </span>{/block:ExternalAudio}{/block:PermalinkPage}
    </div>
    {/block:Audio}

    {block:Answer}
    <div id="entry">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    <div class="answer"><u>{Asker}</u>: {Question}</div><br>
    <div style="margin-bottom:5px;">{Answer}</div> </div>
    {/block:answer}

    {block:Video}
    <div id="entry">
    <div class="video">
    <span class="permalink"><a href="{Permalink}"><i>Permalink</i> | {NoteCountWithLabel}</a></span>
    {Video-500}
    {block:Caption}{Caption}{/block:Caption}
    </div></div>
    {/block:Video}



    <center>{block:PermalinkPage}{block:Caption}<div style="margin-top:-5px;">{Caption}</div>{/block:Caption}{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}{block:HasTags} &middot; {block:Tags}<a href="TagURL">{Tag}</a>, {/block:Tags}{/block:hasTags}{/block:PermalinkPage}</center>
    {blockate}

    {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/{textisqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
    })();
    //]]>
    </script>
    {/block:IfDisqusShortname}

    {block:PostNotes}
    {PostNotes}
    {/block:PostNotes}

    {blockate}

    {/block:Posts}
    I heard about jquery masonry/vanilla masonry but I don't know how to use that and apply with my theme
    Last edited by leleoni; 05-14-2012 at 04:45 AM. Reason: additional info

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello leleoni,
    Floats are kind of hard to get to stack like that. It might be easier if you use a two column layout... something like this -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #fc6;
    }
    #container {
    	width: 850px;
    	margin: 30px auto;
    	background: #999;
    	overflow: auto;
    }
    #left {
    	width: 425px;
    	float: left;
    }
    #right {margin: 0 0 0 425px;}
    	#one, #two, #three, #four,
    	#five, #six, #seven {
    		width: 300px;
    		margin: 10px auto;
    		border: 5px solid #06f;
    		text-align: center;
    	}
    		#one {height: 75px;}
    		#two, #three, #five, six {height: 125px;}
    		#four {height: 250px;}
    		#seven {height: 225px;}
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="left">
                <div id="one">1</div>
                <div id="three">3</div>
                <div id="five">5</div>
                <div id="seven">7</div>
            <!--end left--></div>
            <div id="right">
                <div id="two">2</div>
                <div id="four">4</div>
                <div id="six">6</div>
            <!--end right--></div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    leleoni (05-15-2012)


  •  

    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
    •