Spray Опубликовано 21 февраля, 2015 Поделиться Опубликовано 21 февраля, 2015 Парни помогите разобраться на компе смотрится нормально а на планшете, телефоне по другому смотрите скриншот,в style.css прописано следующее background: #000000 url(__tltaxi-forum.ru/uploads/img/taxi_mega.png) no-repeat 50% 0; /* tails: img-bg; */ background-size: 100%; #ipbwrapper { margin: 0 auto; width: 90%; padding-top: 370px; /* tails: img-bg; */ } может как то ещё можно выровнять? Ссылка на комментарий Поделиться на другие сайты Поделиться
Viktar83 Опубликовано 21 февраля, 2015 Поделиться Опубликовано 21 февраля, 2015 Картинка масштабируется при изменении размеров окна браузера, а padding у слоя #ipbwrapper задан жёстко. Картинку растягивать и как-то смещать - не вариант, так как на ней расположен и логотип и контактные данные. Поэтому... Варианты исправления: 1) Самый простой вариант: задать padding у слоя #ipbwrapper через % padding-top: 27%; (примерно так, можно подобрать точнее) И в принципе всё ). Но я бы ещё в фотошопе у картинки внизу сделал небольшой плавный переход-градиент к чёрному цвету - чтобы нижняя граница картинки не так бросалась в глаза. 2) Вариант чуть посложнее: Вставлять картинку не через background а через тег <img>. Т.е. в шапке после верхнего меню стоит слой с картинкой. Тогда высота слоя будет задаваться высотой картинки и меняться при изменении размеров окна. Тогда #ipbwrapper с padding-top: 0px будет всегда строго под картинкой. 3) Вариант сложнее: Изначально планировать вёрстку по-другому: логотип отдельно, контакты - отдельно, картинка-фон - отдельно. Т.е. "мухи - отдельно, котлеты - отдельно". Тогда и логотип не будет никуда уезжать, и контакты можно текстом набрать (кстати - плюс для клиентов, чтобы в выдаче сразу видеть телефоны, не заходя на сайт) и т.д. Кстати, рекомендую сместить картинку вниз на 30-36px, чтобы при уменьшении окна логотип не обрезался сверху: body { font: normal 13px helvetica, arial, sans-serif; position: relative; background: #000 url(__tltaxi-forum.ru/uploads/img/taxi_mega.png) no-repeat 50% 36px; background-size: 100%; } тогда #ipbwrapper { margin: 0 auto; width: 90%; padding-top: 30%; } результат: в полноразмерном режиме: Spray 1 Ссылка на комментарий Поделиться на другие сайты Поделиться
Spray Опубликовано 21 февраля, 2015 Автор Поделиться Опубликовано 21 февраля, 2015 Спасибо друг! выручил! тему можно закрыть Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения