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

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

    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/tu...-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!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is just a CSS thing ... try this in your CSS
    Code:
    .tumblr li {
        margin-bottom: 1em;
        margin-right: 10px;
        display: inline;
    }

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?!

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •