We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 7527
    • 437 Posts
    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
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      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
        • 7527
        • 437 Posts
        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
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          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
            • 7527
            • 437 Posts
            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
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              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
                • 22840
                • 1,572 Posts
                in styles.css change:

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


                To:
                .entry {
                padding: 10px 0 2px;
                float: left;
                }
                  • 28042 ☆ A M B ☆
                  • 24,524 Posts
                  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
                    • 7527
                    • 437 Posts
                    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
                      • 7527
                      • 437 Posts
                      Aha never mind, I just amend the %, thank you both
                        www.PawsForWildlife.co.uk
                        www.Borntobrick.co.uk