Универсальный графический контейнер

Автор блога, слывущий в узких кругах Мастером Горди, не является профессиональным web-верстальщиком и уж тем более, боже меня упаси, профессиональным web-дизайнером.

В первом случае хобби и не более того, а во втором и вовсе ноль без палочки :)

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

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

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

Зададимся вопросом, есть ли универсальный способ позволяющий решить заявленную проблему?

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

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

Как вы думаете, сколько графических файлов надо для выполнения поставленной задачи?

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

Все остальное это оптимизация html-кода и стилей.

Графика.

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

Второй файл вырезан из первого – центральная часть.

html

  <div class="top"><div></div></div>
  <div class="middle">
    <div>Content</div>
  </div>
  <div class="bottom"><div></div></div>

Стили

* {margin:0;padding:0;}
body {
  background-color:#fff;
  margin:0 auto;
  min-width:500px;
  max-width:80%;
}

.top,.middle,.bottom {padding:0 0 0 14px;}
.top div,.bottom div {height:12px;}

.top {margin-top:20px;background:url(tb.png);}
.top div {background:url(tb.png) no-repeat right top #fff;}

.middle {background:url(tb_m.png);}
.middle div {
  background:url(tb_m.png) right top #eee;
  padding:5px 19px 5px 3px;}

.bottom {background:url(tb.png) no-repeat 0 -24px;}
.bottom div {background:url(tb.png) no-repeat right -24px #fff;}

p {padding:0 10px;text-align:justify}
/* hack for IE6 */
*html body {
  width:expression(
  document.documentElement.clientWidth < 500 ? '500px' :
  (document.documentElement.clientWidth > 80 ? '80%' : 'auto'));
}

Вот собственно и все. Поставленная задача решена - минимум графики, работает везде, а про html-код и стили и говорить не чего - просто конфетка :)

Идем и смотрим пример.

Для проявления эффекта уменьшаем размер окна браузера по горизонтали, также меняем разрешение экрана монитора.

Оставьте комментарий к этому документу:

Правила комментирования:

Ваше имя:
Ваш email:
Тема:

Капча:

Все поля обязательны для заполнения!

1. Все поля формы обязательны для заполнения.
2. При этом Ваш e-mail не публикуется.
3. Содержание комментариев, оставленных на опубликованные материалы, является мнением лиц, их написавших, и не обязано совпадать с мнением Администратора, никоим образом не ответственного за выводы и умозаключения, могущие возникнуть при прочтении комментариев, а также любые версии их истолкования.
4. Не будут опубликованы комментарии:
   1. нарушающие положения законодательства РФ.
   2. содержащие оскорбления любого вида
      (личного, религиозного, национального...);
   3. включающие неуместные теме поста ссылки, в том числе спамовые;
   4. содержащие рекламу любых товаров и услуг, иных ресурсов, СМИ или событий, не относящихся к контексту обсуждения статьи.
   5. не относящиеся к теме статьи или к контексту обсуждения.
5. Факт оформления Вами комментария является безоговорочным принятием этих условий.