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


Доработки


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

#21 Ирина345

Ирина345

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

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

Отправлено 25 Август 2014 - 12:13

Просмотр сообщенияMari-ina (25 Август 2014 - 12:04) писал:

Здравствуйте. А как уменьшить размер слайдера, на большом экране он увеличивается, картинка получается размытой. Исходный размер загружала 700*425.
Второй вопрос - как увеличить расстояние между разделами в нижнем меню (сделать как в верхнем)
Здравствуйте, т.к  как у Вас изначально картинка маленькая, то она увеличивается в масштабе до требуемых размеров слайдера
Что бы картинка отображалась корректно Вам нужно изменить размер изображения с 700*425 на 1430*425 к примеру.
По-поводу второго вопроса найдите в main.css
.menu_main li a {line-height: 8px;height: 8px;display:inline-block; padding-right: 20px;padding: 6px 10px 6px 10px;background: url({ASSETS_IMAGES_PATH}head-menu-star.png) 0 50% no-repeat;color: #fff;font-family: Georgia, serif;font-style: italic;font-size: 15px;}
замените на

.menu_main li a {line-height: 8px;height: 8px;display:inline-block; padding-right: 20px;padding: 6px 10px 6px 18px;background: url({ASSETS_IMAGES_PATH}head-menu-star.png) 0 50% no-repeat;color: #fff;font-family: Georgia, serif;font-style: italic;font-size: 15px;}


#22 Mari-ina

Mari-ina

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

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

Отправлено 25 Август 2014 - 12:57

В том-то и дело, что мне не нужен такой большой слайдер. Как уменьшить его размеры?

#23 Ирина345

Ирина345

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

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

Отправлено 25 Август 2014 - 12:59

Просмотр сообщенияMari-ina (25 Август 2014 - 12:57) писал:

В том-то и дело, что мне не нужен такой большой слайдер. Как уменьшить его размеры?
Уточните на скриншоте каких размеров должен быть слайдер.

#24 Mari-ina

Mari-ina

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

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

Отправлено 25 Август 2014 - 13:05

Просмотр сообщенияИрина345 (25 Август 2014 - 12:13) писал:

По-поводу второго вопроса найдите в main.css
.menu_main li a {line-height: 8px;height: 8px;display:inline-block; padding-right: 20px;padding: 6px 10px 6px 10px;background: url({ASSETS_IMAGES_PATH}head-menu-star.png) 0 50% no-repeat;color: #fff;font-family: Georgia, serif;font-style: italic;font-size: 15px;}
замените на

.menu_main li a {line-height: 8px;height: 8px;display:inline-block; padding-right: 20px;padding: 6px 10px 6px 18px;background: url({ASSETS_IMAGES_PATH}head-menu-star.png) 0 50% no-repeat;color: #fff;font-family: Georgia, serif;font-style: italic;font-size: 15px;}

Пропала анимация нижнего меню, в верхнем при подносе курсора раздел поднимается, как сделать также?

#25 AnnaM

AnnaM

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

  • Пользователи
  • PipPipPipPip
  • 1 040 сообщений

Отправлено 25 Август 2014 - 13:05

Просмотр сообщенияMari-ina (25 Август 2014 - 12:57) писал:

В том-то и дело, что мне не нужен такой большой слайдер. Как уменьшить его размеры?
Попробуйте в файле main.css код
.flexslider .slides {
zoom: 1;
}
и замените на
.flexslider .slides {
zoom: 1;
width: 61%;
}
Изображение необходимо будет откорректировать по новым размерам.

#26 Mari-ina

Mari-ina

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

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

Отправлено 25 Август 2014 - 13:10

Просмотр сообщенияИрина345 (25 Август 2014 - 12:59) писал:

Уточните на скриншоте каких размеров должен быть слайдер.
Скрин с маленького экрана, нужно чтобы так было и на большом

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

  • 60.png


#27 Ирина345

Ирина345

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

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

Отправлено 25 Август 2014 - 15:09

Просмотр сообщенияMari-ina (25 Август 2014 - 13:10) писал:

Скрин с маленького экрана, нужно чтобы так было и на большом
Шаблон который Вы используете является адаптивным, слайдер автоматически подстраивается подо все экраны.
Вы можете воспользоваться инструкцией из сообщения Выше,
Можете вручную поменять изображение, т.е.поменять ширину с 700рх на 1430рх.
Так же можно  в коде изменить размер изображения, для этого найдите в main.css код
.flexslider .slides img {
width: 100%;
display: block;
}
замените на


.flexslider .slides img {
width: 1430px;
display: block;
height: 369px;
}



#28 Mari-ina

Mari-ina

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

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

Отправлено 25 Август 2014 - 20:48

Просмотр сообщенияMari-ina (25 Август 2014 - 13:05) писал:

Пропала анимация нижнего меню, в верхнем при подносе курсора раздел поднимается, как сделать также?
как быть с этим вопросом?

#29 Mari-ina

Mari-ina

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

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

Отправлено 25 Август 2014 - 21:28

В верхнем меню при наведении курсора раздел приподнимается, а в нижнем теперь только точки приподнимаются, а нужно чтобы весь раздел (например каталог или корзина итд)

#30 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Август 2014 - 03:50

.menu_main {
margin-left: 10%;
}
замените на:
.menu_main {
display: block;
height: 30px;
margin-left: 10%;
margin-top: -10px;
padding-top: 10px;
}

далее найдите:
.menu_main li {
	display: inline;
	list-style: none outside none;
}
замените на:
.menu_main li {
	display: block;
	list-style: none outside none;
	float: left;
}

и добавьте:
.menu_main li:hover {
display: block;
float: left;
margin-top: -5px;
}


#31 Mari-ina

Mari-ina

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

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

Отправлено 27 Август 2014 - 21:06

Просмотр сообщенияVaccina (26 Август 2014 - 03:50) писал:

.menu_main {
margin-left: 10%;
}
замените на:
.menu_main {
display: block;
height: 30px;
margin-left: 10%;
margin-top: -10px;
padding-top: 10px;
}

далее найдите:
.menu_main li {
display: inline;
list-style: none outside none;
}
замените на:
.menu_main li {
display: block;
list-style: none outside none;
float: left;
}

и добавьте:
.menu_main li:hover {
display: block;
float: left;
margin-top: -5px;
}
Сделала все так, приподнимаются все равно только точки, а не сам раздел.

И еще шапка на смартфоне смотрится караул!!! - контактов нет, корзина спряталась за поиск и все это сдвинулось влево за экран, на планшете контакты ушли за логотип. Весна же адаптивный шаблон - как все это исправить?

#32 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 27 Август 2014 - 21:24

Просмотр сообщенияMari-ina (27 Август 2014 - 21:06) писал:

Сделала все так, приподнимаются все равно только точки, а не сам раздел.

И еще шапка на смартфоне смотрится караул!!! - контактов нет, корзина спряталась за поиск и все это сдвинулось влево за экран, на планшете контакты ушли за логотип. Весна же адаптивный шаблон - как все это исправить?
Здравствуйте.
в main.css
@media only screen and (max-width: 767px) and (min-width: 480px)
#header #cart {
right: 0px;
width: auto;
float: none;
}
измените на
@media only screen and (max-width: 767px) and (min-width: 480px)
#header #cart {
right: 0px;
width: auto;
float: none;
margin-top: 20px;
}
в main.css
@media only screen and (max-width: 480px)
#header #cart {
width: 98%;
min-width: 98%;
float: none;
margin-bottom: 10px;
}
измените на
@media only screen and (max-width: 480px)
#header #cart {
width: 98%;
min-width: 98%;
float: none;
margin-bottom: 10px;
margin-top: 35px;
}


