1

This is a page with 4 products on it, it is being displayed one product line by line.

I want to display them row by row where each row covers at least 3 products.

How do i make that happen

below is my code

<apex:page controller="homepagebuttons" showHeader="false">

    <style>
             p{
                 font-size: 12px;
                 color:White;
              }

             h3{
                 font-size: 15px;
                 text-align:center;
                 color:White;
               }

               body{
    background-image:url("{!$Resource.BGcheck3}");
    background-repeat:repeat;
 }  



     </style>

        <apex:outputText value="{!Guestoruser}" style="float:right;font-weight:bold;color:white;text-align:right;" />
        <p style="font-size:19px;font-weight:bold;"> Products available today </p>


        <ul>
    <li>


            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.Testprod1}" width="100" height="180"/><br/>
            <h3>Logo Shirt (Gray)</h3> 
            </apex:outputLink>
            <p>$20.00</p>

    </li>
    <li>
            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.testprod2}" width="100" height="180"/><br/>
            <h3>Mike the Frog Shirt (Orange)</h3>
            </apex:outputLink>
            <p>$25.00</p>

    </li> 
    <li>
            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.testprod3}" width="100" height="180"/><br/>
            <h3>Logo Shirt (Gray)</h3>
            </apex:outputLink> 
            <p>$20.00</p>

    </li>
    <li>
            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.testprod4}" width="100" height="180"/><br/>
            <h3>Mike the Frog Shirt (Orange)</h3>
            </apex:outputLink>
            <p>$25.00</p>

    </li> 
</ul>







</apex:page>
3

Personally, i would have been used bootstrap's grid system for such scenario, but for a quick solution something like below may work for you,

<apex:page controller="homepagebuttons" showHeader="false">

    <style>
             p{
                 font-size: 12px;
                 color:White;
              }

             h3{
                 font-size: 15px;
                 text-align:center;
                 color:White;
               }

               body{
    background-image:url("{!$Resource.BGcheck3}");
    background-repeat:repeat;
 }  

div.item{
        width:33%;
        display:inline-block;
    }
    div.container{
        width:100%;
    display:block;
    }

     </style>

        <apex:outputText value="{!Guestoruser}" style="float:right;font-weight:bold;color:white;text-align:right;" />
        <p style="font-size:19px;font-weight:bold;"> Products available today </p>


        <div class="container">
    <div class="item">


            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.Testprod1}" width="100" height="180"/><br/>
            <h3>Logo Shirt (Gray)</h3> 
            </apex:outputLink>
            <p>$20.00</p>

    </div>
    <div class="item">
            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.testprod2}" width="100" height="180"/><br/>
            <h3>Mike the Frog Shirt (Orange)</h3>
            </apex:outputLink>
            <p>$25.00</p>

    </div> 
    <div class="item">
            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.testprod3}" width="100" height="180"/><br/>
            <h3>Logo Shirt (Gray)</h3>
            </apex:outputLink> 
            <p>$20.00</p>

    </div>
    <div class="item">
            <apex:outputLink value="{!$Page.Prod1}">
            <apex:image url="{!$Resource.testprod4}" width="100" height="180"/><br/>
            <h3>Mike the Frog Shirt (Orange)</h3>
            </apex:outputLink>
            <p>$25.00</p>

    </div> 
</div>
  • Hi erkan, it worked, thanks. If you may please explain the solution, i am new to all this. – Niknit Jul 7 '17 at 11:06
  • Actually, nothing special, a basic css rules, check the item class. I just put 33 harcoded, if you want 4 columns , you would need to put 25 and so on. – erkan çipil Jul 7 '17 at 11:17
  • is there a better way to code this, i mean with my version of code with the list tags, should i just use everything in css and then use, also where can I learn nicely about <div> and bootstrap's grid system , if you could provide your favorite links about them, i tried to learn learn on both but couldn't understand so if you could provide any link.Thanks again Erkan – Niknit Jul 7 '17 at 11:21
  • for such scenario, the list does not work, you have to use div and grid system. Check the link. getbootstrap.com/examples/grid – erkan çipil Jul 7 '17 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.