Ошибка?? Почему это оно заходит

Avgust999 · Суббота в 19:37

Вот помогите пж

Avgust999 · Суббота в 19:46

Avgust999 написал(а):
Вот помогите пж
Посмотреть вложение 17391

OFFTOP

помогите пж

Avgust999 · Суббота в 19:53

Avgust999 написал(а):
Вот помогите пж
Посмотреть вложение 17391

Если быть точнее то баннер немного прячется на аве в ник под авой как исправить это

arvion · Суббота в 20:18

Хм , часто баннер нормально выглядит на ПК, но ломается на телефоне.

Попробуй -

Fix:

@media (max-width: 768px) {
    .memberProfileBanner {
        height: 180px;
        overflow: hidden;
    }
}

Значения меньше/больше уже сам отредактируешь

Avgust999 · Суббота в 20:19

arvion написал(а):
Хм , часто баннер нормально выглядит на ПК, но ломается на телефоне.

Попробуй -

Fix:

@media (max-width: 768px) { .memberProfileBanner { height: 180px; overflow: hidden; } }

Значения меньше/больше уже сам отредактируешь

Также

arvion · Суббота в 20:21

Попробуй проверить отрицательные отступы в стиле

Отрицательные:

margin-top: -XXpx;
top: -XXpx;

И замени например на :

Fix:

.memberProfileBanner {
    margin-top: 0;
    top: 0;
}

Avgust999 · Суббота в 20:22

arvion написал(а):
Попробуй проверить отрицательные отступы в стиле

Отрицательные:

margin-top: -XXpx; top: -XXpx;

И замени например на :

Fix:

.memberProfileBanner { margin-top: 0; top: 0; }

Где посмотреть

arvion · Суббота в 20:23

Бывают ещё проблемы из-за position: absolute или фиксированной высоты.

Fix:

.memberProfileBanner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Если вдруг это div с background-image::

.memberProfileBanner {
    background-size: cover;
    background-position: center;
}

arvion · Суббота в 20:26

Avgust999 написал(а):
Где посмотреть

margin-top: -... / top: -...

1. Зайди в Админ-панель
2. Перейди в
Внешний вид - Стили - Твой стиль
3. Нажми Свойства стиля или CSS
4. Открой:

extra.less
или member.less
или public:member.less

Найди там строку :

Типа:

margin-top: -10px;
top: -20px;
transform: translateY(-...);

Если найдёшь убери там минус или поставь 0

Avgust999 · Суббота в 20:29

Мой extra.less

Extra:

@logoImages: 'https://i.postimg.cc/RZGf9h7w/i-(52).jpg'; // Изображение логотипа (указывать в кавычках)
@logoSize: 20px;                 // Размер логотипа
@logoOpacity: 100%;               // Прозрачность логотипа (100% - непрозрачный, 0% - прозрачный)

.fontMontserrat(@fweight) {
    @font-face {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: @fweight;
        src: local(''),
            url('/styles/role-play/fonts/montserrat-@{fweight}.woff2') format('woff2'),
            url('/styles/role-play/fonts/montserrat-@{fweight}.woff') format('woff');
    }
}
.fontMontserrat(400);
.fontMontserrat(500);
.fontMontserrat(600);
.fontMontserrat(700);

@strongTextShadow:  1px 0 1px  rgba(0,0,0,.5),
                    0 1px 1px  rgba(0,0,0,.5),
                    -1px 0 1px rgba(0,0,0,.5),
                    0 -1px 1px rgba(0,0,0,.5);

.gradientUserBanner(@start: transparent, @end: transparent, @position: right) {
    background-image: linear-gradient(to @position, @start 0%, @end 100%);
}

.svg-userBannerVariation(@color; @bg; @logo: @logoImages) {
    color: @color;
    background-color: @bg;
    border: none;
    .userBanner-before {
        &:before {
            content: '';
            display: block;
            width: 15px;
            height: 15px;
            background: url('https://i.postimg.cc/RZGf9h7w/i-(52).jpg') no-repeat center / @logoSize,
                linear-gradient(to top, rgba(0,0,0,.8) 10%, rgba(0,0,0,.2) 100%);
            filter: opacity(@logoOpacity);
            padding: 2px;
            border-radius: 50%;
        }
    }
}

.userBanner {
    text-transform: uppercase;
    font-weight: 800;
    padding: 3px 5px 3px 3px;
    border: 1px solid transparent;
    border-radius: 10px;
    text-align: center;
    display: inline-flex;
    justify-content: space-between;
   background-size: 500% 500%;
    animation: AnimBanner 10s ease infinite;
    align-items: center;
    align-content: center;
    position: relative;
    strong {
        font-size: 85%;
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
        padding-left: 3px;
        line-height: .95;
        text-shadow: @strongTextShadow;
    }
    .message-userBanner& {
        display: flex;
    }
}

@media (max-width: @xf-responsiveMedium) {
    .message:not(.message--forceColumns) .message-userTitle,
    .message:not(.message--forceColumns) .message-userBanner.userBanner {
        display: inline-flex;
    }
}

