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

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

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

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

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

Скриншот

ТЗ проще не куда:

• Плавающая ширина всех колонок.
• Колонки равной высоты.
• Header и горизонтальное меню по ширине вровень с областью контента.
• Все блоки и колонки имеют индивидуальные по цвету - border и фоновую заливку.
• Сто процентная высота макета.

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

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

Тут надо сделать маленькое отступление.

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

Все начинается в проблемных – IE6(7) и уж когда все доведено до ума, то просмотр в наиболее популярных и не значительная корректировка часто сводящаяся к переносу некоторых стилевых правил для IE6(7) в секцию хаков.

Единственным исключением является OPERA. Она в списке самая последняя и всегда жду от нее подвоха. Причем, мало что меняется от версии к версии, а это печально :(

Так случилось и на этот раз.

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

А вот поднять правую колонку на уровень header без пинка под зад "горячо" любимой OPER’е не удалось :)

Не привожу ни html-кода ни стилей.

На примерах все достаточно наглядно и убедительно показано и они говорят сами за себя.

Пример № 1 – в OPER’a бесконечная вертикальная прокрутка.

Пример № 2 - везде все в норме, если не считать погрешностей в интерпретации процентных величин различными браузерами.

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

Иногда, веянья времени совпадают и с переводом некоторых скриптов Мастера Lasto на обновленные рельсы, в частности речь идет о предполагаемом апгрейде Gold Shop’a.

Само собой, никоим образом не бегу впереди паровоза, но...

Сегодняшняя публикация посвящена формам.

Писал об этом в "Элементы web-страниц. Форма поиска". Комментарии были не однозначными, хотя скриншоты приведенные там свидетельствуют, что формам на web-страницах не уделяется должного внимания.

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

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

Скриншот

html-код

<div id="forms">
  <form name="search">
    <input class="search" type="text">
    <input class="submit" type="submit" value="Найти">
  </form>
</div>

Стили

* {margin:0;padding:0;}
#forms {
  border:1px #000 solid;margin:7px 10px 7px;
  padding:4px;width:210px;
}
form {overflow:hidden;}
.search,.submit {
  background-color:#fff;border:1px #000 solid;float:left;
}
.search {padding:1px 2px 0;width:156px;height:17px;}
.submit {font-size:11px;margin-left:2px;width:45px;height:20px;}
/* Start hack Section */
/* hack for FireFox 3.5 */
@-moz-document url-prefix(){.submit {padding-bottom:3px;}}
/* hack for IE6 */
*html form {zoom:1;}
/* End hack Section */

#forms не является обязательным.

Обратите внимание на разные высоты у поля ввода и кнопки "Найти".

Для той же кнопки желательно всегда указывать размер шрифта.

Без hack’a для FF, надпись на кнопке будет смещена вниз, что портит общую картинку.

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

Пример