1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

Задачка по css. Позиционирование кнопки

Главные вкладки

Аватар пользователя digital_sword digital_sword 18 декабря 2018 в 21:59

Здравствуйте!
Вот на этом сайте http://molekula-ufa.ru/ на слайдере кнопка позиционированна абсолютно.
Как ее хитро сделать, чтобы она всегда посередине рамки была (я о горизонтальной позиции)? левее центра.

Центровать и в процентах левее этого значения - думаю не лучшее решение.

Лучший ответ

Аватар пользователя VasyOK VasyOK 19 декабря 2018 в 0:00

Александр, такая проблема попросить дизайнера убрать текст со слайдов? Если да - можешь кнопку не влево а вправо поместить:

/* Убираем это
.layers-header-overlay .wrapper-content .widget:first-child.swiper-container .container {
    padding-top: 4%;
    position: absolute;
    bottom: 50px;
    left: 23%;
    width: auto;
}*/
/* И это
.swiper-slide .container {
    padding-left: 20px;
    padding-right: 20px;
}*/
/*А это добавляем:*/
.swiper-slide .copy-container {
    margin: 0 0 0 50%;
}

Комментарии

Аватар пользователя digital_sword digital_sword 18 декабря 2018 в 22:07

Там вообще куча косяков. Это конечно удобно написать "все верстать зразу правильно и проблем не будет".
На кнопку никакой хитрый костыль не набросить?

Аватар пользователя Phantom63rus Phantom63rus 18 декабря 2018 в 23:30

.swiper-pagination-bullets {left: -15%;}

Только будет хрень, потому что рамка и кнопка спозиционированы отдельно друг от друга. Поскольку переписывать библиотеку слайдера вероятно не лучшая идея, я бы пересмотрел подход к дизайну слайдов.

Аватар пользователя VasyOK VasyOK 19 декабря 2018 в 0:00

Александр, такая проблема попросить дизайнера убрать текст со слайдов? Если да - можешь кнопку не влево а вправо поместить:

/* Убираем это
.layers-header-overlay .wrapper-content .widget:first-child.swiper-container .container {
    padding-top: 4%;
    position: absolute;
    bottom: 50px;
    left: 23%;
    width: auto;
}*/
/* И это
.swiper-slide .container {
    padding-left: 20px;
    padding-right: 20px;
}*/
/*А это добавляем:*/
.swiper-slide .copy-container {
    margin: 0 0 0 50%;
}
Аватар пользователя VasyOK VasyOK 22 декабря 2018 в 13:19

Пожалуйста, но как ты сделал тоже неплохо. Прекрасно понимаю что дизайнера теребить никто не будет.