Версия для печати

Полная версия

Итак, переходим к меню. В общем здесь вроде ничего сложного нет. Создаем блок для элемента меню и для его левой и правой части:

	#item{
	width: 100%;
	float: left;
	height: 50px}
	#left{
	float: left;
 	height: 100%;
 	width: 35px;
 	border: 1px solid #ccc}
	#right{	
	padding-left: 10px;
 	float: left;
 	height: 100%;
	background-image: url(../i/a/line.gif);
 	background-repeat: no-repeat}

Итак, item - блок для элемента меню, т.к. с правой стороны меню ничего нет, то сделаем его на всю ширину броузера. Left - левая часть элемента меню - закрашенный прямоугольник. Он имеет рамку, с цветом аналогичным цвету линии фона. Вообще то никогда не стоит совмещать картинки с цветовыми элементами оформления (например, фоном), т.к. в разных броузерах, на разных мониторах цвета различных картинок и цветовых элементов могут (даже скорее всего будут) не совпадать. Поэтому здесь сделано так, чтобы рамка этого блока немного не совпадала с линией фона правой части. Что касается последнего блока - правой части элемента меню, то здесь ничего особенного, кроме свойства background-repeat: no-repeat, который запрещает повторение фоновой картинки. С помощью этого свойства можно также запретить повторение фоновой картинки только по горизонтали или по вертикали. Кстати правому блоку, в котором находиться текст, имеет смысл задать ширину (550px должно хватить). Это обеспечит для него тот минимум, при котором текст не будет переноситься на другую строку.

Html-код такой:

<div id=item>
	<div id=left style="background-color:#CC3333"></div>
	<div id=right class=razd>
	каф. Экономика машиностроения<br>
	<span class=art>Экономико-математические методы и модели
	</span>
 	</div></div><div id=item>
	<div id=left style="background-color:#CCCC33"></div>
	<div id=right class=razd>каф. Основы бизнеса<br>
	<span class=art>Макроэкономика
	</span>
 	</div></div><div id=item>
	<div id=left style="background-color:#33CC33"></div>
	<div id=right class=razd>каф. Основы бизнеса<br>
	<span class=art>Микроэкономика
	</span>
	</div></div><div id=item>
	<div id=left style="background-color:#3333CC"></div>
	<div id=right class=razd>каф. Основы бизнеса<br>
	<span class=art>Мировая экономика
	</span>
 	</div></div><div id=item>
	<div id=left style="background-color:#fff; border: 0px">
	</div>
	<div id=right></div></div>

Последний элемент меню необходим для того, чтобы внизу была соответствующая линия. Классы для текста такие:

	Название дисциплины
	.art { 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 20px;
 	line-height: 1.5 }
	Название кафедры
	.razd {
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 16px;
 	text-indent: 30px;
 	letter-spacing: 2px}

Вот что у нас получилось . Эти же конструкции можно использовать и для верхнего меню. Единственное что надо будет переопределить при их использование - высоту элементов меню. Чтобы проще было позиционировать меню как целое возьмем его во внешний блок mainmenu, а его координаты будем определять в месте использования:

	#mainmenu{
	position: absolute
	}

Пожалуй и все.

Верстаем шапку сайта.

Объединяем все вместе.

Некотрые аспекты табличной верстки тестового примера.

Вместо заключения.