Welcome to WebmasterWorld Guest from 107.20.36.1

Forum Moderators: not2easy

Message Too Old, No Replies

image hiding under Div question.

hide an image under a div

     
2:03 am on Dec 20, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:June 23, 2009
posts: 42
votes: 0


Im trying to hide part of an image under a dive, then use Jquery to slide it out from under the div.

I have two left floated divs lets all them left and right. I have an image in the left div but absolutely positined so it moves 100px into the right div. my problem is its not hiding under the right div like I want it to. I want it hidden under the right div and to slide out into the left. I tried zindex but its not working.

any advice?

thanks
Rob
2:19 am on Dec 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:904
votes: 5


z-index is the key to working with overlapping elements. And if you want elements to move, you'll need to use absolute positioning for at least one element. Post your code so someone can give you some specific advice.
5:16 am on Dec 20, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:June 23, 2009
posts: 42
votes: 0


thanks here is the code:


#left {

border-right-style: none;
padding-left: 10px;
border-left-style: none;
background-repeat: repeat-y;
float: left;
height: 400px;
width: 195px;
}

#right {
z-index: 2000;
font-size: 11pt;
padding-left: 20px;
background-color: white;
border-left-color: black;
border-left-width: 1px;
border-left-style: solid;
margin-top: -20px;
float: left;
height: 420px;
width: 489px;
}


.nub{
float: right;
}

.slice{
background:url(images/partner-tab.png) repeat-x scroll 0 0;
display: block;
overflow: hidden;
z-index: 100;
position: absolute;
left:250px;
margin-top: -20px;
height: 70px;
width: 100px;

}


<div id="left">
<div class="nub">

<img src="images/nub.png" alt="nub" width="18" height="20" />

<div class="cover slice"></div>

</div>

</div>
<div id="right"></div>

10:03 am on Dec 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


z-index can only be applied to positioned elements, so you might be able to get this to work by simply applying
position:relative
to your #right DIV. (Although float AND position kinda feels like a contradiction?!)
7:25 pm on Dec 20, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:June 23, 2009
posts: 42
votes: 0


thanks, it worked. I added relative to the right and it works great