1

I'm creating a webshop for my company and I'm having some difficulties. We use a system called easywebshop and it provides you with a basic (responsive) layout which you can manage yourself by editing the CSS and some images.

So far no problems except for this one: I'm trying to create a column look where my items "randomly" overlap some columns. The column look is no problem but the overlap is!

The webshop returns me an ul with some items.

<ul class="webshop_prodlist_easy webshop_prodborders">
  <li>
    <a href="/detail/4973522-14010-ronde-borstel-hout-black-polyamide">
      <img src="/shops/duxshop/thumbs/4973522-1.jpg" alt="Ronde Borstel - Hout -  - Black -  - Polyamide">
        <div>
          <span>Ronde Borstel - Hout -  - Black -  - Polyamide</span>
          <span class="webshop_price"></span>
      </div>
    </a>
  </li>
</ul>

I've added an example of my design of how I want to make it look. If you can help me create the grid, the rest is up to me guys!

enter image description here

Edit: I've managed to add an extra link to the head. What would be my best option? I'm able to host scripts and stylesheets on a different server where I can link to.

Edit: live demo, with Masonry now: duxshop.be

Chapelic
  • 11
  • 3
  • 1
    Why not use Bootstrap? https://getbootstrap.com/examples/grid/ – Master Yoda Jan 22 '16 at 09:21
  • 1
    @KyleT That's like saying use `.Net` on a `PHP` question - not helpful – StudioTime Jan 22 '16 at 09:23
  • @DarrenSweeney What are you talking about?? Bootstrap is a css framework with its own grid system. – Master Yoda Jan 22 '16 at 09:24
  • @KyleT that may well be, but the OP is (probably) "stuck" with easywebshop, an out-of-the-box solution with it's own grid system. – Karl Dawson Jan 22 '16 at 09:38
  • @KarlDawson That was never tagged. CSS was tagged as an acceptable solution, one that Bootstrap could easily solve with the addition of a simple stylesheet. – Master Yoda Jan 22 '16 at 09:42
  • 1
    @KyleT OP `We use a system called easywebshop...` then `The webshop returns me...` by your own argument, `bootstrap` was NOT tagged – StudioTime Jan 22 '16 at 09:45
  • I'm not able to add new stylesheets... But still, thanks for the tip. – Chapelic Jan 22 '16 at 09:49
  • @Chapelic, is it always going to use the same layout as the image or can the number of boxes change - ie small and large boxes be placed in different areas? If it is the latter, you will be better using a [javascript plugin called masonry](http://masonry.desandro.com/) - it's responsive too – Pete Jan 22 '16 at 10:03
  • @Pete, for the moment I will be using the same layout as the image, but in the future it can change. The small and large boxes will be placed in different areas then. Also when it's responsive, the places will switch. I know masonry, but I'm not able to add JS, only CSS(3) – Chapelic Jan 22 '16 at 10:49

0 Answers0