Резиновая блочная верстка с фиксированными колонками по бокам

(Ответов: 10, Просмотров: 4386)
Страница 1 из 2 12 Последняя
  1. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    В этой статье я хотел бы рассказать о моих попытках приручить блочную верстку под ситуацию, когда нужно сделать верстку растягивающуюся, но только для центральной колонки. Т.е. чтобы боковые колонки слева и справа имели фиксированную ширину, а центральная колонка с основным содержимым заполняла все оставшееся пространство окна браузера.

    Для начала рассмотрим стандартную разметку для блочной верстки.

    Код HTML:
    <div id="wrapper"> <div id="header">
        Шапка
      </div> <div id="content_right"> <div id="content">
          Контент
        </div> <div id="right">
          Правая колонка
        </div> </div> <div id="left">
        Левая колонка
      </div> <div id="footer">
        Подвал
      </div> </div>
    Блок wrapper служит «оберткой» для всей нашей верстки Назначения остальных блоков такие: header – заголовок или шапка сайта; content – основное содержимое сайта (центральная колонка); right – правая колонка; left – левая колонка; footer – «подвал» сайта; content_right – вспомогательный (не семантический) блок, содержащий центральную и правую колонки сайта.

    Данная модель прекрасно подходит для верстки с фиксированными или заданными процентным соотношением колонками. Для нашей же задачи необходимо добавить два не семантических элемента content_right_inner и content_center. Вот как это выглядит.

    Код HTML:
    <div id="wrapper"> <div id="header">
        Шапка
      </div> <div id="content_right"> <div id="content_right_inner"> <div id="content_center"> <div id="content">
              Контент
            </div> </div> <div id="right">
            Правая колонка
          </div> </div> </div> <div id="left">
        Левая колонка
      </div> <div id="footer">
        Подвал
      </div> </div>
    Далее пропишем стили для наших блоков. Для начала зададим минимальную ширину сайта в 800 пикселей.

    Код HTML:
    #wrapper
    {
      min-width: 800px;
    }
    Боковые колонки сделаем шириной в 200 пикселей и с помощью отрицательных и положительных margin-ов описываем остальные стили.

    Код HTML:
    #header
    {
      height: 100px;
      color: white;
      background-color: blue;
    }
    #content_right
    {
      width: 100%;
      float: right;
      margin-left: -200px;
    }
    #content_right_inner
    {
      margin-left: 200px;
    }
    #content_center
    {
      width: 100%;
      float: left;
      margin-right: -200px;
    }
    #content
    {
      margin-right: 200px;
      color: white;
      background-color: green;
    }
    #right
    {
      width: 200px;
      float: right;
      color: white;
      background-color: gray;
    }
    #left
    {
      width: 200px;
      float: left;
      color: white;
      background-color: red;
    }
    #footer
    {
      clear: both;
      height: 50px;
      color: white;
      background-color: purple;
    }
    В завершении не забудьте прописать тип документа в начале файла. К сожалению, данный способ заработал у меня только при строгом типе xhtml 1.0.

    Код HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    В итоге, при некоторых ограничениях на тип документа, мы получили резиновую блочную верстку с фиксированными колонками по бокам. При этом основное содержимое сайта (центральная колонка) находится выше боковых колонок, что положительно сказывается на продвижении сайта в поисковиках.

    Автор статьи: http://chtonovenkogo.ru
    • 1

    Спасибо сказали:

    FullHouse(04.10.2011),
  2. Дипломник
    • Регистрация: 16.04.2011
    • Сообщений: 150
    • Репутация: 48
    Мой вариант, вроде, с меньшим кодом
    PHP код:
        <div id="header"><p>Шапка</p></div>
            <
    div id="left-col">Левая колонка</div>
            <
    div id="right-col">Правая колонка</div>

            <
    div id="center-col">Центральная колонка</div>
        <
    div id="footer">футер</div
    и CSS
    PHP код:
    /*Границы для вида*/
    #header {width:100%; height:200px; border: 1px solid black;}
    #left-col {width:250px; float:left; border: 1px solid green;}
    #right-col {width:250px; float:right; border: 1px solid green;}
    #center-col {margin:0 250px 0 250px; border: 1px solid red; height:500px;}
    #footer {width:100%; height:200px; border: 1px solid black; clear: both;} 
    Валидность не гарантирую(не проверял), но работает точно.
    Скачать одним архивом http://www.qpqr.ru/htmlTemplate.rar

    Кстати, вместо wrapper я бы задействовал body, если фон будет белый.
    • 1

    Спасибо сказали:

    OKyJIucT(04.10.2011),
  3. Дипломник Аватар для Faraday
    • Регистрация: 17.04.2011
    • Сообщений: 143
    • Репутация: 30
    Мой вариант, вроде, с меньшим кодом
    Минус этого варианта в том, что сначала идут сайдбары, а только потом контент. Поэтому сначала в браузер загружается (или поисковый робот ест) баннеры, всякие теги, и прочий мусор, и только потом контент.
    Для SEO (да и для пользователей) лучше сначала кода контент а затем сайдбары.
    В этом отношении первый способ лучше имхо.
    • 0
  4. Sunshine reggae Аватар для OKyJIucT
    • Регистрация: 02.09.2011
    • Сообщений: 3,240
    • Репутация: 1830
    • Webmoney BL: ?
    Faraday, при современных скоростях интернета доли секунды ничего не решат :)
    • 0
  5. Дипломник
    • Регистрация: 16.04.2011
    • Сообщений: 150
    • Репутация: 48
    Цитата Сообщение от Faraday Посмотреть сообщение
    Минус этого варианта в том, что сначала идут сайдбары, а только потом контент. Поэтому сначала в браузер загружается (или поисковый робот ест) баннеры, всякие теги, и прочий мусор, и только потом контент.
    Для SEO (да и для пользователей) лучше сначала кода контент а затем сайдбары.
    В этом отношении первый способ лучше имхо.
    Вы думаете поисковый бот не умеет определять где сайдбар а где контент? Тогда надо шапку сайта помещать, так же, как и остальные сайдбары, вниз под контент?
    А если я в таблицах верстаю, то всё!, не видать мне топа))), так как в любом случае при трех колонках, левая будет выше.
    Для того чтобы закрыть "мусор", если у вас он есть, а сайдбар не является таковым, надо пользоваться тегами noindex.
    Кстати в Яндексе тоже не знают как правильно сайты верстать (пример: http://help.yandex.ru/catalogue/?id=873431) - напишите им))
    • 1

    Спасибо сказали:

    OKyJIucT(04.10.2011),
  6. Дипломник Аватар для Faraday
    • Регистрация: 17.04.2011
    • Сообщений: 143
    • Репутация: 30
    Я не говорю, что это критично, да и сам далеко не профи в СЕО. Конечно я знаю, что поисковики отлично определяют сквозные блоки на страницах, но во многих местах советуют размещать главное содержание по коду как можно выше.
    + иногда такое замечал, какой-то баннер или скрипт не открывается (сторонний сайт оффлайн), и вся страница тормозит.
    Всё это моё имхо, сори если у кого то другое мнение.
    • 0
  7. Гуру
    • Регистрация: 09.10.2011
    • Сообщений: 1,816
    • Репутация: 251
    to archerl есть стандартные шаблоны в Dreamweaver CS5 зачем делать то что уже есть? И выбор там лучше.
    • 0
  8. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    pyramida, а точно там лучше есть? Приведи лучшее решение, если не трудно.
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 0
  9. Гуру
    • Регистрация: 09.10.2011
    • Сообщений: 1,816
    • Репутация: 251
    archerl, открой программу и посмотрите шаблоны. Их решения включают даже совместимость с броузерами твое нет.
    • 0
  10. Опытный Аватар для doctordick
    • Регистрация: 03.09.2009
    • Сообщений: 302
    • Записей в дневнике: 1
    • Репутация: 60
    Не в обиду, но:
    когда встречаю термин резиновой верстки на дивах и вижу специально написанный для этого опус, всегда вспоминаю следующее высказывание:

    В Вилларибо и Виллабаджо опять дедлайн. Пока ребята из Вилларибо верстают сайт дивами, ребята из Виллабаджо уже всё сверстали на таблицах и еб*шат друг друга в квейк.
    © neatkariga at lj

    Люди! Смотрите на мир проще! :-)
    • 0
Страница 1 из 2 12 Последняя

Похожие темы

Темы Раздел Ответов Последний пост
Вёрстка/натяжка на WP
Создание сайтов 7 15.04.2014 18:34
Движок форума с боковыми колонками
Софт, скрипты, сервисы 0 27.04.2011 21:30
HTML верстка сайтов. HTML/CSS верстка.
Реклама партнерских программ 2 26.07.2010 13:12
Верстка
Софт, скрипты, сервисы 13 03.01.2010 03:20

Интересные темы

верстка с помощью div

Верстка с помощью div, чем она лучше табличной и все что еще нужно знать новичку.

быстрый броузер

FireFox, Opera, Chrome, Explorer, Safari, какой из них самый быстрый броузер, каким лучше пользоваться.

самый быстрый браузер

В этой теме описание тесирования всех популярных браузеров на скорость, почитай про самый быстрый браузер.

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры