Статьи:

Новости:

Разработка сайта для нотариусов Мы подготовили новое пакетное предложение по разработке сайтов для нотариусов. Если Вы - частный нотариус, то создание сайта у нас позволит вам:

Главная

Статьи

Дизайн и html-верстка

Верстка на div. Две колонки с шапкой и подвалом.

Можно долго спорить о том, так ли уж вредна и неоправданна старая добрая табличная верстка, но мы сегодня не об этом :) Оставим в стороне политику, и сосредоточимся на чистой науке :)

Согласитесь, иметь под рукой готовый шаблон верстки, подставляя в него по ходу работы нужное вам содержимое - очень приятно :)
Итак, сегодня - пример двухколоночной резиновой (процентной) верстки с шапкой и подвалом.

Код

<html>
<head>
	<title></title>
</head>

<body bgcolor="#EDF6E1">

<div id="header">шапка</div>

<div id="sidebar">меню навигации<br>меню навигации<br>меню навигации<br>меню навигации<br>меню навигации<br>меню навигации<br></div>

<div id="container">поле основного текста</div>

<div id="footer">подвал</div>

</body>
</html>

CSS

#header {
  background: yellow; 
}

#sidebar {
  width: 200px;
  float: left;
  }

#container {
  width: 100%;
}

#footer {
  background: yellow;
  clear: both; 
}

Как оно выглядит

Примечания

Думается, пример крайне простенький, и все должно быть понятно с полуслова, но все же:

header - шапка

sidebar - левое меню

container - поле основного текста

footer - подвал

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

Я думаю, вам будет интересна еще статья Верстка на div. Три колонки, с шапкой и подвалом.

Галина Ивченко

Верстка на div. Три колонки, с шапкой и подвалом
Верстка div. Две ошибки верстки.