позиция смещается в зависимости от длины текста

Я делаю баннер css для изображений для моего сайта. У меня есть основная лента, созданная, но она действует странно, и я не вижу, чтобы узнать, что происходит.позиция смещается в зависимости от длины текста

http://jsfiddle.net/5jqpasyo/

Html:

<body> 
    <div> 
     <span class="top"></span> 
     <span class="bottom"></span> 
     <span class="ribbon-text">TRENDING</span> 
    </div> 
</body>

Css:

.top { 
position:absolute; 
left:130px; 
top:30px; 
    width: 100px; 
    height: 30px; 
    background-color: orange; 
    transform: rotate(45deg) skew(-45deg) 
} 

.bottom{ 
position:absolute; 
left:160px; 
top:60px; 
    width: 100px; 
    height: 30px; 
    background-color: orange; 
    transform: rotate(45deg) skew(45deg) 
} 

.ribbon-text{ 
position:absolute; 
left:150px; 
top:50px; 
    transform: rotate(45deg); 
text-transform:uppercase; 
}

в зависимости от размера текста ленточку в положение сдвигается. Например, «TRENDING» работает отлично, как я ожидал. но если я изменю его на «ПРОДАЮ», он уже не в правильной позиции.

и, если я добавляю что-то более короткое или более длинное, оно постоянно меняет положение. Почему идея?

источник

2014-09-29 173901

Это вы что искали?

Давая div класс и ribbon-text ширину, я тогда мог позицию, чтобы соответствовать верхнему и нижнему краю ленты к краю, то выравниванию текста внутри, что так теперь не центрирует текст независимо от длины (aslong как его не больше, чем ширина)

JSFIDDLE

.ribbon-text{ 
    position:absolute; 
    top:35px; 
    left:130px; 
    width:130px; 
    transform: rotate(45deg); 
    z-index:100; 
} 
.ribbon-block p{ 
    text-transform:uppercase; 
    text-align:center; 
}

источник

2014-09-29 19:24:13 Parody

Да это именно то, что я имел в виду это сделать. Большое спасибо!!!!! – 173901

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

.top { 
position:absolute; 
left:130px; 
top:30px; 
    width: 100px; 
    height: 30px; 
    background-color: orange; 
    transform: rotate(45deg) skew(-45deg) 
} 

.bottom{ 
position:absolute; 
left:160px; 
top:60px; 
    width: 100px; 
    height: 30px; 
    background-color: orange; 
    transform: rotate(45deg) skew(45deg) 
} 

.ribbon-text{ 
    position:absolute; 
    top:50px; 
    left:130px; 
    width:130px; 
    transform: rotate(45deg); 
    z-index:100; 
    text-transform:uppercase; 
    text-align:center; 
}

Приветствия

источник

2014-09-29 19:47:08 robjez

позиция смещается в зависимости от длины текста

ответ

Смежные вопросы