Question

I’m trying to do what I thought is going to be the simples thing on earth. I’m having some png box with graphic element that suppose to cover part of an image I was intending to disply inside this box (this is a product box and the graphic element is supposed to simulate price tag).

So I need to have the box and I wanted to display the image underneath it using asp:ImageButton.

I’ve been struggling with this for hours, trying to put divs and images etc. Tried all sort of things with z-order, with no success, the product image is still being displayed above the graphic box. Fot the price it has been working fine, though.

I thought this should work:

<div id="HPItemBox">
        <div id="HPItemPriceBox">
            <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
        </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <asp:Image ID="ibImage" runat="server" Width="140" Height="140" style="position: relative; z-index: 10;" />
        <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>
    </div>
</div>

Also tried:

<div id="HPItemBox">
    <div id="HPItemPriceBox">
        <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label>
    </div>
    <div id="imgBox" runat="server" class="HPimgBox">
        <div id="divImage" runat="server" style="position: relative; width: 140px; height: 140px;
            z-index: 10;">
        </div>
        <div id="HPItemLink">
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';">Buy it</asp:LinkButton>
        </div>
    </div>
</div>

There is the css:

#HPItemBox
{
    position: relative;
    width: 190px;
    height: 190px;
    background-image: url('../images/home-product-box.png');
    background-repeat: no-repeat;
    background-color: #ffffff;
    float: left;
    z-index: 50;
}

.HPItemPrice
{
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    color: #4d4d4d;
}

.HPimgBox
{
    position: relative;
    top: -10px;
    right: 20px;
    width: 170px;
    z-index: 10;
}

Any ideas? Thanks in advanced.

Answer 1

I came up with a somewhat crooked idea, but i’m short in time so if it works for now it’s fine with me.

I’ll sketch the idea. basically, I think that an imagebutton gets the highest z-order, so there is no point of putting it above any div hoping that it will reside behind it.
so my solution was to take out the imagebutton and just put the image using some div, and then put a fully TRANSPARENT imagebutton above.

it goes something like this:

<div id="HPItemBox"> 
        <div id="HPItemPriceBox"> 
            <asp:Label ID="lblPrice" runat="server" CssClass="HPItemPrice"></asp:Label> 
        </div> 
    <div id="imgBox" runat="server" class="HPimgBox"> 
        <div id="HPItemLink"> 
            <asp:LinkButton ID="lbToBuy" runat="server" CssClass="ItemURLStyle" OnClientClick="aspnetForm.target ='_blank';" ImageURL="FULLY_TRANSPARENT_RECTANGLE!!!">Buy it</asp:LinkButton> 
        </div> 
    </div> 
</div>
<div id="THE ACTUAL IMAGE!!!"> .... in this DIV I put the image using image control (NOT imagebutton!) and then relatively place it under HPItemBox div </div>

This way the actual image is presented under the frame div and the button is actually a rectangular transparent image so the image i wanted to display appears as the button (but without the ‘click’ affect.