CODEWITHSUNDEEP
htmlthemeslineblogstumblr
Hoboway
Hoboway

Reputation: 1

Tumblr horizontal theme forging

I started to build a Tumblr theme from nothing and wanted to make it a horizontal scrollable one.

I got that far to create the columns for my posts, yet from now on i can't bend them to lay horizontally instead of vertically.

Please help me with ideas, and hotfixes, since im a beginer.

Site: http://geniusite.tumblr.com/ Full code: http://pastebin.com/Wdw7vp2v

Upvotes: 0

Views: 685

Answers (1)

mikedidthis
mikedidthis

Reputation: 4897

The way your HTML is structured makes this a really hard layout to achieve.

Ideally you need to group all elements related to each post (Photo, Caption etc). Based on your current code, this would be more fitting:

{block:Posts}
<div class="post">
{block:Photo}
    <div class="left">
        <img src="{PhotoURL-HighRes}" width="800px" height="495" alt="{PhotoAlt}"/>
    </div>
    <div class="right">
    {block:Caption}
        {Caption}
    {/block:Caption}
    </div>
{/block:Photo}
</div>
{/block:Posts}

As for achieving the layout, it seems that using display:table / table-row / table-cell is the optimal of the solutions out there (it doesn't require any fixed widths, javascript etc). You can read more about various solutions to the horizontal layout: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

I quickly put together a little demo, using the table solution: http://jsfiddle.net/mikedidthis/v4xdR/

Upvotes: 1

Related Questions