Рунет умрет от плагиата,
От доморощенных "Гуру"…
И хочется ругаться матом,
Не с перепоя по утру…
Но сколько в грудь себя не бей,
В комментах не точи елей,
Куда ни кинь, везде одно -
Сплошное жуткое Г…
Gordi

Печально все.

Что только народ не делает, наизнанку готов вывернуться, лишь бы заявить о себе, "темку" застолбить.

А вот серьезных действительно стоящих публикаций, раз-два и обчелся.

Мельчает народ, все больше на запад посматривает, как оно там, переводит хрень всякую, а своего, как не было, так и нет.

Даже хотя бы ревизию грамотную сделать того, о чем же там пишут не в состоянии, примеры заточить, да до ума довести, нет такого, что как не крути, прискорбно…

Причем очень часто выдают не которые вещи, что опубликованы давно, за свои, не больше не меньше.

Графоманы и плагиаторы погубят Рунет.

Но не даром говорят: "Не бери в голову, бери в грудь, шире будет..."

Вернемся к теме затронутой в предыдущем посте "Бомба…" и на основе классического трех колоночного макета рассмотрим не которые нюансы.

<div class="middle">
  <div id="left">
    <div id="content">
      <div id="right">
        <div class="content">Content</div>
        <div class="left">Left</div>
        <div class="right">Right</div>
      </div>
    </div>
  </div>
</div>

Все красоты - одинаковая высота колонок, индивидуальная фоновая заливка (графика с размножением по вертикали), тот же border, каждой колонке своего цвета, достигаются вложением необходимых контейнеров друг в друга с соответствующими стилями, позволяющими область контента и колонки навигации в дальнейшем располагать как нашей душе угодно.

html-код при переходе от одного макета к другом практически не меняется.

* {margin:0;padding:0;}
.middle {
  border:#000 1px solid;margin:5px auto;
  padding:3px 5px;width:960px;
}
#left {
  background:#f7f8f9;border:#a00 1px solid;margin-left:-2px;
}
#content,#right {margin:-1px 0;position:relative;}
#content {background:#fff;border:#00a 1px solid;left:205px;}
#right {background:#eee;border:#080 1px solid;left:555px;}
#left,#right,.left,.right {width:200px;}
#content,.content {width:550px;}
.content,.left,.right {float:left;overflow-x:hidden;}
.content {margin-left:-555px;}
.left {margin-left:-761px;}
.right {margin-right:-200px;}
/* Start hack Section */
/* hack for OPERA, FF, Coogle Chrome, IE8 */
#right:after {content:'';clear:both;display:block;}
/* hack for IE6 */
*html #left {overflow-x:hidden;}
*html .content,*html .left,*html .right {position:relative;}
/* End hack Section */

Как видим, таблица стилей хорошо структурирована, минимум разночтений для зверинца браузеров, они выделены в отдельную секцию.

Ее размер можно и подсократить, если вам не требуется причиндалы типа - разноцветных border’ов, к примеру, будут все они одного цвета, тоже можно сказать и background-color.

К сожалению, подобного рода, изыски имеют и обратную сторону медали - все колонки фиксированной ширины.

Возможно, в будущем и это препятствие можно будет обойти, но разметка такого класса, как раз и предполагает по пиксельную точность, проценты, а без них построить резиновую страницу затруднительно, разночтения их пересчета браузерами, переход с одного разрешения на другое, могу привести к искажению нашей разметки.

Но при известном желании и если вы не побоитесь использовать стилевые хаки, то карты вам в руки.

Контейнер с классом middle центрирует макет относительно вертикальных границ окна браузера, также этому способствует и наличие левого отрицательного отступа для #left. Это позволяет достаточно просто выставить страницу точно по центру, в дальнейшем border можно исключить.

В блок middle, чтобы не плодить лишние стили, можно вложить header и footer.

Сто процентная высота страницы с включением header и footer, по понятным причинам не возможна.

Других особенностей стили не имеют.

