Почему информация выводится поверх блока?

Тема в разделе "Верстка", создана пользователем illmano, 21 ноя 2013.

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

    illmano

    Регистр.:
    20 июн 2012
    Сообщения:
    170
    Симпатии:
    14
    Пытаюсь вставить социальные кнопки, но они почему-то выводятся не в блоке а поверх его. Не могу понять почему.
    [​IMG]

    Кто подскажет в чем ошибка?
    Код можно посмотреть тут http://goo.gl/rPBwx3

    Просто не знаю какую часть кода сюда постить.
     
  2. Genk0

    Genk0 Инквизитор из раздела J!

    Moderator
    Регистр.:
    2 июн 2010
    Сообщения:
    1.627
    Симпатии:
    1.330
    1. .social_bar { overflow: hidden;}
     
    illmano и yaski нравится это.
  3. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    474
    Симпатии:
    277
    Код:
    .social_bar {
        background: url("images/sb_body_bg.png") repeat-x scroll 0 0 #FFFFFF;
        border: 1px solid #86502F;
        border-radius: 5px;
        height: 20px; /*добавить*/
        margin-bottom: 0;
        margin-top: -30px;
        padding: 12px;
    }
    height: 20px; добавь
     
    illmano нравится это.
  4. e1f1k

    e1f1k Создатель

    Заблокирован
    Регистр.:
    29 окт 2008
    Сообщения:
    24
    Симпатии:
    2
    Тогда уж не 20px, а 24px - высота кнопок гугл плюс. Чтоб не заморачиваться можно сделать - "display:inline-block; " а вместо height:20px; размер задать padding. Он еще и float заменяет отчасти, только расположение по baseline у него, а не по верхнему краю.
     
  5. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    174
    Симпатии:
    107
    Дело не в этом. Тут проблема с определением границ блока. По умолчанию блок руководствуется своими размерами, и не учитывает границы вложенных блоков. Чтобы все сделать "наоборот" и не указывать четкие размеры, можно воспользоваться, например, кроссбраузерным решением .clearfix (добавлять такой класс ко всем элементам, которые будут учитывать размеры вложенных элементов:(
    HTML:
    .clearfix{
        min-height: 0;
        *zoom: 1;
    }
    .clearfix:before,
    .clearfix:after{
        content: " ";
        height: 0;
        width: 100%;
        display: block;
        overflow: hidden;
        visibility: hidden;
        float :left;
    }
    Это мой взгляд на .clearfix. Он отличается большей совместимостью со старыми браузерами, чем у того же bootstrap а, и не выводит неожиданностей, когда content: "." задают так. Я использую пробел. Этого хватит-) Собственно.