Нужна помощь с оптимизацией макета [css]?

Здраствуйте! Товарищи, нужна помощь. Я тут значит, набросал "типа макет" сайта и пытаюсь его сверстать, но адыкватно это сделать на выходит. Когда дошел до нижней части шапки - там где начинается полоса из цветных прямоугольников в которой находятся колонки меню, я в начале хотел сделать эту часть из отдельных блоков разложенных в ряд, но тогда я не смог воспользоваться свойством CSS "display: inline". Возможно проблема в том, что оно не работает при использовании абсолютного позиционирования, или это просто я криворукий? Пришлось сдвигать блоки вручную используя left, но тогда при изменении размеров окна браузера верстка начинает "плыть", да и классов становится многовато. Тогда я решил вырезать полосу из макета в виде одной картинки, вставить ее в верстку и попробовать растянуть ее от края до края окна браузера, чтобы потом с помощью свойств списка разместить поверх нее пункты меню, но тут 1.) Почему-то картинка с полоской ни в какую не хочет центрироваться, хотя я применил к ней те же самые свойства что и к картинке-шапке, что за мистика?! Результат мытарств 2.) Растянуть ее по всей ширине экрана тоже не выходит. Кроме того есть проблема с подключением кириллических шрифтов - браузер их просто не отображает, но если переключиться на латиницу то все норм. Короче, большая просьба - поясните как можно сверстать шапку как на макете, наиболее верным и оптимальным способом. Прилагаю ссылку с архивом на свое безобразие - архив проекта.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Infotok</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>

	
	<div class="main">
		
		<div class="header">
			<div class="header-img"><img src="assets/img/header.png" class="image-center">
			<div class="headtitle-img">
				<h1>INFOTOK</h1>
				<h2>НЕПРЕРЫВНЫЙ ПОТОК СВЕЖИХ НОВОСТЕЙ</h2>
					</div>
			<div class="colors_line"><img src="assets/img/colors_block_line.png" alt=""></div>
			</div>
		</div>
	</div>

</body>
</html>

@font-face {

font-family: 'major_shift';

src: url(major_shift.ttf) format('truetype');

font-weight: normal;

font-style: normal;

}

* {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}		

body {
	background-color: #dfdcdc;
}

.header {
	position: relative;
	height: 381px;
	width: 100%;
}

.image-center {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
}

.colors_line {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 0;
}

.headtitle-img {
	position: absolute;
	background-image: url(../assets/img/headtitle-reapet.png);
	background-repeat: repeat-x;
	margin-top: 245px;
	width: 100%;
	height: 100px;
	text-align: center;
	color: white;
	margin-left: 0px;
	margin-right: 0px;
	
}

.headtitle-img h1 {
	font-family: 'major_shift';
	font-size: 3.6em;
	letter-spacing: 10px;
	height: 60px;
}

h2 {
	font-size: 1.1em;	
	letter-spacing: 10px;
}

html

css

1 ответов

Вопросы решены. Расходитесь.