3 колоночный шаблон

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

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

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Сделал 3 колоночный шаблон все вроде нормально но когда в центральной колонке
    вставляется clear:both после этого весь контент центральной колонки опускается под левую,
    подскажите как исправить
    Перейти по ссылке
     

    Вложения:

    • 1.jpg
      1.jpg
      Размер файла:
      121,7 КБ
      Просмотров:
      25
  2. Stas-P

    Stas-P

    Регистр.:
    7 сен 2013
    Сообщения:
    165
    Симпатии:
    126
    Убрать clear:both.
    Так как этим ты говоришь - отменит обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.
     
  3. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Да нет же я где то в стилях ошибся, в других же 3 колоночных шаблонах все нормально, и даже есть там внутри центральной колонки стоит clear:both это не приводит к смещению всего контента
     
  4. yaski

    yaski

    Регистр.:
    21 фев 2010
    Сообщения:
    491
    Симпатии:
    292
    .ph-cb {
    clear: both; <--- удалить
    }
    в Перейти по ссылке 935 строка

    Или вообще этот див
    Код:
     <div class="ph-cb"></div>
    удали, он у тебя пустой
     
  5. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    Удалил как Вы предлагаете, но все равно не то.
    Слово упорядочить из за этого съехало на вверх
     

    Вложения:

    • 2.jpg
      2.jpg
      Размер файла:
      276,5 КБ
      Просмотров:
      12
  6. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    181
    Добавьте в:
    #content{
    ..........................
    position: absolute; /* этого не было, а потом появилось :) xz */
    }
    Тогда всё переедет вверх и, вдобавок, можно будет от таких диких значений margin избавиться.

    offtop:
    А почему вот это не в подвале:
    Powered by Перейти по ссылке
    ?

    Сам врубился, это наверное от модуля. Так?
     
    Последнее редактирование: 19 ноя 2013
  7. vipTelnet

    vipTelnet Постоялец

    Регистр.:
    14 янв 2013
    Сообщения:
    135
    Симпатии:
    11
    сделал теперь встало нормально но верхнее меню которое тоже position: absolute; стало под #content
    Добавил следующие стили
    #content{
    margin:0 auto;
    margin-top:0px;
    margin-left:280px;
    margin-right:170px;
    margin-bottom: 50px;
    padding:0px;
    padding-top:0px;
    min-height:250px;
    position: absolute;
    z-index:1;
    }
    #topmenu li ul{
    display:none;
    position:absolute;
    z-index:9999;
    }
    Должно ж работать и меню должно было встать под контент
     

    Вложения:

    • 3.jpg
      3.jpg
      Размер файла:
      177,9 КБ
      Просмотров:
      6
  8. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    181
    Вы знаете, я посмотрел саму вёрстку и меня смутило расположение блоков.
    Если стили отключить, то получается, что контент идёт последним блоком, соответственно чтобы поставить #content в центр, приходится его туда запихивать коленом.
    Расположите всё в нормальном порядке и блоки встанут флоатом сами собой.
    На скрине 2 варианта.
     

    Вложения:

  9. e1f1k

    e1f1k Создатель

    Заблокирован
    Регистр.:
    29 окт 2008
    Сообщения:
    24
    Симпатии:
    2
    Вообще верстка очень странная. Попробуйте прежде чем верстать - нарисовать в каком-нить проектировщике типа pencil блоки все и логически их выстроить, а потом уже путем минимального количества стилей все описать. Даже сама конструкция

    #content{
    margin:0 auto;
    margin-top:0px;
    margin-left:280px;
    margin-right:170px;
    margin-bottom: 50px;
    padding:0px;
    padding-top:0px;
    min-height:250px;
    position: absolute;
    z-index:1;
    } - Внушает ужас, не удивительно, что вы путаетесь потом в результате.

    Вполне заменяется на:
    #content {
    position: absolute;
    min-height: 250px;
    padding: 0px;
    margin: 0 170px 50px 270px;
    z-index: 1;
    }

    По поводу одного над другим - у одного z-index: 1; у второго делаем z-index: 10; и все.