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

Тема в разделе "Верстка", создана пользователем vipTelnet, 22 июл 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Всем привет
    Друзья помогите правильно спозиционировать синию пляшку там где адреса и телефоны она должна быть над гугло картой, а не под ней как сейчас.
    http://dostup.htmlmapgenerator.ru/index.php/kontakty
     
  2. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    108
    Для блока contacts получается только с position: absolute и z-index ну и с размером блока там в ручную получается.

    Еще блок текста в разделе о компании косячный
     
    Последнее редактирование: 22 июл 2015
  3. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    можно показать css как надо ?
     
  4. igumenov

    igumenov

    Регистр.:
    30 июн 2009
    Сообщения:
    264
    Симпатии:
    106
    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
    }
     
    Последнее редактирование: 22 июл 2015
  5. invader

    invader Серый кардинал в отставке :)

    Moderator
    • Супермодератор
    Регистр.:
    3 апр 2006
    Сообщения:
    2.587
    Симпатии:
    5.732
    Удивительно "полезное" сообщение.
    Вы будете сообщать о всём, что видите впервые?
     
  6. spyrius

    spyrius Создатель

    Регистр.:
    30 сен 2011
    Сообщения:
    19
    Симпатии:
    7
    Вам нужно дописать правила для стиля .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 всё очень доступно расписано.

    [​IMG]
     
Статус темы:
Закрыта.