CODEWITHSUNDEEP
htmlcss
user2408578
user2408578

Reputation: 464

css styling issue with header close button

I have following div opening up on click of image to show zoomed version on image. It doing what it is supposed to by using jquery show(), and hide(), but i m not getting how to style it, I'm using following code:

<div id="mainImage">
  ;;;
</div>
<div id="zoomPdpImage" style="display:none;z-index:2000;background-color:silver;">
<div id="closeZoomImgButton">
<span class="ui-dialog-title" id="ui-dialog-title-dialog-form">&nbsp;</span>
    <a href="#" class="close" role="button">
        <span>close</span>          
    </a>
</div>
<img src="http://localhost:/..." alt="${imageAlt}" title="image"/>
</div>

and styling for that:

#closeZoomImgButton 
{
 width: auto;
 height: 30px;
 position: relative;
 text-align: center;
 background: #000 url("../images/Close_X_Icon.png") no-repeat 570px 10px;
}
#closeZoomImgButton .close 
{
  border:0 none;
  border-radius:0 0 0 0;
  height:32px;
  margin:0;
  padding:0;
  right:0;
  top:0;
  width:32px;
  position: absolute;
  display:none;
}
#closeZoomImgButton .close span{margin:0;padding:0;}
#closeZoomImgButton .close:hover, #closeZoomImgButton .close:focus { padding:0; }

so I am able to click and close zoomed image but entire header is now clickable i want only close button to be clickable and should have on focus and hover effect to know that it is click-able.

Any suggestions plz.

Upvotes: 0

Views: 1277

Answers (2)

designtocode
designtocode

Reputation: 2245

I see what the issue is, you didn't add the id to the span for closing.

Please see updated fiddle here http://jsfiddle.net/WFyMu/5/

I changed this:

<span>close</span>

To this:

<span id="closeZoomImgButton">close</span>

Now when you click the close span it will hide. But I don't know if this is what you wanted?

Upvotes: 1

JSHRI R
JSHRI R

Reputation: 7

Use this code and tell

     #closeZoomImgButton 
     {
      background: url("../images/Close_X_Icon.png") no-repeat scroll 0 0 transparent !important;
      cursor: pointer;
      height: 30px;
      left: 440px;
      position: absolute;
      top: -18px;
      width: 30px;
      z-index: 90003;
      }

position, z-index and width is important

Upvotes: 0

Related Questions