banner box.

[TyMaH]

Имею данный код.

Код: Выделить всё

<div class="banner-box">
        <div class="banner featured">Избранное</div></div>

Код: Выделить всё

.banner-box {
position: absolute;
top: -1px;
right: -1px;
height: 100px;
width: 100px;
overflow: hidden;
pointer-events: none;
}
.banner {
padding: 6px 60px;
background: #489615;
text-transform: uppercase;
font: bold 13px "Helvetica Neue",Arial,sans-serif;
color: white;
text-align: center;
position: absolute;
top: 0;
right: 0;
-webkit-transform: translate(50%,-50%) rotate(45deg) translatey(55px);
-moz-transform: translate(50%,-50%) rotate(45deg) translatey(55px);
-ms-transform: translate(50%,-50%) rotate(45deg) translatey(55px);
-o-transform: translate(50%,-50%) rotate(45deg) translatey(55px);
transform: translate(50%,-50%) rotate(45deg) translatey(55px);
white-space: nowrap;
}

Хочу сделать вот так:

Безымянный.png

Но при вставки этого кода, данный "баннер" прикрепляется в верхний угол сайта, хотя сам код вставлен в таблицу этого окна.

Если убрать этот код:

Код: Выделить всё

top: -1px;
right: -1px;

Баннер встает вот так:

Безымянный.png

Делал через margin-left: 53.3%; , получилось как на первом скрине, но на другом разрешении монитора будет выглядеть по другому.

Cобственно как мне его зафиксировать справа, чтобы на всех разрешениях смотрелось одинаково. Выручайте, Гуру.

[evrus01]

position: fixed; ?
В живую посмотреть бы.

Добавлено спустя 1 минуту 34 секунды:

-webkit-transform: translate(50%,-50%) rotate(45deg) translatey(55px);

По мне так проще изображением.

[Sergiocharm]

а не relative ? и aloat right

[angst66]

По аналогии с nx-bookmarks на гуру

[Sergiocharm]

гляньте, как на гуру иконка "в сети" проставлена (icon_user_online.png) так и сделайте.