...

View Full Version : please - how do you get API/JSON feed to list horizontal, not vertical?!



christianp
09-18-2011, 09:34 PM
I want to embed my Tumblr posts on my website...

I've got a 'tumblr badge' that grabs the JSON code... (http://robertnyman.com/2008/09/19/tumblrbadge-a-tumblr-badge-script/)

... but it lists all the grabbed tumblr posts vertically down the page - does anyone know how can I instead get the posts to list horizontally in my website, please?

Thanks!

devnull69
09-19-2011, 02:50 PM
This is just a CSS thing ... try this in your CSS


.tumblr li {
margin-bottom: 1em;
margin-right: 10px;
display: inline;
}

christianp
09-20-2011, 05:06 PM
unfortunately it's just it's still falling vertically, and not aligning to the right...


<div id="apDiv1"><script type="text/javascript" src="http://XXXXX.tumblr.com/js"></script></div>

#apDiv1 {
position:relative;
width:854px;
height:469px;
z-index:1;
left: 200px;
top: 83px;
margin-bottom: 1em;
margin-right: 10px;
display:inline;
}


what am i doing wrong?!

devnull69
09-20-2011, 06:48 PM
You'll have to follow my advice literally

The destination list will have the class "tumblr". This is most probably generated by the script and will need the exact CSS code mentioned above.

christianp
09-20-2011, 07:28 PM
Okay - so it aligned the first two posts horizontally! (wow - many thanks - that was a headache!!)

BUT - how do I get it to align 10 tumblr posts horizontally, please? (I'm guessing something reasonably simple with <li> but I've everything I've tried hasn't worked...)

... code as is now :


.tumblr {
position:absolute;
width:2000px;
height:1000px;
z-index:1;
left: 122px;
top: 162px;
}
.tumblr li {
margin-bottom: 1em;
margin-right: 10px;
width:200%;
display: inline;
}


<div class="tumblr">
<li>
<script type="text/javascript" src="http://XXXX.tumblr.com/js"></script>
</li>
</div>


Thanks!

devnull69
09-20-2011, 11:05 PM
As far as I understand the script, you won't have to create neither the div nor any <li> yourself ... it should all be done by the script automatically. Just add the script tag to your page and the result will be an <ul> unordered list with <li> items. The <ul> should automatically have the class "tumblr" and the CSS will apply.

christianp
09-20-2011, 11:57 PM
thanks for all the help - I found the solution : use "float:left" instead... cheers!!

.tumblr {
position:absolute;
width:2000px;
height:1000px;
z-index:1;
left: 122px;
top: 162px;
}
.tumblr li {
margin-bottom: 1em;
margin-right: 10px;
width:200%;
float:left;
}


<div class="tumblr">
<li>
<script type="text/javascript" src="http://XXXX.tumblr.com/js"></script>
</li>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum