Плуващи полета

• 3.06.2004

Дизайнерът скицира идеята си във фотошоп или където му е удобно и я обработва, докато резултатът стане задоволителен. Кодерът (често се оказва програмист или дизайнер, който си е втълпил, че е бог на HTML-а), накълцва скицата и я разпределя в таблици с незатворени <td>, използва прозрачен пиксел поне на сто места и по няколко <br> на ред. Ако на всяка клетка в таблицата зададе height=22 и valign=middle, вече говорим за уникален по рода си кодер. Добрият уеб дизайнер прави XHTML-а си сам, защото не иска да види труда си осквернен от някой програмист-ветеран, който задължително слага на всяка една страница нерушимата от времето фраза “Сайтът се разглежда най-добре с Internet Explorer 5”. Добрият уеб дизайнер реализира дизайна си, като се опира на неограничените възможности на CSS и правилно написан HTML.

А сега по същество. Таблиците не са единственото възможно решение за еластичен дизайн. Разпъване и свиване на полетата, в зависимост от ширината на прозореца или екранната резолюция, може да бъде постигнато лесно и без тях.

Това е HTML-кодът, който фиктивно показва тялото body и страничната част side. Добавил съм и обвивка wrapper, която контролира общата ширина на страницата.

<div id="wrapper">
  <div id="side">
    BODY
  </div><div id="body">
    SIDE
  </div>

</div>

Стандартната схема за реализиране на две колони с относителни размери е следната:

#wrapper {
  width: 80%;
}

#side {
  float: right;
  width: 40%;
  background: green;
}

#body {
  float: left;
  width: 60%;
  background: red;
}

пример

Проблемът е, че лявата колона пада под дясната, когато размерът на прозореца стане по-малък от общия размер на двете колони.

За IE, това се решава с добавяне на clear: right в тялото, но във firefox и другите стандартни браузъри то се измества надолу, в зависимост от височината на дясната колона. Решението е, да се зададе фиксирана височина на страничната колона, а лявата да се изтегли със същия отрицателен размер нагоре. За да не засегне това IE, се използва селектора >. Описанието след този селектор остава скрито за него.

#side {
  float: right;
  width: 60%;
  height: 100px;
  background: green;
}

#body {
  float: left;
  clear: right; /* хак за IE */
  width: 300px;
  background: red;
}

*>body #body {
  margin-top: -100px; /* хак за firefox */
}

пример

Появява се друг проблем. При свиване на прозореца дясната колона, влиза под лявата. За firefox задаваме минимална ширина min-width на обвивката и двете колони. Понеже IE не разбира това свойство, задаваме на дясната колона отстъп отляво margin-left, толкова колкото е ширината на лявата колона.

* {
  margin: 0;
  padding: 0;
  border-style: 0;
}

#wrapper {
  min-width: 780px;
}

#side {
  float: right;
  width: 60%;
  min-width: 400px;
  background: red;
  margin-left: 40%;
}

*>body #side {
  height: 100px;
}

#body {
  float: left;
  clear: right;
  width: 40%;
  min-width: 30%;
  background: green;
}

*>body #body {
  margin-top: -100px;
}

пример

Единственият недостатък за firefox е, задължителното задаване на височина на страничната колона.

Последният пример е по-различен. При него обръщаме последователността в HTML кода — първо е тялото, след това страничната колона. Разбира се може и обратно.

  <div id="side">
    BODY
  </div><div id="body">
    SIDE
  </div>

Вместо подравняване вдясно използваме ляво подравняване float: left. Предимството при този подход е, че могат да се наредят неограничен брой колони на един ред.

#wrapper {
  width: 80%;
  background: #cf0;
  display: table;
}

#body {
  float: left;
  clear: right;
  height: 200px;
  width: 60%;
  background: #090;
}

#side {
  float: left;
  clear: right;
  width: 40%;
  background: #f00;
}

пример

Тънкостите тук са няколко. За да се избегне пропадане на колоните, навсякъде където има float: left се задава и clear: right. За да може обвивката да оттича колоните под firefox задаваме display: table;.

С тези примери, сравнително лесно може да се постигне, добър еластичен дизайн. Малко повече предпазливост и обмисляне винаги ще са от полза.