Search jQuery

jQuery Forum

help with jquery masonry.

in Getting Started • 11 years ago

I am making a tumblr theme.When I go to the test-page(http://thephotologist.tumblr.com) it looks okey.But when I enter the customize page it doesn't look nice and some of the prototype posts doesnt fit well.This is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html lang="en">
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style type="text/css">
body{
height: 100%;
}
#container{
width: 1050px;
margin: auto auto auto auto;
position: relative;
}
#container .posts{
width: 1050px;
width: 1050px;
clear: both;
position: relative;
margin-left: auto;
margin-right: auto;
padding-top:15px;
}
#container .box{
width: 345px;
width:500px;
margin-left: 5px;
margin-left: 5px;
float: left;
margin-bottom: 30px;
margin-bottom: 30px;
position: relative;
}
#container .box img{
width:100%;
max-width: 100%;
border:0px;
}
.box:hover .back {
{block:indexpage}{/block:indexpage}z-index:1000;
}
.back {
margin-top:-30px;
width:100%;
opacity: 0;
z-index: 1000;
}
</style>
<script type="text/javascript" src="http://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
<script src="http://static.tumblr.com/thpaaos/lLwkowcqm/jquery.masonry.js"></script>
<script type="text/css">
$('.posts').masonry({
itemSelector: '.box'
})
</script>
<script src="http://static.tumblr.com/is5f0mm/JOdlrpvsh/four.txt" type="text/javascript"></script>
</head>
<body>
<h1>{Title}</h1>
{block:Description}
<div id="description">{Description}</p>
{/block:Description}
<div id="container">
<div class="posts">
{block:Posts}
<div class="box">
{block:Photo}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<div class="back"></div>
{/block:Photo}
{block:Text}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{body}
<div class="back"></div>
{/block:Text}
{block:Photoset}
{Photoset-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<div class="back"></div>
{/block:Photoset}
{block:Quote}
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
<div class="back"></div>
{/block:Quote}
{block:Link}
<a href="{URL}" {Target}>{Name}</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
<div class="back"></div>
</div>
{/block:Link}
{block:Video}
{Video-500}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<div class="back"></div>
{/block:Video}
{block:Chat}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<div class="chat">
{block:Lines}
<div class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</div>
{/block:Lines}
</div>
<div class="back"></div>
{/block:Chat}
{block:Audio}
{AudioPlayerBlack}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
<div class="back"></div>
{/block:Audio}
</div>
{/block:Posts}
</div>
</div>
</body>
</html>

And how it looks like in the customize-page:

http://static.tumblr.com/u4hrung/aZ1lzlgmg/screenshot1.jpg

I know very well html and css and a little javascript(a little!

)

Please spend some minutes to solve my problem..

thank you in advance!:)

Response title

Attachments

jQuery Forum

help with jquery masonry.

Statistics

Tags

Actions