lukeslog Posted June 16, 2011 Share Posted June 16, 2011 I've been searching for an answer for ages with no luck.My custom Tumblr theme. Is ALMOST perfect... But I've been going crazy with one error.In the content, where it holds my posts, there's a ton of space/gaps between some posts and it sucks.Might have something to do with the date. If there's anyway to fix this, to organize the posts as evenly and space efficient as possible, that'd be incredible.I wouldn't care if the posts are slightly out of chronological order.This is what the problem looks like.Heres some example source codeHere's the .css files usedI'm pretty sure the answer lies in editing the diaphanous.css file. I don't think anything else needs editing, but I could be wrong.If anyone could help; I'd be eternally grateful. Link to comment Share on other sites More sharing options...
lukeslog Posted June 16, 2011 Author Share Posted June 16, 2011 Bump for a miracle? Link to comment Share on other sites More sharing options...
MrFish Posted June 17, 2011 Share Posted June 17, 2011 If you can post a link I can probably find the problem very quickly with chrome's developer tools. I don't really feel like getting a tumblr account to test this. Not to sound rude or anything :\ Link to comment Share on other sites More sharing options...
lukeslog Posted June 17, 2011 Author Share Posted June 17, 2011 No, no problem! I only posted that stuff because I thought people would want to load it up into Dreamweaver or something; Not make a tumblr account and try it there.I should've posted my link anyway.http://lukeslog.tumblr.com/ Link to comment Share on other sites More sharing options...
lukeslog Posted June 19, 2011 Author Share Posted June 19, 2011 Bump :)Will the HTML gods answer my prayer? Link to comment Share on other sites More sharing options...
lukeslog Posted June 22, 2011 Author Share Posted June 22, 2011 Bump for great justice Link to comment Share on other sites More sharing options...
lukeslog Posted June 23, 2011 Author Share Posted June 23, 2011 Won't somebody help my poor website?! Think of all the space that's being wasted! The humanity! Link to comment Share on other sites More sharing options...
Ingolme Posted June 24, 2011 Share Posted June 24, 2011 There's no real way to fix your problem unless you can modify the HTML.One solution is to give each second post a class of "odd" and the other ones "even" <div class="post photo odd"></div><div class="post photo even"></div><div class="post photo odd"></div><div class="post photo even"></div><div class="post photo odd"></div><div class="post photo even"></div> Then just float the odd ones to the left and the even ones to the right. I'm not entirely sure if it would work, but I'm pretty sure it should. .odd { float: left; }.even { float: right; } Another solution is to have two columns: <div class="column1"> <div class="post photo"></div> <div class="post photo"></div></div><div class="column2"> <div class="post photo"></div> <div class="post photo"></div></div> .column1 { float: left; }.column2 { float: right; } Link to comment Share on other sites More sharing options...
lukeslog Posted June 25, 2011 Author Share Posted June 25, 2011 But good sir! I can in fact edit the HTML!I just thought the key would be in the styling sheet.The HTML can be found here http://pastebin.com/XB4JuMQBI couldn't get the code you gave to work. I copy and pasted it in the body section, what else do I do? Link to comment Share on other sites More sharing options...
Ingolme Posted June 25, 2011 Share Posted June 25, 2011 The code I gave you isn't to copy and paste, you're supposed to use the structure in your code.There's one problem which I already was thinking of: Your posts are automatically generated so there probably isn't a way to divide them into two sections or tell if they're even or odd. Link to comment Share on other sites More sharing options...
lukeslog Posted June 26, 2011 Author Share Posted June 26, 2011 :)There has to be a solution! Some kind of workaround.This blog is able to correctly do it.I went through their code to try to find what makes it work, but I can't find it. Could you take a look if you don't mind? Link to comment Share on other sites More sharing options...
Ingolme Posted June 26, 2011 Share Posted June 26, 2011 They're using absolute positioning, that's really complicated to work with. They're using Javascript to calculate the height, width and position of each box. If you disable Javascript you'll see all their posts in a single column. Link to comment Share on other sites More sharing options...
lukeslog Posted June 26, 2011 Author Share Posted June 26, 2011 Where can I get help with javascript then?And if possible, do you know which script of his is doing that?I have a lot of various skills in Photoshop, Flash, digital art, comics, animation, comedy writing.If someone were to help me with my problem, I'd be more than happy to offer my services. Link to comment Share on other sites More sharing options...
lukeslog Posted June 27, 2011 Author Share Posted June 27, 2011 Ok, so I found this javascript that does exactly what I need. http://masonry.desandro.com/It's the same script that other guy uses. I still can't get this to work though! Where do I correctly put it? Link to comment Share on other sites More sharing options...
lukeslog Posted June 29, 2011 Author Share Posted June 29, 2011 Halp Link to comment Share on other sites More sharing options...
Ingolme Posted June 29, 2011 Share Posted June 29, 2011 Why don't you check out the documentation of the library?If you know CSS selectors you should know how to work with this library. You just set the selectors to the elements you're going to use.http://masonry.desandro.com/demos/basic-single-column.htmlhttp://masonry.desandro.com/demos/basic-multi-column.htmlhttp://masonry.desandro.com/demos/tumblelog.html Link to comment Share on other sites More sharing options...
lukeslog Posted June 30, 2011 Author Share Posted June 30, 2011 I seriously for the life of me cannot get this to work.I am so desperate for help.It may be because I can't differentiate what's code, and what I have to replace and rename, and where. Link to comment Share on other sites More sharing options...
Ingolme Posted June 30, 2011 Share Posted June 30, 2011 It depends on what elements are on your page. "#container" would refer to the element with id="container" and ".post" would refer to all elements with "post" in their class attribute. You can change the column width by changing the columnWidth property.This code should work, but I'm not absolutely certain, since I haven't been able to see your page directly. $('#container').masonry({ itemSelector: '.post', columnWidth: 240}); Link to comment Share on other sites More sharing options...
lukeslog Posted July 2, 2011 Author Share Posted July 2, 2011 I tried that code, alone with replacing container with content, because I believe that's what I want to be affected by masonry; My container holds everything on the page.Is there any way for you to view my site/code you need? Can I send you files? Link to comment Share on other sites More sharing options...
lukeslog Posted July 3, 2011 Author Share Posted July 3, 2011 Seriously, I'd let you log in and risk having it stolen, I'm desperate.I am actually beginning to understand things a little though... What's so difficult is that the custom HTML you have to enter for tumblr doesn't work on anything like dreamweaver, they've got their own thing going. What's worse is that this makes testing change to the styling sheet very tedious and slow, and that's where I'm stuck I think.....Here's the Tumblr HTML I'd have to enter. I don't know why I didn't include this before...http://pastebin.com/EZZeU66c Link to comment Share on other sites More sharing options...
lukeslog Posted July 4, 2011 Author Share Posted July 4, 2011 I'll pay somebody to find a solution. Link to comment Share on other sites More sharing options...
lukeslog Posted July 5, 2011 Author Share Posted July 5, 2011 ? Easy money? Link to comment Share on other sites More sharing options...
lukeslog Posted July 7, 2011 Author Share Posted July 7, 2011 I don't know what I can do. Honestly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.