rainborick
msg:4399579 | 2:19 am on Dec 20, 2011 (gmt 0) |
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.
|
roclimb
msg:4399604 | 5:16 am on Dec 20, 2011 (gmt 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>
|
penders
msg:4399661 | 10:03 am on Dec 20, 2011 (gmt 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?!)
|
roclimb
msg:4399843 | 7:25 pm on Dec 20, 2011 (gmt 0) |
thanks, it worked. I added relative to the right and it works great
|
|
