Lox Lox - 7 months ago 18
HTML Question

Can't make ribbon edges stay on top

So, I modified a wordpress tabs widget so that I could make it look like in the image I attached, only that I have one problem.

I can't make the ribbon edges stay on top of the website layout.
I have a demo of what I've done so far here.

So I added this code to show the images:

#wp-tabs-1 .ui-tabs .ui-tabs-nav:before{
content: url(../images/l-corner.png);
width: 47px;
height: 43px;
position: absolute;
left: -5em;
z-index: 999;
}

#wp-tabs-1 .ui-tabs-nav:after{
content: url(../images/r-corner.png);
width: 47px;
height: 43px;
position: absolute;
right: -5em;
z-index: 999;
}


I tried all the positioning combinations with the z-index that I could, and nothing seems to work, to make the ribbon edges stay on top.ribbon

Answer

They're hidden by .grid { overflow: hidden }. Change it to .grid { overflow: visible } or simply remove it and it should work.