#33 Mari-ina

Mari-ina

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

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

Отправлено 28 Август 2014 - 10:35

Спасибо, корзина встала нормально. Теперь бы еще поиск сместить обратно, он за край экрана влево ушел и слишком большое пространство от поля поиска да значка. При разрешении 800*480 контакты спрятались за логотип. Почему двоится фон - у меня слишком узкая картинка?

#34 batta

batta

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

  • Пользователи
  • PipPipPipPip
  • 1 142 сообщений
  • ГородНижний Новгород

Отправлено 28 Август 2014 - 12:23

Просмотр сообщенияMari-ina (28 Август 2014 - 10:35) писал:

Спасибо, корзина встала нормально. Теперь бы еще поиск сместить обратно, он за край экрана влево ушел и слишком большое пространство от поля поиска да значка. При разрешении 800*480 контакты спрятались за логотип. Почему двоится фон - у меня слишком узкая картинка?
Здравствуйте.
в style.css
@media only screen and (max-width: 767px) and (min-width: 480px)
#header #support {
/* display: none; */
}
измените на
@media only screen and (max-width: 767px) and (min-width: 480px)
#header #support {
/* display: none; */
right: 0;
}
style.css
@media only screen and (max-width: 480px)
#header #search input {
width: 70%;
}
измените на
@media only screen and (max-width: 480px)
#header #search input {
width: 100%;
}


