Making Ditto output horizontally

23 Posts

pdkga065 Reply #1, 16 years, 5 months ago

I need Ditto to output the list of pages 3 across before dropping to the next level. If that makes any sense. How would I go about doing this?

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 16 years, 5 months ago

Do it in the CSS. Using the default Ditto tpl:

.ditto_item {
    width: 33%;
    height: 200px;
    float: left;
}

Adjust that to account for borders and margins and padding as desired.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

360 Posts

jwmsales Reply #3, 16 years, 5 months ago

Awesome, Susan. To get this to work in all browsers use HTML similar to this:

<div class="user">
<div class="userInner">
(content here)
</div>
</div>

For the CSS keep what Susan put up and style the ’innerUser’ with padding, margins and background. This way it won’t break in any browsers (IE6, in particular - if you care!).

There are no boring projects. Only boring executions. ~ Etzkorn
www.impress-design.com

23 Posts

pdkga065 Reply #4, 16 years, 5 months ago

Thanks for your answers, but still having problems. Ditto puts everything in a column instead of going across, then down, across etc. Here’s what it looks like:

You said to use the default ditto template, I tried that but it didn’t work either and I really need to use my own template anyway
This is my html and Ditto call:

<h2>Albums:</h2>
<div class="ditto_item">
<ul>
[!Ditto? &parents=`15` &tpl= `Dittoalbumtemplate` &summarize =`6`<br />&paginate = `1` &paginateAlwaysShowLinks= `1`!]
</ul>
</div>
<p>Showing <strong>[+start+]</strong> - <strong>[+stop+]</strong> of <strong>[+total+]</strong> Albums | Page <strong>[+currentPage+]</strong> of <strong>[+totalPages+]</strong></p>
<div id="ditto_pages"> [+previous+] [+pages+] [+next+] </div>

This is my CSS, did what you told me:

ditto_item {
width: 33%;
height: 200px;
float: left;
}

Do you see any problems? Tell me if you need anymore information.

Thanks again

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 16 years, 5 months ago

Your image isn’t showing up for me; maybe it’s too big.

If you understand how CSS works, you’ll realize that Ditto isn’t "putting" anything anywhere. All Ditto is doing is spitting out HTML. It’s up to you, with your .css file, to "put" things where you want them.

Whatever tpl you are using, if you specify that the containing element for each block is more-or-less 1/3 of the width of the outer container, and float them left, they will line up horizontally. That’s what the "float: left" part does. The "width: 33%" part makes each one take up 1/3 of the available horizontal space. So after three of them are laid out, the fourth one drops down to the next row.

This is all a function of the browser following the instructions in your .css file.

Depending on your actual HTML structure, you’ll need to play with the CSS to get it the way you want it. I just gave a very basic general rule of how to get the layout you want.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

23 Posts

pdkga065 Reply #6, 16 years, 5 months ago

Alright thanks, there was a typo in my css. I fixed it then played with it for a while and got it to work.