Перейти к содержимому


Настройка слайдера SweetThumbnails


Сообщений в теме: 10

#1 Алекс

    Пользователь

  • Клиенты WebForMySelf
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург
Репутация: 3

Отправлено 22 Март 2013 - 09:22

Здравствуйте, уважаемые мастера!
Столкнулся с такой проблемой... Имеется симпатичный слайдер SweetThumbnails, который мне желательно подработать под свои нужды, те. нужна небольшая настройка слайдера:
под картинкой расположены кликабельные "шарики" (они же при подводе мышки отображают превьшки). Так вот... Если задать блоку с "шариками" ширину, то отцентрировать его (блок) относительно основной картинки нет проблем, но при добавлении картинок "шарики" становятся в два ряда, что мне не нравится. Если ширину блока не ставить, то "шарики" становятся в один ряд, но этот блок мне никак не удается отцентровать (испробовал больше десятка способов).
Проще говоря, мне необходимо чтобы блок с "шариками" автоматически вставал по центру при любом кол-ве этих самых "шариков"...
На данный момент я окружил блок красным бордюром для лучшей видимости происходящего (в ЦСС строка 84)))
Буду признателен за помощь)))
Прикладываю архив с заготовкой.
Спасибо!

Прикрепленные файлы



#2 Сашка

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 84 сообщений
Репутация: 3

Отправлено 15 Апрель 2013 - 10:19

Здравствуйте!

В классе .ps_nav - уберите свойство position: absolute, оно там не нужно.

Затеам,
ul.ps_nav li{
float: left; - Вместо float: left; поставьте display: inline-block;
}

А в
ul.ps_nav{
list-style:none;
text-align: center;
}

добавьте свойство text-align: center; - имеенно из-за него будет центрироваться.

Вот исправленный Ваш .css файл - Прикрепленный файл  style.rar   910байт   4 Количество загрузок:

#3 Алекс

    Пользователь

  • Клиенты WebForMySelf
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург
Репутация: 3

Отправлено 16 Апрель 2013 - 10:03

Здравствуйте, уважаемый тезка! Я Вам очень признателен за то, что нашли время и откликнулись на мою просьбу. Спасибо!
Но, к сожалению, Ваши предложения не исправили ситуацию. Я тоже ставил для списка text-align: center и он, естественно, центровался... Но при таком "раскладе" мини-картинки над кнопками не смещаются пропорционально, а остаются с левой стороны. Кстати, в Вашем ЦСС убран из .ps_nav свойство position: absolute... Из-а чего картинки "вылетели" наверх (над большим изображением), при этом становятся также слева.
Мне кажется, что надо список обернуть в див принимающий размер общей ширины суммы кнопок и его центровать. Тогда и мини-картинки можно было бы спозиционировать относительно этого дива ..
Но у меня так и не получилось это сделать. Нагородил сложную "дивную" конструкцию но(((((
Тем не менее ещё раз СПАСИБО ВАМ БОЛЬШОЕ!

#4 Бернацкий Андрей

    Администратор

  • Администраторы
  • 2 336 сообщений
  • ГородМинск
Репутация: 187

Отправлено 16 Апрель 2013 - 10:22

Добрый день.

Вам всего лишь для .ps_nav нужно одно свойство добавить, а одно убрать:

.ps_nav {
	border: 3px solid #B32525;
	display: table;
	margin: 20px auto;
	padding: 0;
}

То есть в 84-ую строку файла стилей дописать display: table; а position:absolute; удалить и этого класса.

На всякий случай прикрепляю исправленны

#5 Бернацкий Андрей

    Администратор

  • Администраторы
  • 2 336 сообщений
  • ГородМинск
Репутация: 187

Отправлено 16 Апрель 2013 - 10:23

Добрый день.

Вам всего лишь для .ps_nav нужно одно свойство добавить, а одно убрать:

.ps_nav {
	border: 3px solid #B32525;
	display: table;
	margin: 20px auto;
	padding: 0;
}

То есть в 84-ую строку файла стилей дописать display: table; а position:absolute; удалить и этого класса.

На всякий случай прикрепляю исправленный архив.

Прикрепленные файлы



#6 Алекс

    Пользователь

  • Клиенты WebForMySelf
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург
Репутация: 3

Отправлено 16 Апрель 2013 - 10:45

Здравствуйте, уважаемый Андрей! Спасибо за ответ!
Если мы убираем position:absolute, то мини-картинки вылетают на верх (левая верхняя часть общего дива).... А display: table; я тоже ставил(((((

Прикрепленные файлы

  • Прикрепленный файл  Snap01536.jpg   23,3К   9 Количество загрузок:


#7 Бернацкий Андрей

    Администратор

  • Администраторы
  • 2 336 сообщений
  • ГородМинск
Репутация: 187

Отправлено 16 Апрель 2013 - 10:55

Ок.

Добавьте относительное позиционирование и все будет работать как нужно.

.ps_nav{
padding:0;
border:solid 3px #b32525;
margin:20px auto;
display:table;
position:relative;
}


#8 Бернацкий Андрей

    Администратор

  • Администраторы
  • 2 336 сообщений
  • ГородМинск
Репутация: 187

Отправлено 16 Апрель 2013 - 10:56

Архив прикрепить с рабочим вариантом или поправите сами?

#9 Алекс

    Пользователь

  • Клиенты WebForMySelf
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург
Репутация: 3

Отправлено 16 Апрель 2013 - 11:15

Анрей, Вы гений!
А моя собственная умственная убогость даже уже веселит(((( relative в контексте с table - я не додумался поставить.... Жуть...

Но теперь всё работает блестяще! СПАСИБО!!!
Архив не надо, спасибо... Я, как мне казалось, немного дружил с несложным ЦСС, но теперь, правда, сомневаюсь....
Счет, пожалуйста....

#10 Бернацкий Андрей

    Администратор

  • Администраторы
  • 2 336 сообщений
  • ГородМинск
Репутация: 187

Отправлено 16 Апрель 2013 - 14:08

table - одно из значений свойства display. Отвечает за поведение элемента (элемент будет как строчный, блочный, таблица, строка таблицы и т.д.). А relative - значение свойства position. Отвечает за позиционирование элементов. И вот тут, всплывает большой нюанс: позиционирование применяется не только для того, чтобы элементы на странице подвинуть в какую-нибудь сторону, а еще и для того, чтобы создать разметку страницы и заставить ее вести себя так, как нужно. А подвигать элементы можно и margin-ом )))

Дел тут было на 3 минуты, так что без счета обойдемся. ;)/>

P.S. Как правило на форуме реагируем достаточно быстро на обращения. В крайних случаях в течение суток даем ответ. А ваш вопрос, наверное "мимо всех проскочил" и так и остался без внимания. Если б Сашка не начал его ковырять, так и остался бы без ответа. В следующий раз давайте о себе знать, если в течение суток ответа не будет на вопрос.

#11 Алекс

    Пользователь

  • Клиенты WebForMySelf
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург
Репутация: 3

Отправлено 16 Апрель 2013 - 15:07

Ещё раз громадное спасибо!!!
А Вами вышескаанное - учту))))





Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных