Обсуждение Вопрос? Помощь в верстке css

[k1sher]

Подскажите пожалуйста как сжать звездочки рейтинга

Спойлер

Код в шаблоне..

     <div class="frating"><div id='ratig-layer-456'>
    [rating]    
    <div class="rating">
   [rating-type-1]<div class="rate">{rating}</div>[/rating-type-1]
    </div>
  [/rating]          
</div>

Код css...

.rating {
color: black;
display: block;
font-size: 10px;
font-family: tahoma;
height: 54px;
margin: 0;
font-weight: bold;
width: 264px;
}
.unit-rating {
list-style: none;
margin:0 auto;
padding: 0px;
width: 264px;
height: 27px;
position: relative;
background-image: url(../dleimages/ratingv.png);
background-position: 0 -54px;
background-repeat: repeat-x;
}
.unit-rating li {
    text-indent: -90000px;
    padding: 0px;
    margin: 0px;
    float: left;
}
.unit-rating li a {
    display: block;
    width: 26.4px;
    height: 27px;
    text-decoration: none;
    text-indent: -9000px;
    z-index: 17;
    position: absolute;
    padding: 0px;
}
.unit-rating li a:hover {
background-image: url(../dleimages/ratingv.png);
background-position: 0 -27px;
z-index: 2;
left: 0px;
}
.unit-rating a.r1-unit { left: 0px; }
.unit-rating a.r1-unit:hover { width: 26.4px; }
.unit-rating a.r2-unit { left: 26.4px; }
.unit-rating a.r2-unit:hover { width: 52.8px; }
.unit-rating a.r3-unit { left: 52.8px; }
.unit-rating a.r3-unit:hover { width: 79.2px; }
.unit-rating a.r4-unit { left: 79.2px; }  
.unit-rating a.r4-unit:hover { width: 105.6px; }
.unit-rating a.r5-unit { left: 105.6px; }
.unit-rating a.r5-unit:hover { width: 132px; }
.unit-rating a.r6-unit { left: 132px; }
.unit-rating a.r6-unit:hover { width: 158.4px; }
.unit-rating a.r7-unit { left: 158.4px; }
.unit-rating a.r7-unit:hover { width: 184.8px; }
.unit-rating a.r8-unit { left: 184.8px; }
.unit-rating a.r8-unit:hover { width: 211.2px; }
.unit-rating a.r9-unit { left: 211.2px; }
.unit-rating a.r9-unit:hover { width: 237.6px; }
.unit-rating a.r10-unit { left: 237.6px; }
.unit-rating a.r10-unit:hover { width: 264px; }
.unit-rating li.current-rating {
background-image: url(../dleimages/ratingv.png);
background-position: 0 0px;
position: absolute;
height: 27px;
display: block;
text-indent: -9000px;
z-index: 1;
}

.rating_digits{
font-size: 12px;
line-height: 9px;
height: 26px;
width: 334px;
}

.rating_digits div{
display: inline-block;
}

.rating_digits_1{
margin: 0;
padding: 8px 8px 8px 0;
width: 110px;
height: 10px;
}

.rating_digits_2{
margin: 0;
padding: 8px 8px 8px 0;
width: 187px;
height: 10px;
}

 

[TER]

Вот
width: 264px; ширина
height: 27px; высота
или
width: 26.4px;
height: 27px;

 

[k1sher]

Вот
width: 264px; ширина
height: 27px; высота
или
width: 26.4px;
height: 27px;

Таким образом он не сжимает все это дела, а просто обрубает.

 

[salomonkayn]

Таким образом он не сжимает все это дела, а просто обрубает.

Ваша проблема кроется в

background-image: url(../dleimages/ratingv.png);

 

[dadofall]

нужно картинку сначала уменьшить, а потом только под его размеры настроить css.

 

[redissx]

.rate {
transform: scale(0.5,0.5);
transform-origin: left top;
}

 

[evgfreeman]

.rate {transform: scale(0.5,0.5); transform-origin: left top}