#35 Mari-ina

Mari-ina

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

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

Отправлено 28 Август 2014 - 20:40

Спасибо, расстояние в поиске уменьшилось. Остались следующие вопросы:
1. Поиск смещен за экран влево
2. Двоится фон и на смартфоне и на планшете
3. Смещены контакты за логотип

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

  • 70.png
  • 71.png


#36 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 29 Август 2014 - 04:44

1. В main.css найдите:
#header #search {
	clear: both;
	margin-bottom: 10px;
	margin-left: 20px;
	position: relative;
	width: 100%;
}
замените на:
#header #search {
	clear: both;
	margin-bottom: 10px;
	margin-left: 20px;
	position: relative;
	width: 70%;
}
2. В main.css найдите:
#header_colapse {
	background: url("http://design.mrsam.ru/4.jpg") repeat;
	color: #000000;
	position: relative;
	z-index: 1000;
}
repeat замените на repeat-x fixed
3.найдите:
#header #support {
	right: 0;
}
замените на:
#header #support {
	position: relative;
	right: 0;
}


#37 Mari-ina

Mari-ina

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

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

Отправлено 29 Август 2014 - 22:13

Просмотр сообщенияVaccina (29 Август 2014 - 04:44) писал:

2. В main.css найдите:
#header_colapse {
background: url("http://design.mrsam.ru/4.jpg") repeat;
color: #000000;
position: relative;
z-index: 1000;
}
repeat замените на repeat-x fixed
Теперь вместо дублирующего фона белая полоса

Цитата

3.найдите:
#header #support {
right: 0;
}
замените на:
#header #support {
position: relative;
right: 0;
}
Ничего не изменилось, контакты за логотипом

И еще момент, сама вкладка товара обрезана справа, даже фото не полностью видно
Так задумано, что ни названия, ни цены не видно?

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

  • 72.png
  • 73.png


#38 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 30 Август 2014 - 00:03

2. На данный момент фон у вас зафиксирован и дублируется по горизонтали. Сам фон по высоте заранее лучше больше подобрать, он не обрезается, просто сам блок больше высоты фона.
3.Попробуйте следующее, найдите
#header #support {
	float: right;
	position: absolute;
	right: 310px;
	top: 10px;
	width: 255px;
	z-index: 30;
}
замените на:
#header #support {
	float: right;
	position: absolute;
	right: 280px;
	top: 10px;
	width: 225px;
	z-index: 30;
}
и в самый низ main.css добавьте:
@media only screen and (min-width: 770px) and (max-width: 850px) {
#header #logo img {
	width: 80%;
	margin-top: 15px;
}
}

также найдите:
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
	display: none;
}
замените на:
div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {
	display: block;
}


#39 Mari-ina

Mari-ina

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

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

Отправлено 30 Август 2014 - 19:42

Просмотр сообщенияVaccina (30 Август 2014 - 00:03) писал:

2. На данный момент фон у вас зафиксирован и дублируется по горизонтали. Сам фон по высоте заранее лучше больше подобрать, он не обрезается, просто сам блок больше высоты фона.
Какого размера нужно картинку, чтобы она не дублировалась ни по горизонтали, ни по вертикали?

Просмотр сообщенияVaccina (30 Август 2014 - 00:03) писал:

3.Попробуйте следующее, найдите
#header #support {
float: right;
position: absolute;
right: 310px;
top: 10px;
width: 255px;
z-index: 30;
}
замените на:
#header #support {
float: right;
position: absolute;
right: 280px;
top: 10px;
width: 225px;
z-index: 30;
}
и в самый низ main.css добавьте:
@media only screen and (min-width: 770px) and (max-width: 850px) {
#header #logo img {
width: 80%;
margin-top: 15px;
}
}
На экране 800*480 стало немного лучше, но не до конца, на экране 768*1024 по прежнему контакты за логотипом.

Цитата

И еще момент, сама вкладка товара обрезана справа, даже фото не полностью видно
Так задумано, что ни названия, ни цены не видно?
Вопрос остается открытым

#40 Mari-ina

Mari-ina

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

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

Отправлено 01 Сентябрь 2014 - 17:07

!




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

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