I have a jquery product slider that rotates through several LI’s that are floated left. They have a width of 150px and height of 200px and have an image and a few bits of text in them. The outer container div that holds the UL has an overflow:hidden so that only 5 LI’s are displayed at a time.
This works great, until I try and stick an additional image in there with an absolute position bumped a few pixels above and to the left of the containing LI.
The goal is to have a transparent “sold” corner banner png image on the top left corner of the item, and it has a shadow and highlight that makes it look like it’s bending around the sides of the LI.
It looks great, except the overflow:hidden seems to be cutting off those few extra pixels I have bumped it out. I even tried adding extra margin and padding around the LI but it still gets cut off somehow.
Here is my code:
<div class="shadowblock_out">
<div class="shadowblockdir">
<h2>Products</h2>
<div class="sliderblockdir">
<div id="list">
<div class="slider">
<ul>
<li><div class="sold_90"><img src="sold_90.png" /></div>
<div class="featured-image"><a href="#"><img width="150" height="125" src="851441-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$50</span>
<span class="right">XYZ</span>
</li>
<li>
<div class="featured-image"><a href="#"><img width="150" height="125" src="827361-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$25</span>
<span class="right">XYZ</span>
</li>
<li>
<div class="featured-image"><a href="#"><img width="150" height="125" src="837216-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$55</span>
<span class="right">XYZ</span>
</li>
<li>
<div class="featured-image"><a href="#"><img width="150" height="125" src="940651-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$75</span>
<span class="right">XYZ</span>
</li>
<li>
<div class="featured-image"><a href="#"><img width="150" height="125" src="848712-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$90</span>
<span class="right">XYZ</span>
</li>
<li>
<div class="featured-image"><a href="#"><img width="150" height="125" src="903776-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$10</span>
<span class="right">XYZ</span>
</li>
<li>
<div class="featured-image"><a href="#"><img width="150" height="125" src="278773-150x125.png" /></a></div>
<div class="featured-info">Product info here</div>
<span class="left">$100</span>
<span class="right">XYZ</span>
</li>
</ul>
</div><!-- /slider -->
</div><!-- /list -->
<div class="clr"></div>
</div><!-- /sliderblock -->
</div><!-- /shadowblock -->
And the css:
.sold_90 {
display:block;
width:90px;
height:90px;
position:absolute;
z-index:9;
left: -5px;
top: -5px;
overflow: visible;
}
.shadowblock_out { margin:0 0 20px 0; border:1px solid #F5CF5B; /* overflow:hidden; */}
.shadowblockdir {
height:245px;
padding:8px 5px 5px;
background:#FFFFFD;
border:1px solid #fff;
}
/* featured listings homepage carousel */
.featured-listings-home-top {
font-size: 16px;
color: #8E633E;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #A48061;
font-size: 16px;
font-style: italic;
color: #8E633E;
font-weight: bold;
margin: 0;
padding: 0;
padding-bottom: 5px;
}
.featured-listings-home-top span {
font-size: 12px;
color: #8E633E;
font-weight: normal;
}
.sliderblockdir {
height: 215px;
padding-top: 5px;
}
.slider {
float:left;
left:-5000px;
margin-left:15px;
position:relative; /* visibility:hidden; */
height: 215px;
overflow: hidden;
}
.slider ul {
width:600px;
overflow: hidden;
}
.slider ul li a {text-decoration:none; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 12px; margin-top: 5px;}
.slider ul li a:hover {text-decoration:underline;}
.slider ul li:hover { background-color:#FDE051;}
.slider ul li img {
}
span.price_sm { font-size:11px; font-style:italic; color:#666}
span.feat_left { float:left; text-align:center; width:55px; }
#list {
width:925px;
margin:0 auto;
height: 215px;
}
.slider {
margin: 0 auto;
position: relative;
left: 5px;
width: 925px;
}
.slider ul {
height:210px;
width: 100%;
}
.slider ul li {
width:160px;
position: relative;
float: left;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: 10px;
text-align: center;
background-color: #FFFFFD;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
height: 200px;
margin-left: 5px;
margin-top: 5px;
overflow: visible;
}
.slider ul li a {text-decoration:none; font-size: 12px; font-family: Georgia, "Times New Roman", Times, serif; line-height: 12px; margin-top: 5px;}
.slider ul li a:hover {text-decoration:underline;}
.slider ul li:hover { background-color:#FDE051;}
.slider ul li img {
cursor:pointer;
margin: 0 auto;
position: relative;
text-align: center;
}
span.price_sm { font-size:11px; font-style:italic; color:#666}
span.feat_left { float:left; text-align:center; width:55px; }
#list li p {
display:block;
white-space: pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Internet Explorer 5.5+ */
text-align: center;
width: 50px;
}
.captify { border:1px solid #CCC; float:left; margin:3px 10px 5px 0; padding:2px;}
.prev { cursor:pointer; float:left; padding-top:25px}
.next { cursor:pointer; float:right; padding-top:25px}
.featured_price {float:left; font-size: 10px; color:#FF0000; display: inline; width: 55px;}
.featured_location {font-size: 10px; color:#000; float: right;display: inline;}
.left {
float: left;
width: 100px;
font-size: 12px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #AD6441;
font-weight: bold;
}
.right {
float: right;
width: 50px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.featured-image img {
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.featured-image {
height: 125px;
margin-top: 10px;
padding: 2px;
}
.featured-info {
font-size: 11px;
color: #3F2A19;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
line-height: 14px;
}
And here is the link to the “sold” image: http://bit.ly/h5Uozo …
I didn’t write this code, only am modifying it, but it’s been giving me FITS trying to figure out how to get the little Sold image to extend beyond the LI box -3px so that it looks like it’s “wrapping” around the box. So if someone could help me out I’d greatly appreciate it! Thanks so much!!
How is this?
http://jsfiddle.net/Mutant_Tractor/EGsad/
I added the following CSS: