Jump to content
View in the app

A better way to browse. Learn more.

IPBMafia.ru - поддержка Invision Community, релизы, темы, плагины и приложения

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Featured Replies

Posted

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

Картинка масштабируется при изменении размеров окна браузера, а 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.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.