[SOLVED] Horizontal rows

437 Posts

distant_smile Reply #1, 12 years, 4 months ago

I have recently added a 'Latest articles' section to my homepage. It returns a pagetitle link and a thumbnail image. My call is:

<div id="Latestarticles"><h2>Latest Articles</h2>

<ul>
[[!getPage@newsPaging? 
&elementClass=`modSnippet` 
&element=`getResources` 
&tpl=`Fact_images_home` 
&limit=`4` 
&includeContent=`1` 
&parents=`28,32`
&depth=`3` 
&includeTVs=`1`
&sortby=`{"publishedon":"ASC"}`
]]
</ul>



</div>

and my chunk for Facts_image_home is:

<div class="post-[[+id]] post hentry category-latest-news tag-tag3 tag-tag5 tag-tag7" id="post-[[+id]]">


</div>
<div class="entry">
<h4><a href="[[~[[+id]]]]" rel="bookmark" title="Permanent Link to [[+pagetitle]]">[[+pagetitle]]</a></h4>
<a href="[[~[[+id]]]]"><img class="alignleft" title="[[+tv.Factfile_title]]" src="[[+tv.Fact1:phpthumbof=`w=100&h=100&zc=1`]]" alt="" /></a>
</div>
<br></br>

The only issue I have is that the results appear on top of each other. I ammended the CSS to include flaot:left and position:relative but it didn't seem to change it. I expect it's something obvious but I just can't see it?
DS [ed. note: distant_smile last edited this post 12 years, 4 months ago.]

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 12 years, 4 months ago

Get rid of the br tags, they are preventing your blocks from floating.

You need each block to be in a container, maybe a div, with a classname such as "newsblock".

In your CSS you'll have something like

.newsblock {
    width: 25%; 
    float:left;
}

Watch your margins and padding, as they will have an effect on the width of each block, so they may or may not still fit in a row.

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

437 Posts

distant_smile Reply #3, 12 years, 4 months ago

Ok, so my call is within the div 'Latestarticles'. My images call (in my chunk is in div 'entry'. Would I then create a div class within this div?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 12 years, 4 months ago

Each block that you want floated needs to be in its own container, and the containers need to have a common classname.

I can't really be more specific than that without actually seeing what you are trying to do. I'm not a good enough designer to be able to "see" it in my head.

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

437 Posts

distant_smile Reply #5, 12 years, 4 months ago

Sorry I'm not making it easy, here is the link:

http://revolution.pawsforwildlife.co.uk//index.php?id=1

As you will see I have the Latest Articles header with the two returned links underneath. My chunk collects the pagetitle and a thumbnail image of a TV in the page.

When I view the page source it appears a div class is automatically assigned to the images, know as:

<img class="alignleft" title="" src="/assets/components/phpthumbof/cache/Lynx%20lynx%20wrangeli%20(33).4c0b17caecd3f6db5e765342cba104151.jpg" alt="">

It creates a seperate div class for each image, albeit both named 'alignleft'

my align left css is as follows:

img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
}


.alignleft {
    float: left;

I'm not sure why it is not working, as the css is set to float:left already?
Regards
DS

p.s please note the images and pagetitles do match (even though they are not what it says), they are purely for testing !

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 12 years, 4 months ago

Ok. First, I'd run this through the W3C validator and get it to validate.

Why do you have those UL tags enclosing the blocks? You're not using a list.

Here is a single block:

<div class="post-31 post hentry category-latest-news tag-tag3 tag-tag5 tag-tag7" id="post-31"></div>

<div class="entry">
<h4><a href="http://revolution.pawsforwildlife.co.uk//index.php?id=31" rel="bookmark" title="Permanent Link to Black Bear"><cufon style="width: 48px; height: 22px;" alt="Black " class="cufon cufon-canvas"><canvas style="width: 77px; height: 23px; top: 0px; left: -3px;" height="23" width="77"></canvas><cufontext>Black </cufontext></cufon><cufon style="width: 37px; height: 22px;" alt="Bear" class="cufon cufon-canvas"><canvas style="width: 64px; height: 23px; top: 0px; left: -3px;" height="23" width="64"></canvas><cufontext>Bear</cufontext></cufon></a></h4>
<a href="http://revolution.pawsforwildlife.co.uk//index.php?id=31"><img class="alignleft" title="" src="Pawsforwildlife.co.uk_files/Lynx%2520lynx%2520wrangeli%252033.jpg" alt=""></a>
</div>

There are two divs, one is empty, one has the class "entry". I don't know what that empty div container is for. Is it supposed to enclose the entire block, like this?

<div class="post-31 post hentry category-latest-news tag-tag3 tag-tag5 tag-tag7" id="post-31">
<div class="entry">
<h4><a href="http://revolution.pawsforwildlife.co.uk//index.php?id=31" rel="bookmark" title="Permanent Link to Black Bear"><cufon style="width: 48px; height: 22px;" alt="Black " class="cufon cufon-canvas"><canvas style="width: 77px; height: 23px; top: 0px; left: -3px;" height="23" width="77"></canvas><cufontext>Black </cufontext></cufon><cufon style="width: 37px; height: 22px;" alt="Bear" class="cufon cufon-canvas"><canvas style="width: 64px; height: 23px; top: 0px; left: -3px;" height="23" width="64"></canvas><cufontext>Bear</cufontext></cufon></a></h4>
<a href="http://revolution.pawsforwildlife.co.uk//index.php?id=31"><img class="alignleft" title="" src="Pawsforwildlife.co.uk_files/Lynx%2520lynx%2520wrangeli%252033.jpg" alt=""></a>
</div><!-- end entry -->
</div><!-- end post block -->

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

1,572 Posts

Paulp Reply #7, 12 years, 4 months ago

in styles.css change:

.entry {
padding: 10px 0 2px;
clear: both;
float: left;
}

To:

.entry {
padding: 10px 0 2px;
float: left;
}

☆ A M B ☆
24,524 Posts

sottwell Reply #8, 12 years, 4 months ago

Ah, I see. Looking at it in Firebug, that empty div is used by the Javascript. Ok, then your tpl needs another container div:

<div class="newsblock">
<div class="post-[[+id]] post hentry category-latest-news tag-tag3 tag-tag5 tag-tag7" id="post-[[+id]]"></div>
<div class="entry">
<h4><a href="[[~[[+id]]]]" rel="bookmark" title="Permanent Link to [[+pagetitle]]">[[+pagetitle]]</a></h4>
<a href="[[~[[+id]]]]"><img class="alignleft" title="[[+tv.Factfile_title]]" src="[[+tv.Fact1:phpthumbof=`w=100&h=100&zc=1`]]" alt="" /></a>
</div>
</div><!-- end newsblock -->

You'll float the .newsblock divs. [ed. note: sottwell last edited this post 12 years, 4 months ago.]

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

437 Posts

distant_smile Reply #9, 12 years, 4 months ago

Excellent. I added a div, didn't really want to go changing the entry css just in case it affected anywhere else but thanks for the comment Paul. I did as you said Sottwell and it works perfect, sorry I didn't make it clear. I guess I just adjust padding, etc, to set the distance between images now?
DS

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #10, 12 years, 4 months ago

Aha never mind, I just amend the %, thank you both

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk