Как Сделать Адаптивность Для Разных Разрешений
#21
Отправлено 06 Август 2014 - 07:27
Вся шапка съезжает.
#22
Отправлено 06 Август 2014 - 23:02
#module_area { }замените на:
.header_top { clear: none; float: left; width: 60%; margin: 10px 0; }
далее найдите:
#module_area { float: left; height: 141px; margin-left: 60px; padding: 5px 0; position: relative; text-align: center; width: 570px; z-index: 99999; }замените на:
#module_area { float: left; height: 182px; margin-left: 60px; padding: 5px 0; position: relative; text-align: center; width: 570px; z-index: 99; }далее найдите:
#header #cart { float: right; min-width: 300px; position: relative; right: 20px; top: 20px; z-index: 20; }замените на:
#header #cart { float: right; margin: 20px 20px 0 0; min-width: 300px; position: relative; z-index: 20; } .header_top{ clear:both; }
в самом шаблоне HTML попробуйте найти
<div class="clear"></div>перед:
<div class="header_top">и после данного блока и удалить их
#24
Отправлено 07 Август 2014 - 22:58
Скриншота в последнем посте у вас не обнаруживаю, по инструкции выше, меню с поиском у вас должны переместиться влево от контактов(ранее они были у вас под контактами), возможно я неправильно вас поняла, укажите пожалуйста желаемое отображение при данном разрешении
#25
Отправлено 08 Август 2014 - 06:35
Скриншота в последнем посте у вас не обнаруживаю, по инструкции выше, меню с поиском у вас должны переместиться влево от контактов(ранее они были у вас под контактами), возможно я неправильно вас поняла, укажите пожалуйста желаемое отображение при данном разрешении"
Хотелось бы что бы всегда шапка сайта при разных разрешениях была одна и та же не съезжала а лишь уменьшалась, подробнее на картинках внизу.
#26
Отправлено 08 Август 2014 - 23:40
Можно как вариант уменьшать баннер, в этом случае отмените последние изменения по перемещению меню и поиска и вместо замененных кодов вставьте:
.flexslider .slides img { display: block; height: auto; width: 100%; } .flexslider { width: 50%; }в этом случае все блоки должны сохранить положение, а слайдер уменьшиться
#29
Отправлено 11 Август 2014 - 12:38
Cybernetic (11 Август 2014 - 12:02) писал:
Подскажите пожалуйста как сделать вид(сайта) для Internet Explorer таким же как и в firefox
т.е. с сохранением адаптивности в общем отзеркалить отображение в firefox на Internet Explorer
Подробнее на картинках внизу.
Для начала из шаблоне HTML удалите код:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
#30
Отправлено 13 Август 2014 - 06:43
Подскажите как сделать нормальную адаптивность для разрешения 1024x768 ?
То есть что бы шапка сайта видоизменялась с разрешения 1222x"любое число" - просто пропорции баннеров и текста в шапке сайта пропорционально уменьшались не сдвигаясь и не съезжая.
Почему-то сайт отображается нормально(без искажений и сохранением адаптивности) только на разрешении 1222x"любое число"
сайт - http://santechbomba.ru/
подробнее что хотелось бы на картинках
PS: Вот уже 2 недели пытаюсь добиться помощи на форуме в этой проблеме, пожалуйста помогите.
#31
Отправлено 13 Август 2014 - 09:58
зайдите в Сайт -> Редактор шаблонов -> main.css и замените
#module_area { float: left; height: 182px; margin-left: 60px; padding: 5px 0; position: relative; text-align: center; width: 570px; z-index: 99; }на
#module_area { float: left; height: 182px; padding: 5px 0; position: relative; text-align: center; width: 50%; z-index: 99; }далее
#header #cart { float: right; margin: 0px 20px 0 0; min-width: 300px; position: relative; z-index: 20; }замените на
#header #cart { float: right; position: relative; z-index: 20; width: 226px; }после чего
.styled-select { width: 203px; height: 48px; overflow: hidden; background: url(http://st.santechbomba.ru/7/1270/498/strelka.png) no-repeat left; color: white; padding-left: 19px; margin: 0 auto; margin: 0 0 0 80px; }поменяйте на
.styled-select { width: 203px; height: 48px; overflow: hidden; background: url(http://st.santechbomba.ru/7/1270/498/strelka.png) no-repeat left; color: white; padding-left: 19px; margin: 0; }затем
#tel-change { font-family: Arial; margin: 15px 0 4px 76px; }на
#tel-change { font-family: Arial; margin: 15px 0 4px 0px; }а блок
.time { width: 180px; height: 29px; color: white; font-style: italic; font-size: 32px; /* margin-left: 97px; */ overflow: hidden; margin: 5px 0 0px 122px; padding: 3px 1px 0 0; }на
.time { width: 180px; height: 29px; color: white; font-style: italic; font-size: 32px; /* margin-left: 97px; */ overflow: hidden; margin: 5px 0 0px 48px; padding: 3px 1px 0 0; }
#32
Отправлено 13 Август 2014 - 11:14
- баннер при низких разрешениях урезается, хорошо было бы если бы он не урезался а лишь делался меньше размером
- кнопки навигации меню сьезжают к левому краю
- поиск сьехал
Более подробнее что бы хотелось на картинках внизу
#33
Отправлено 13 Август 2014 - 11:40
Cybernetic (13 Август 2014 - 11:14) писал:
- баннер при низких разрешениях урезается, хорошо было бы если бы он не урезался а лишь делался меньше размером
- кнопки навигации меню сьезжают к левому краю
- поиск сьехал
Более подробнее что бы хотелось на картинках внизу
<div id="module_area"> <a href="http://santechbomba.ru/page/stock"> <div id="flexslideshow" class="flexslider"> <ul class="slides"> <li> <div class="bigPic" style="width: 572px; height: 182px; background:url({ASSETS_IMAGES_PATH}2a.png) no-repeat;" ></div> <img src="{ASSETS_IMAGES_PATH}2a.png" alt="Slide 1" class="slide_img"> </li> <li> <div class="bigPic" style="width: 572px; height: 182px; background:url({ASSETS_IMAGES_PATH}2a1.png) no-repeat;"></div> <img src="{ASSETS_IMAGES_PATH}2a1.png" alt="Slide 2" class="slide_img"> </li> <li> <div class="bigPic" style="width: 572px; height: 182px; background:url({ASSETS_IMAGES_PATH}2a3.png) no-repeat;"></div> <img src="{ASSETS_IMAGES_PATH}2a3.png" alt="Slide 3" class="slide_img"> </li> </ul> </a></div> </div>на
<div id="module_area"> <a href="http://santechbomba.ru/page/stock"> <div id="flexslideshow" class="flexslider"> <ul class="slides"> <li> <div class="bigPic" style="background-size: 100%; height: 190px; background:url({ASSETS_IMAGES_PATH}2a.png) no-repeat;" ></div> <img src="{ASSETS_IMAGES_PATH}2a.png" alt="Slide 1" class="slide_img"> </li> <li> <div class="bigPic" style="background-size: 100%; height: 190px; background:url({ASSETS_IMAGES_PATH}2a1.png) no-repeat;"></div> <img src="{ASSETS_IMAGES_PATH}2a1.png" alt="Slide 2" class="slide_img"> </li> <li> <div class="bigPic" style="background-size: 100%; height: 190px; background:url({ASSETS_IMAGES_PATH}2a3.png) no-repeat;"></div> <img src="{ASSETS_IMAGES_PATH}2a3.png" alt="Slide 3" class="slide_img"> </li> </ul> </a></div> </div>По поводу кнопок и поиска - уточните пожалуйста на скриншоте, как Вы желаете, чтоб они были расположены?
#34
Отправлено 13 Август 2014 - 12:01
http://santechbomba.ru/
Кнопки поиска как на картинке внизу
#35
Отправлено 13 Август 2014 - 12:28
@media only screen and (max-width: 1024px) { .header_top { clear: none; float: left; width: 60%; margin: 10px 0; }на
@media only screen and (max-width: 1024px) { .header_top { clear: none; float: left; width: 100%; margin: 10px 0; }затем
#header #search { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); float: right; margin: -10px 10px 10px 0; position: relative; vertical-align: middle; width: 260px; }замените на
#header #search { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); float: right; margin: -10px 10px 10px 0; position: relative; vertical-align: middle; width: 220px; }и
#header #search input { background: none repeat scroll 0 0 #fff; color: #ccc; height: 21px; margin-right: 5px; padding: 5px; width: 215px; }поменяйте на
#header #search input { background: none repeat scroll 0 0 #fff; color: #ccc; height: 21px; margin-right: 5px; padding: 5px; width: 175px; }
#36
Отправлено 14 Август 2014 - 08:46
Помогите пожалуйста передвинуть слайдер на главной странице так же как на картинках вниуз
Более подробнее что хочу на картинках внизу
НО так что бы не терялась адаптивность для разрешения 1024,.
Прикрепленные изображения
#37
Отправлено 14 Август 2014 - 23:00
<div id="search"> <form id="search_mini_form" class='button'action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Умный поиск ...') return false;"> <button title="Искать" type="submit" value="Поиск" class="button-search"></button> <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Умный поиск ......{% ENDIF %}" onfocus="if(this.value=='Умный поиск ......'){this.value='';}" onblur="if(this.value==''){this.value='Умный поиск ......';}" onclick="this.value = '';" onkeydown="this.style.color = '#000000';"/> </form> </div> <!-- /Форма поиска -->поставив его после:
<img src="{ASSETS_IMAGES_PATH}2a3.png" alt="Slide 3" class="slide_img"> </li> </ul> </a></div>
далее в main.css найдите:
#header #search { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); float: right; margin: -10px 10px 10px 0; position: relative; vertical-align: middle; width: 220px; }замените на:
#header #search { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); float: left; margin: 0; position: relative; vertical-align: middle; width: 220px; }
далее найдите:
#module_area { float: left; height: 182px; padding: 5px 0; position: relative; text-align: center; width: 50%; z-index: 99; }замените на:
#module_area { float: left; height: 182px; padding: 5px 0; position: relative; text-align: center; width: 50%; z-index: 99; }
#39
Отправлено 15 Август 2014 - 07:09
Cybernetic (15 Август 2014 - 06:34) писал:
к сожалению ваши инструкции не помогают решить проблему
более подробнее на картинках внизу
В main.css найдите код:
@media all and (min-width: 990px) { #header .flexslider li img.slide_img{display:none !important;} #header .flexslider li .bigPic {display:block !important;} #header.borderless {border-bottom:none;} }
и замените на:
@media all and (min-width: 990px) { #header .flexslider li img.slide_img{display:block !important;} #header .flexslider li .bigPic {display:none !important;} #header.borderless {border-bottom:none;} }
Слайдер должен перестать обрезаться. По поводу поиска - сделать не получится, т.к. сайт адаптивный и в зависимости от разрешения блоки будут двигаться относительно друг друга. По поводу уменьшения шапки, Вы хотите чтобы вместо перемещения блоков уменьшался их шрифт?
#40
Отправлено 15 Август 2014 - 07:57
Вы писали - "сайт адаптивный и в зависимости от разрешения блоки будут двигаться относительно друг друга."
Пусть двигаются только с уменьшением разрешения пропорционально уменьшаются, т.е. я хочу что бы шапка сайта была ТОЧНО такой же как и сейчас(при высоком разрешении)
и при уменьшении разрешения блоки уменьшались так же не наваливаясь друг на друга и не вытесняя вплоть до мобильного разрешения(до 650x) при достижении разрешения 650 действуют иные настройки(они сейчас и действуют) .
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных