Jump to content

Featured Replies

Posted
comment_81525

Парни помогите разобраться на компе смотрится нормально а на планшете, телефоне по другому смотрите скриншот,в  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; */
}

может как то ещё можно выровнять? 

post-8897-0-65565400-1424501966_thumb.pn

post-8897-0-19347400-1424501986_thumb.pn

comment_81541

Картинка масштабируется при изменении размеров окна браузера, а padding у слоя #ipbwrapper задан жёстко.

 

Картинку растягивать и как-то смещать - не вариант, так как на ней расположен и логотип и контактные данные. Поэтому...

 

 

Варианты исправления:

 

1) Самый простой вариант:

 

задать  padding у слоя #ipbwrapper через %

padding-top: 27%; (примерно так, можно подобрать точнее)

И в принципе всё ). Но я бы ещё в фотошопе у картинки внизу сделал небольшой плавный переход-градиент к чёрному цвету - чтобы нижняя граница картинки не так бросалась в глаза.

 

2) Вариант чуть посложнее:

 

Вставлять картинку не через background а через тег <img>.

Т.е. в шапке после верхнего меню стоит слой с картинкой. Тогда высота слоя будет задаваться высотой картинки и меняться при изменении размеров окна. Тогда #ipbwrapper с padding-top: 0px будет всегда строго под картинкой.

 

3) Вариант сложнее:

 

Изначально планировать вёрстку по-другому: логотип отдельно, контакты - отдельно, картинка-фон - отдельно. Т.е. "мухи - отдельно, котлеты - отдельно". Тогда и логотип не будет никуда уезжать, и контакты можно текстом набрать (кстати - плюс для клиентов, чтобы в выдаче сразу видеть телефоны, не заходя на сайт) и т.д.


Кстати, рекомендую сместить картинку вниз на 30-36px, чтобы при уменьшении окна логотип не обрезался сверху: 

post-24610-0-67446400-1424513632_thumb.j

 
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%;
}

результат:

post-24610-0-94358600-1424513634.jpg

 
в полноразмерном режиме:

post-24610-0-73848000-1424513806_thumb.j

 
Guest
This topic is now closed to further replies.

Последние посетители 0

  • No registered users viewing this page.