CODEWITHSUNDEEP
htmlcss
SearchForKnowledge
SearchForKnowledge

Reputation: 3751

How to add an image to a CSS popup box

<div class="showUserInfo noPrint" id="showUserInfo">
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Login User: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Label ID="lblUserN" runat="server" ClientIDMode="Static" /></div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Workgroups: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;">
            <ul class="ulO" id="ulO" runat="server">
            </ul>
        </div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad" id="dvAdmin" runat="server">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Admin Status: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Image runat="server" ID="imgIsAdmin" ClientIDMode="Static" ImageUrl="~/theImages/admin_yes.png" CssClass="adminImg" /></div>
    </div>
</div>

CSS:

.showUserInfo {
    position: absolute;
    background: #243942;
    border: 4px solid #E55302;
    overflow: hidden;
    right: 45px;
    min-height: 100px;
    width: 350px;
    top: 55px;
    z-index: 200;
    text-align: left;
    padding: 10px;
    color: #C0C0C0;
    display: none;
}

Output:

enter image description here

I am looking to add an image to the left corner which goes outside of the box to look something like this:

enter image description here

I tried to change the HTML to the following but the image goes inside the box:

<div class="showUserInfo noPrint" id="showUserInfo">
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Login User: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Label ID="lblUserN" runat="server" ClientIDMode="Static" /></div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Workgroups: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;">
            <ul class="ulO" id="ulO" runat="server">
            </ul>
        </div>
    </div>
    <div class="hidOverflow brClear fullWidth vertAlignT allAroundPad" id="dvAdmin" runat="server">
        <div class="setFloatL hidOverflow vertAlignT" style="width: 55%;">Admin Status: </div>
        <div class="setFloatL hidOverflow vertAlignT" style="width: 45%; color: #FFF;"><asp:Image runat="server" ID="imgIsAdmin" ClientIDMode="Static" ImageUrl="~/theImages/admin_yes.png" CssClass="adminImg" /></div>
    </div>
    <img src="../theImages/preloader_small.gif" style="position: absolute; left: -22px; top: -22px;" />
</div>

Upvotes: 1

Views: 160

Answers (1)

Toni Leigh
Toni Leigh

Reputation: 4971

You do this using position values and negative positions.

See the jsfiddle

.box {
    position: relative;
}    

.image {
    position: absolute;
    top: -30px;
    left: -30px;
}

And the important part of the example in the code above. The .box is position: relative; - the image (which could be any HTML element of course) is position: absolute; and the absolutely positioned element can then be positioned using top, left, right, bottom or z-index properties exactly where you want it. You might need z-index if something else was overlaying it to ensure it is on top.

Position absolute always positions the element at co-ordinates relative to the next item up the DOM tree where the position is set to relative or absolute, meaning that the position will remain set regardless of how the internal .box HTML changes. These co-ordinates default to 0x and 0y.

Upvotes: 2

Related Questions