CODEWITHSUNDEEP
htmlcss
Paks
Paks

Reputation: 1470

Put <div> over another <div> CSS

What iam trying to do is to put a with two imagebuttons over another which is used only for the backround-color.

For example: enter image description here

How can i put the div with the two buttons over the backround exact like in the attached image.

My Code so far:

CSS:

.behind
    {
        background-color: #e2e0de;
        width: 100%;
        height: 130px;
        z-index: -1;
    }

HTML:

   <div>
            <div class="behind">
            <asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
                CssClass="checkinButton" />
            <asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
                CssClass="checkoutButton divider" />
            </div>
        </div>

With my Code is looks like:

enter image description here

Upvotes: 0

Views: 114

Answers (2)

Raul Rene
Raul Rene

Reputation: 10280

Your images are wrapped in the behind div, so they start at the same point your background does. First, move them out:

<div>
        <div class="behind"></div>
        <asp:ImageButton ID="btnCheckin" runat="server" ImageUrl="~/image/button1.png"
            CssClass="checkinButton" />
        <asp:ImageButton ID="btnCheckout" runat="server" ImageUrl="~/image/button2.png"
            CssClass="checkoutButton divider" />
</div>

Secondly, update the .behind css to start at an absolute position (i.e. not from the top). Notice the position: absolute and the top: 20px elements. Just replace 20px with a value suitable for you, depending on the size of the images.

.behind {
    background-color: #e2e0de;
    width: 100%;
    height: 130px;
    z-index: -1;
    position: absolute;
    top: 20px;
}

Here is a working fiddle, but I've used other images so the value for the top: offset is different.

Upvotes: 4

Youness
Youness

Reputation: 1495

try this it might help (UNTESTED) :

.checkoutButton
    {
        position:relative;
        top:-value;
        z-index: 10;
    }

PS : change the value to a a real value for exemple if your buttons height was 136px then give it -3px -> ((buttons height-divs height)/2).

i hope it helps and sorry for not testing it i can't at the moment

Upvotes: 0

Related Questions