Позиционирование синей пляшки

Статус
В этой теме нельзя размещать новые ответы.

vipTelnet

Постоялец
Регистрация
14 Янв 2013
Сообщения
143
Реакции
11
Всем привет
Друзья помогите правильно спозиционировать синию пляшку там где адреса и телефоны она должна быть над гугло картой, а не под ней как сейчас.
Для просмотра ссылки Войди или Зарегистрируйся
 
Всем привет
Друзья помогите правильно спозиционировать синию пляшку там где адреса и телефоны она должна быть над гугло картой, а не под ней как сейчас.
Для просмотра ссылки Войди или Зарегистрируйся
Для блока contacts получается только с position: absolute и z-index ну и с размером блока там в ручную получается.

Еще блок текста в разделе о компании косячный
 
Последнее редактирование:
Для блока contacts получается только с position: absolute и z-index ну и с размером блока там в ручную получается.

Еще блок текста в разделе о компании косячный
можно показать css как надо ?
 
можно показать css как надо ?
HTML:
.item-page .contacts {
  background-color: #0091dc;
  padding: 30px 0px;
  color: white;
  display: block;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 99999999999;
}

#map_canvas1496333342 {
  margin-bottom: -20px;
margin-top:-50px
}
 
Последнее редактирование:
Вам нужно дописать правила для стиля .item-page .contacts в style.css следующим образом:

Код:
.item-page .contacts {
    background-color: #0091dc;
    padding: 30px 0px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    margin: -50px 0 0;
    left: 0;
    width: 100%;
}

margin: -50px 0 0; - убираем отступы слева, справа и снизу
left: 0; - указываем отступ от левого края экрана для абсолютного позиционирования
width: 100%; - растягиваем синий блок на всю ширину экрана

Если не добавлять эти правила, дефолтные значения будут браться с бутстраповского файла стилей bootstrap.min.css (смотрите код блока в Developer Tools в хроме или Bugzilla в FF)

Еще желательно поработать с адаптивной сеткой bootstrap (медиа запросы) так, чтобы блоки с контактами (и вообще все элементы на сайте) правильно позиционировались и оставались читабельными на небольших разрешениях экранов. Например, блок с телефонами на синем фоне было бы хорошо переносить под блок с адресом, а почтовые ящики в следующий ряд еще ниже на разрешениях меньше 460px в ширину. В документации к bootstrap всё очень доступно расписано.

9c67f2493c5c8c658fd87cf9f231e1c5.png
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху