how to display images on top of each other in layoutgrid?

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Hi experts,

this https://au2mailer.com/pablo/ is an example where cars for sale are displayed.
If the car is new, I would like to show https://carmagic.dk/pjauto/images/p-j-auto-bilnyhed.png transparent image on top of the image of the car

Can you do it in layoutgrid?

Best regards

Michael Fiil (Denmark)
User avatar
Pablo
 
Posts: 21571
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: how to display images on top of each other in layoutgrid?

Post by Pablo »

Maybe this template will be helpful (see the third row)?
https://www.wysiwygwebbuilder.com/suppo ... cards.html
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

Re: how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Thanks Pablo - yes that's what I want but I do not think I quite understand how to do by looking at the source code in the example!
Where to find where the discount image is inserted or is it one layoutgrid on top of the other layoutgrid??

Can you help a little more?

Thanks in advance


Best regards

Michael Fiil (Denmark)
User avatar
Pablo
 
Posts: 21571
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: how to display images on top of each other in layoutgrid?

Post by Pablo »

You can download the template here:
https://wysiwygwebbuilder.com/templates2022.html
(ecommerce cards)
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

Re: how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Thanks Pablo,
I have only had time to move forward with the challenge now.
Does the example only work with "Cards" or should it also work on top of a slideshow or images?
I have copied the html code into this test page https://carmagic.dk/pjauto/ribbon.html but the ribbon is behind the slideshow image. What caused it?

Thank you in advance

Michael from Denmark
User avatar
Pablo
 
Posts: 21571
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: how to display images on top of each other in layoutgrid?

Post by Pablo »

In this case, you may need to add a z-index to the ribbon

Code: Select all

z-index: 9999;
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

Re: how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Hi Pablo and thank you

The ribbon is still behind the slideshow images

This is my ribbon-html-code
<style>
.ribbon
{
top: -10px;
right: -10px;
width: 150px;
height: 150px;
overflow: hidden;
position: absolute;
}
.ribbon::before,
.ribbon::after
{
position: absolute;
z-index: 9999;
content: '';
display: block;
border: 5px solid #2980b9;
border-top-color: transparent;
border-right-color: transparent;
}
.ribbon::before
{
top: 0;
left: 17px;
}
.ribbon::after
{
bottom: 17px;
right: 0;
}
.ribbon span
{
position: absolute;
display: block;
width: 225px;
left: -25px;
top: 30px;
transform: rotate(45deg);
padding: 8px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
color: #FFFFFF;
font-size: 15px;
font-family: "Arial";
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-transform: uppercase;
text-align: center;
}
#ribbonSlideShow1 .ribbon span
{
background-color: #FF0000;
}
#ribbonSlideShow1 .ribbon::before,
#ribbonSlideShow1 .ribbon::after
{
border-color: #DD0000;
border-top-color: transparent;
border-right-color: transparent;
}
</style>
User avatar
Pablo
 
Posts: 21571
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: how to display images on top of each other in layoutgrid?

Post by Pablo »

You will need to add the z-index to the ribbon class.
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

Re: how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Thank You Pablo - this made it working :D
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

Re: how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Now i am having another issue!
All pages in my project are using a masterpage with megamenu, which also have z-index.

With z-index = 9999 ind the class and style for the ribbon the ribbon will always be on top of everything and i am not
sure if i can control which z-index is used for the obejcts in masterpage?

se this pagehttps://carmagic.dk/pjauto/salgsafdelin ... lg-leasing

Thank you in advance

Michael from Denmark
User avatar
Pablo
 
Posts: 21571
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: how to display images on top of each other in layoutgrid?

Post by Pablo »

In this case, you should give the layout grid a higher z-index:

Code: Select all

#wb_master2pageLayoutGrid2 
{
  z-index: 10000;
}
Michael Fiil
 
 
Posts: 23
Joined: Thu Nov 04, 2021 1:07 pm

Re: how to display images on top of each other in layoutgrid?

Post by Michael Fiil »

Thank you Pablo

Every single day one get positive surprises about what is possible with WYSIWYG Web Builder.

Thanks for helping and have a nice weekend
Post Reply