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


Баннер


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 16

#1 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 01:15

Здравствуйте, подскажите, пожалуйста, как сделать что бы верхний баннер (зеленый) уменьшался пропорционально размеру окна.
Заранее спасибо.
Аккаунт SL-328526

Прикрепленные изображения

  • Снимок.PNG


#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 743 сообщений

Отправлено 26 Октябрь 2015 - 10:32

Просмотр сообщенияniko1a (26 Октябрь 2015 - 01:15) писал:

Здравствуйте, подскажите, пожалуйста, как сделать что бы верхний баннер (зеленый) уменьшался пропорционально размеру окна.
Заранее спасибо.
Аккаунт SL-328526

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.banner a img {width: 100%;max-width:1168px;}


#3 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 15:38

Что-то не помогает.
и в main.css уже есть свойство:

.banner{
width:100%;
text-align:center;
vertical-align: middle;
width: 100%;
}

Может в нем что-то подправить.

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 743 сообщений

Отправлено 26 Октябрь 2015 - 15:47

Просмотр сообщенияniko1a (26 Октябрь 2015 - 15:38) писал:

Что-то не помогает.
и в main.css уже есть свойство:

.banner{
width:100%;
text-align:center;
vertical-align: middle;
width: 100%;
}

Может в нем что-то подправить.

При применении инструкции из сообщения выше баннер будет уменьшаться прямо пропорционально разрешению экрана.
Уточните, пожалуйста, что у Вас не получилось, возможно имелось в виду что-то другое. Пример уменьшения баннера на скриншотах в приложении.

Прикрепленные изображения

  • Screenshot_1.png
  • Screenshot_2.png
  • Screenshot_3.png


#5 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 16:03

Да, действительно если оставить только свойство:
.banner a img {width: 100%;max-width:1168px;}
то баннер уменьшается, но проблема в том, что он выравнивается по левому краю, нужно чтобы был по центру, если добавить, например text-align:center;, то ничего не меняется.

Прикрепленные изображения

  • Снимок3.PNG


#6 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 743 сообщений

Отправлено 26 Октябрь 2015 - 16:13

Просмотр сообщенияniko1a (26 Октябрь 2015 - 16:03) писал:

Да, действительно если оставить только свойство:
.banner a img {width: 100%;max-width:1168px;}
то баннер уменьшается, но проблема в том, что он выравнивается по левому краю, нужно чтобы был по центру, если добавить, например text-align:center;, то ничего не меняется.

Насколько видно, Вы удалили предыдущий класс .banner, для которого изначально было прописано выравнивание содержимого по центру.
Сейчас Вам необходимо добавить в main.css код:
.banner{
width:100%;
text-align:center;
vertical-align: middle;
}


#7 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 16:14

Оставил все вместе.

.banner a img {width: 100%;max-width:1168px;}
.banner{
width:100%;
text-align:center;
vertical-align: middle;
width: 100%;
}

Теперь все работает, что-то сначала не так сделал, Firefly, большое спасибо.

#8 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 16:42

Подскажите, пожалуйста, еще по слайдеру в центре.
если уменьшить размер обычного браузера (с компа), то он уменьшается, но если зайти с любого мобильного устройства, то он остается большого размера. Пробовал с Windows phone, iphone, ipad везде одинаково.

Прикрепленные изображения

  • wp_ss_20151026_0001.jpg
  • IMG_0750.PNG


#9 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 743 сообщений

Отправлено 26 Октябрь 2015 - 17:11

Просмотр сообщенияniko1a (26 Октябрь 2015 - 16:42) писал:

Подскажите, пожалуйста, еще по слайдеру в центре.
если уменьшить размер обычного браузера (с компа), то он уменьшается, но если зайти с любого мобильного устройства, то он остается большого размера. Пробовал с Windows phone, iphone, ipad везде одинаково.

Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 270px; overflow: hidden;z-index:1;}

Замените на:
#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; height: 270px; overflow: hidden;z-index:1;}


#10 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 17:20

Поменял, так он перестал в окно браузера не помещаться.

В мобильном вроде стало нормально, в с ПК слайдер очень большой.

#11 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 673 сообщений

Отправлено 26 Октябрь 2015 - 17:20

Просмотр сообщенияniko1a (26 Октябрь 2015 - 17:20) писал:

Поменял, так он перестал в окно браузера не помещаться.

В мобильном вроде стало нормально, в с ПК слайдер очень большой.
Очистите кеш браузера.

#12 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 17:28

Да не, дело не в кэше, я его чищу, после внесения изменений,
Тут наверно дело в размере самих изображений, у них ширина 1900 px, но раньше уменьшались до нужного размера.

#13 Ирина345

Ирина345

    Активный участник

  • Модераторы
  • 5 673 сообщений

Отправлено 26 Октябрь 2015 - 17:32

Просмотр сообщенияniko1a (26 Октябрь 2015 - 17:28) писал:

Да не, дело не в кэше, я его чищу, после внесения изменений,
Тут наверно дело в размере самих изображений, у них ширина 1900 px, но раньше уменьшались до нужного размера.
На данный момент слайдер отображается корректно, не совсем понятно, как именно он должен выглядеть вы можете прислать скриншот.

Прикрепленные изображения

  • QIP Shot - Screen 048.png


#14 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 26 Октябрь 2015 - 18:02

Странно, может у вас монитор огромный )
Думаю мне стоит изменить изображение с ширины 1900 px до 1200 px
Сейчас вот так:

Прикрепленные изображения

  • Снимок11.PNG
  • Снимок12.PNG


#15 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 716 сообщений

Отправлено 27 Октябрь 2015 - 00:53

В main.css найдите:
#slider {
	position: relative;
	margin: 0px auto;
	top: 0px;
	left: 0px;
	height: 164px;
	overflow: hidden;
	z-index: 1;
}
.slides_container {
	cursor: move;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1168px;
	height: 164px;
	overflow: hidden;
}
.slides_container img {
	left: 0px !important;
}
попробуйте заменить на:
#slider {
	position: relative;
	margin: 0px auto;
	top: 0px;
	left: 0px;
	height: 164px;
	overflow: hidden;
	z-index: 1;
	width: 100% !important;
}
.slides_container {
	cursor: move;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100% !important;
	height: 164px;
	overflow: hidden;
}
.slides_container img {
	left: 0px !important;
	width: 100% !important;
}


#16 niko1a

niko1a

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

  • Пользователи
  • PipPipPip
  • 54 сообщений

Отправлено 12 Ноябрь 2015 - 23:15

Что-то опять ерунда какая-то, купил монитор 24 дюйма, на нем оказывается вообще все криво.
Подскажите, пожалуйста, как все же сделать так, что бы банер был по середине, в зависимости от размера экрана.

Прикрепленные изображения

  • 2015-11-12 23-09-49 Скриншот экрана.png


#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 716 сообщений

Отправлено 13 Ноябрь 2015 - 01:11

Попробуйте изменить пропорции самих баннеров, например в данном баннере slide5.png белый фон слева занимает меньше пространства чем справа.

В main.css найдите:
.slides_container {
	cursor: move;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 1168px;
	height: 164px;
	overflow: hidden;
}

замените на:
.slides_container {
	cursor: move;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 164px;
	overflow: hidden;
}

далее найдите:
.slides_container img {
	left: 0 !important;
}

замените на:
.slides_container img {
	left: 0 !important;
	width: 100% !important;
}
.slides_container div{width: 100% !important;}





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

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