.userBanner.userBanner-- {
    &staff {
        .svg-userBannerVariation(#fff, #5c97bf);
        .gradientUserBanner(#8B008B,#00BFFF);
  background-image: linear-gradient(270deg, #00b9ff, #d104ff, #2800ff);
        background-size: 900% 900%;
    }
    &admin {
        .svg-userBannerVariation(#fff, #4169E1);
        .gradientUserBanner();
    }
 &stadm {
        .svg-userBannerVariation(#fff, #32CD32);
        .gradientUserBanner();
    }
    &mladm {
        .svg-userBannerVariation(#fff, #00FF00);
        .gradientUserBanner();
    }
    &newmember {
        .svg-userBannerVariation(#fff, #6c7a89);
        .gradientUserBanner();
    }
    &verified {
        .svg-userBannerVariation(#fff, #446cb3,);
        .gradientUserBanner();
    }
&proveren {
        .svg-userBannerVariation(#fff, #B0C4DE,);
        .gradientUserBanner();
    }
    &osnoval {
        .svg-userBannerVariation(#fff, #fB0C4DE);
        .gradientUserBanner(#FFFF00,#FFA500);
 }
&banned {
        .svg-userBannerVariation(#fff, #9a12b3);
        .gradientUserBanner();
    }
 &rukov {
        .svg-userBannerVariation(#fff, #FF0000);
        .gradientUserBanner(#FA8072, #FF0000, #FA8072);
    }
 &dedmoroz {
        .svg-userBannerVariation(#fff, #FF0000);
        .gradientUserBanner(#FF0000, #FF0000, #FF0000);
    }
 &ga {
        .svg-userBannerVariation(#fff, #228B22);
        .gradientUserBanner(#00FF00, #32CD32,#228B22);
  background-image: linear-gradient(270deg, #32CD32,#228B22,#00FF00);

    }

&admforum {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#00FF00, #008000,#00FF00);
        background-image: linear-gradient(270deg, #00FFFF,#008080,#00FFFF);
    }
 &razrab {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#00FF00, #008000,#00FF00);
        background-image: linear-gradient(270deg, #D2691E,#CD853F,#D2691E);
    }
 &gs {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#00FF00, #008000,#00FF00);
        background-image: linear-gradient(270deg, #0000FF,#000080,#0000FF);
    }
 &zgs {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#00FF00, #008000,#00FF00);
        background-image: linear-gradient(270deg, #4169E1,#00BFFF,#4169E1);
    }
 &lider {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#00FF00, #008000,#00FF00);
        background-image: linear-gradient(270deg, #FFFF00,#D2691E,#FFFF00);
    }
  &zga {
        .svg-userBannerVariation(#fff, #006400);
        .gradientUserBanner(#98FB98, #006400,#006400);
  background-image: linear-gradient(270deg, #98FB98,#006400,#006400);

    }
 &pochet {
        .svg-userBannerVariation(#fff, #d80000);
        .gradientUserBanner(#00FF00, #008000,#00FF00);
        background-image: linear-gradient(270deg, #FFFF00,#00FF00,#FF0000,#FF00FF,#0000FF,#00FFFF,#8A2BE2);
    }
} 
 
@keyframes AnimBanner {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.label {
    color: #fff;
    text-transform: uppercase;
    font-weight: 650;
    font-size: 70%;
    padding: 2px 4px;
    text-align: center;
    background-size: 300% 300%;
    border-radius: 5px;
}
&.v {
background: #ff0000;
box-shadow: 0 0 12px #ff0000;
}
&.ras {
background:  #0044ff;
box-shadow: 0 0 12px #0044ff;
}
&.otk {
background: #00AA00;
box-shadow: 0 0 12px #00AA00;
}
&.rasm {
background: #ee7700;
box-shadow: 0 0 12px #ee7700;
}
&.inf {
background: #ffbb00;
box-shadow: 0 0 12px #ffbb00;
}


@keyframes rotate-in-center {
    0% {
        transform:rotate(0);
    }
    100% {
        transform:rotate(360deg);
    }
}

.aur_NewYear {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  position: fixed !important;
  top: 0;
  z-index: 999999 !important;
  margin: 0;
  padding: 0;
  pointer-events: none;
  width: 100%;
}

.aur_NewYear li {
  position: relative;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  list-style: none;
  display: inline-block;
  width: 12px;
  height: 18px;
  border-radius: 50%;
  margin: 20px;
  padding: 0;
  background: rgba(0, 247, 165, 1);
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
  animation-name: flash-1;
  animation-duration: 2s;
}

.aur_NewYear li:nth-child(2n+1) {
  background: rgba(0, 255, 255, 1);
  box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
  animation-name: flash-2;
  animation-duration: 0.4s;
}

.aur_NewYear li:nth-child(4n+2) {
  background: rgba(247, 0, 148, 1);
  box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
  animation-name: flash-3;
  animation-duration: 1.1s;
}

.aur_NewYear li:nth-child(odd) {
  animation-duration: 1.8s;
}

.aur_NewYear li:nth-child(3n+1) {
  animation-duration: 1.4s;
}

.aur_NewYear li:before {
  content: "";
  position: absolute;
  background: #222;
  width: 10px;
  height: 9.3333333333px;
  border-radius: 3px;
  top: -4.6666666667px;
  left: 1px;
}

.aur_NewYear li:after {
  content: "";
  position: absolute;
  top: -14px;
  left: 9px;
  width: 52px;
  height: 18.6666666667px;
  border-bottom: solid #222 2px;
  border-radius: 50%;
}

.aur_NewYear li:last-child:after {
  content: none;
}

.aur_NewYear li:first-child {
  margin-left: -40px;
}

@keyframes flash-1 {
  0%, 100% {
    background: rgba(0, 247, 165, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1);
  }
  50% {
    background: rgba(0, 247, 165, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
  }
}

@keyframes flash-2 {
  0%, 100% {
    background: rgba(0, 255, 255, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1);
  }
  50% {
    background: rgba(0, 255, 255, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
  }
}

@keyframes flash-3 {
  0%, 100% {
    background: rgba(247, 0, 148, 1);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1);
  }
  50% {
    background: rgba(247, 0, 148, 0.4);
    box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
  }
}

@media (max-width: 76px) {
    .memberProfileBanner {
        height: 18px;
        overflow: hidden;
    }
}

arvion · Суббота в 20:36

Проблема оказалась не в самом баннере профиля и не в отрицательных margin, а в стилях, которые накладываются поверх страницы. В extra.less используется элемент .aur_NewYear с position: fixed и очень большим z-index, из-за чего он перекрывает элементы профиля и создаёт ощущение, что баннер выходит за границы, особенно на мобильных устройствах.

Решение - ограничить влияние этого элемента. Надо отключить .aur_NewYear на мобильных экранах через media-запрос (до 768px), чтобы гирлянда не накладывалась на контент профиля и не ломала вёрстку. После этого перекрытие баннера исчезло.

Также была ошибка в media-запросе для самого баннера профиля: использовалось значение max-width: 76px, которое никогда не срабатывает. Замени его на корректное max-width: 768px и задай overflow: hidden (и адекватную высоту), из-за чего баннер перестал выходить за пределы блока на мобильных устройствах.

Avgust999 · Суббота в 20:39

arvion написал(а):
Проблема оказалась не в самом баннере профиля и не в отрицательных margin, а в стилях, которые накладываются поверх страницы. В extra.less используется элемент .aur_NewYear с position: fixed и очень большим z-index, из-за чего он перекрывает элементы профиля и создаёт ощущение, что баннер выходит за границы, особенно на мобильных устройствах.

Решение - ограничить влияние этого элемента. Надо отключить .aur_NewYear на мобильных экранах через media-запрос (до 768px), чтобы гирлянда не накладывалась на контент профиля и не ломала вёрстку. После этого перекрытие баннера исчезло.

Также была ошибка в media-запросе для самого баннера профиля: использовалось значение max-width: 76px, которое никогда не срабатывает. Замени его на корректное max-width: 768px и задай overflow: hidden (и адекватную высоту), из-за чего баннер перестал выходить за пределы блока на мобильных устройствах.

Дай готовый пж екстра без ошибок

arvion · Суббота в 20:40

Avgust999 написал(а):
Дай готовый пж екстра без ошибок

Попробуй сам , учись . Если вообще никак не получится - скину

Pavnik · Суббота в 20:49

Avgust999 написал(а):
Вот помогите пж
Посмотреть вложение 17391

У кого есть такие роли и новогодние игрушки ?

arvion · Суббота в 21:14

Pavnik написал(а):
У кого есть такие роли и новогодние игрушки ?

OFFTOP

это не здесь пожалуй будем обсуждать. Создай тему

Avgust999 · Вчера в 08:39

arvion написал(а):
Проблема оказалась не в самом баннере профиля и не в отрицательных margin, а в стилях, которые накладываются поверх страницы. В extra.less используется элемент .aur_NewYear с position: fixed и очень большим z-index, из-за чего он перекрывает элементы профиля и создаёт ощущение, что баннер выходит за границы, особенно на мобильных устройствах.

Решение - ограничить влияние этого элемента. Надо отключить .aur_NewYear на мобильных экранах через media-запрос (до 768px), чтобы гирлянда не накладывалась на контент профиля и не ломала вёрстку. После этого перекрытие баннера исчезло.

Также была ошибка в media-запросе для самого баннера профиля: использовалось значение max-width: 76px, которое никогда не срабатывает. Замени его на корректное max-width: 768px и задай overflow: hidden (и адекватную высоту), из-за чего баннер перестал выходить за пределы блока на мобильных устройствах.

OFFTOP

vk пж дай

Avgust999 · Вчера в 09:31

Также

LIVE SAMP

Ошибка?? Почему это оно заходит

Добро пожаловать!

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

arvion

Программировать - значит понимать

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

arvion

Программировать - значит понимать

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

arvion

Программировать - значит понимать

arvion

Программировать - значит понимать

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

arvion

Программировать - значит понимать

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

arvion

Программировать - значит понимать

Pavnik

arvion

Программировать - значит понимать

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...

Avgust999

ℙ𝕒𝕨𝕟𝕠 𝕙𝕖𝕝𝕡 // ...