Примеры трех колоночные: left-content-right, content-left-right, left-right-content

    Чудес на свете не бывает?
    За них приходиться платить?    
    Один, без "башенно" верстает,
    Другому, в пору все чинить :)      
Gordi

Занимался в последнее время, достаточно рутинным делом, делая ревизию, пересматривая и модернизируя стили к примерам, количество коих будет прирастать постепенно, к своему новому ресурсу, заходите чаще, всегда найдете, что-то новенькое, в не всякого сомнения найдете, что полезное для себя.

В общем, руки заняты, а в голове одна постоянная мысль не дающая покоя, как же при использовании столь любимых автором стилевых правил:

margin-bottom:-32767px;padding-bottom:32767px;

при минимуме html-кода:

<div class="middle">
  <div class="content">Content</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

где иллюзия одинаковой высоты колонок достигается необычайно просто, решить проблему корректной работы меток-якорей.

Собственно, о нюансах подобного рода разметки писал не однократно.

Давайте еще раз остановимся на принципиальных моментах, которые являются сдерживающим фактором повсеместного использования оной на практике.

1. Не удачное сочетание стилей, не относящихся собственно к глобальной разметке макета, в частности не оправданное применение, вроде бы безобидного position:relative, может привести к возникновению бесконечной вертикальной прокрутке страницы. В этом примере position:relative; для простоты иллюстрации, добавлен трем центральным колонкам.
2. Проблема нижнего border’a нашла свое решение, но это потребовало дополнительной разметки, что конечно можно обыграть и в свою пользу, используя ее в качестве псевдо footer’a, но все эти подпорки довольно сильно портят впечатление, нет настоящего фен-шуя.
3. Метки-якоря. Если б вы знали, сколько приходит писем от тех, кто не внимательно читает, с просьбами и даже требованиями срочно решить проблему корректного их поведения в предлагаемой и пропагандируемой мной разметке.
   Увы, все мои попытки, предпринятые в этом направлении, пока не увенчались успехом.
   Тот же пример в полной мере отражающий данную проблему.

Итак.

Можно ли получить макет, имеющий полную иллюзию равной высоты колонок с индивидуальной фоновой заливкой и своими, разного цвета border’ом вокруг каждой колонки?

Скриншот:

И вся эта радость без описанных выше минусов.

Ответ однозначный - да!

Но, как всегда, что-то приобретая, мы что-то неизбежно теряем...

Это пролог к новому сериалу, многие моменты будут уточняться, но сразу скажу, главный источник проблем видится в том, что все колонки имеют фиксированную ширину, возможно, и тут найдется соответствующее решение.

Про сто процентную высоту макета разговора нет, тут ее ни при каких обстоятельствах не получить, увы...

Пока же только "рыба", разметка двух колоночная, только центральная часть, область контента по html-коду выводится раньше колонки навигации.

Не смотря на минимум html-кода и стилей, в каждом конкретном случае, требуется довольно много настроек, и так как все еще в стадии опытов и экспериментов, рекомендовать к широкому внедрению в массы не стал бы.

Поэтому не привожу html структуру и стили тестовых страниц, также, как и не поясняю те или иные нюансы, все не однократно будет меняться в процессе доводки до ума.

Вот такая "бомба" :)

Смотрим – left-content и content-right.

Как-то пришлось решать весьма интересную задачку.

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

Так, как не люблю идти проторенными дорожками, искать где-то, кем-то, что-то сотворенное не в моих правилах, пришлось пройти весь путь от начала до конца, самостоятельно.

О чем речь?

Смотрим скриншот.

Смысл задачи выделен цветом.

Только html и только стили.

Область контента по html-коду выводится раньше и ограничена по ширине с помощью min/max-width и его эмуляцией для IE6, колонки равной высоты, сто процентная высота макета с включением header и footer, на скриншоте приведена только центральная часть разметки.

Готовое, полноценное решение будет позже, мини-сериал :), думаем и делаем самостоятельно.

В комментариях можно дать ссылки на подобные решения.