суббота, 5 марта 2016 г.

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

10:21 By Guest Rooms "Varnaflats.eu" CSS, site No comments

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

Автор блога, слывущий в узких кругах Мастером Горди, не является профессиональным 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-код и стили и говорить не чего - просто конфетка :)

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

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

Комментарии к этой заметке больше не принимаются.

Страницы Интернета

суббота, 5 марта 2016 г.