Как закрепить элемент?

Голоса: +1

У меня на сайте имеется лента которая при разных разрешениях монитора смещается, как сделать чтобы она была фиксирована как на первом скриншоте и не сбивалась в разные места при разных разрешениях.
 

Ось код:
<a class="corner"><span>&nbsp;</span>$ENTRY_TITLE$</a>

Це css

/* Стили ленты */
.corner {
background: rgba(170,78,184,0.85); 
box-shadow: -0px 5px 5px -5px #000;
color: #fff;
position: absolute; 
font: 28px/28px 'PT Sans', arial, sans-serif;
z-index: 1;
top: 310px;
left: 86px;
padding: 0 24px 0 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
/* Стили уголка ленты */
.corner span {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 0;
height: 0;
text-decoration: none;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-top-color: #8b3c97; 

 

| Автор: | Категория: Дизайн сайта
Може хтось допомогти?

Ответов: 1

Голоса: +1
 
Лучший ответ

Первое что нужно сделать, это немного опустить контент и добавить место под кнопки, в таблице стилей CSS найдите строку номер 666 и замените стили на:

.eBlock td.eMessage,.eBlock td.eText {padding: 50px 0 20px!important;}

после найти строку 40 заменить стили на:

.corner1 {
background: rgba(255,204,51,.85); 
box-shadow: -0px 5px 5px -5px #000;
color: #fff;
position: relative; 
font: 22px/22px 'PT Sans', arial, sans-serif;
z-index: 1;
display: inline-block;
float: left;
top: 20px;
right: 30px;
padding: 0 24px 0 24px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

Далее строка номер 72 заменить на:

/* Стили ленты */
.corner {
background: rgba(170,78,184,0.85); 
box-shadow: -0px 5px 5px -5px #000;
color: #fff;
position: relative; 
font: 28px/28px 'PT Sans', arial, sans-serif;
z-index: 1;
top: 50px;
right: 406px;
padding: 0px 10px;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

Вроде как все, перед этими изменениями создайте резервную копию на всякий случай, если вам не понравится результат, вы сможете вернуть все в прежний вид.

| Автор:

Верхня ленточка чудово працює, а ось нижня стала бігати в кожному матеріалу на різну відстань, ось наприклад тут:
http://cs-in-ua.at.ua/load/mapi/bunny_hop/bhop_worms/17-1-0-88
і тут
http://cs-in-ua.at.ua/load/mapi/fun/fun_aquarium/16-1-0-91

Також  ше строчка з інфой сместилась в право

В строке 73 найти стили:

.corner {
background: rgba(170,78,184,0.85);
box-shadow: -0px 5px 5px -5px #000;
color: #fff;
position: relative;
font: 28px/28px 'PT Sans', arial, sans-serif;
z-index: 1;
top: 50px;
right: 406px;
padding: 0px 10px;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

right: 406px; заменить  на right: 383px;

...