CSS: абсолютный позиционный div, выходящий за пределы переполнения: скрытый? - PullRequest
Новая
       0

CSS: абсолютный позиционный div, выходящий за пределы переполнения: скрытый?

0 голосов
/ 11 февраля 2011

У меня есть слайдер продукта jquery, который вращается через несколько LI, которые плавают влево.Они имеют ширину 150 пикселей и высоту 200 пикселей, имеют изображение и несколько бит текста.У внешнего контейнера div, который содержит UL, есть переполнение: скрыто, так что только 5 LI отображаются одновременно.

Это прекрасно работает, пока я не попытаюсь вставить туда дополнительное изображение с абсолютной позицией, расположенной на несколько пикселей выше и слева от содержащей LI.

Цель состоит в том, чтобы в верхнем левом углу элемента было изображение прозрачного «проданного» углового баннера png, и оно имеет тень и подсветку, из-за которых оно выглядит, как будто оно изгибается по бокам LI.

Выглядит отлично, за исключением переполнения: кажется, что скрытый обрезает те несколько лишних пикселей, которые я выбил.Я даже попытался добавить дополнительное поле и отступ вокруг LI, но он все равно как-то обрезается.

Вот мой код: 

<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 -->

И 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;
        }

А вот и ссылка на «проданное» изображение: http://bit.ly/h5Uozo ...

Я не писал этот код, только изменяю его, но он дает мне ПОТРЕБНОСТИ, пытаясь понять, как заставить маленькое проданное изображение выйти за рамкиLI box -3px, чтобы он выглядел так, будто он «оборачивается» вокруг коробки.Так что, если кто-то может мне помочь, я буду очень признателен!Большое спасибо !!

1 Ответ

2 голосов
/ 11 февраля 2011

Как это?

http://jsfiddle.net/Mutant_Tractor/EGsad/

Я добавил следующий CSS: 

.sold {
    z-index: 999;
    clear: both;
    position: absolute;
    margin-left: -10px;
    margin-top: -5px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...