Средняя часть

Средняя часть, согласно макету, у нас разделена на два вертикальных раздела «Боковая панель» и «Основной блок». Используем три элемента DIV с особым стилем display: table-cell. Это означает, что их надо отображать как ячейки таблицы. В этом случае они будут автоматически равной высоты при изменении размеров окна.
 
C) o p y r i g ht a r u l . r u
Сразу обозначьте «Боковую панель» — sidebar, а «Основной блок» — content.

Чтобы внутренние элементы прижимались вверх, задайте стиль
vertical-align: top; (вертикально выравнивание — по верху).

Средний DIV будет использоваться для визуального разделения элементов sidebar и content.

Ширину распределите так: 250px и 550px. Ширина среднего DIV будет нулевой. Нужна будет только его рамка.

Внутренние поля элемента sidebar будут одинаковые —
padding: 5px;

У элемента content поля будут такие же, кроме левого —
padding: 5px 5px 5px 15px;

Поскольку поля не входят в значение стиля width при расчете ширины элемента, то для задания правильных значений нужно учесть поля. Кроме этого нужно учесть ширину рамки разделяющего DIV
(250 — 5 — 5 — 2 = 238,   550 — 15 — 5 = 530).
 
Цвет разделительной линии у нас будет lightgrey (светло-серая).
 
C) o p y r i g ht a r u l . r u
Тогда начальный код средней части страницы будет таким:

      <div id="sidebar" style="display:table-cell; vertical-align:top; padding:5px; width:238px;">Sidebar</div>
      <div style="display:table-cell; width:0; border:1px solid lightgrey;"></div>
      <div id="content" style="display:table-cell; vertical-align:top; padding:5px 5px 5px 15px; width:530px;">Content</div>

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

Файл mysite4.html

C) o p y r i g ht a r u l . r u

 

  •  
  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Оставить комментарий