Помогите с первой версткой!!! Настройка верстки под разные разрешения. Правильное позиционирование.

Общее
1

Как сделать так чтобы на разных мониторах страница отображалась одинаково? Как правильно задавать размеры и позиционировать блоки.

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Центр рекламных технологий</title>
</head>
<body>
	<div class="header">
		<div class="header-left">
				<p><b><span class="reklam">Центр рекламных</span></b><br><span class="techno">ТЕХНОЛОГИЙ</span></p>
				<div class="bomb-logo">
				</div>
		</div>
		<div class="header-right">
			<p><i>На рынке рекламно-сувенирной продукции<br> 
			это коллектив профессионалов,<br>
			обьединенных общими принципами и целями...</i></p>
		</div>
		<div class="header-line">
		</div>
		<div class="header-contacts">
			+38(044) 123 33 22<br>
			<span class="number">(099) 123 33 22<br>
			(098) 123 33 22</span><br>
			<a href="#" class="link">sales@bigbomb.com.ua</a>
		</div>
		
	</div>
	<div class="container">
		<div class="faces">
			<div class="faces-text">
				<p>Lorem ipsum dolor sit amet, et est libris audiam consequuntur, 
				no quo civibus officiis ponderum. Tale fugit ludus ius ei.</p>
			</div>
		</div>
		<div class="pencil-picture">
		</div>
		<div class="top-sale">
			<div class="top-header">
				<h1><span class="top">Топ</span> продаж</h1>
			</div>
			<div class="top-bomb">
			</div>
			<div class="top-field">
			</div>
		</div>
	</div>
	<div class="left-bombs">
	</div>
	<div class="right-bombs">
	</div>
	<div class="footer">
		<div class="footer-logo">
		</div>
		<div class="footer-copyright">
			<p>2014-BIGbomb<br>
			   Рекламно-производительная компания<br>
			   Все права защищены</p>
		</div>
		<div class="stick-1">
		</div>
		<div class="stick-2">
		</div>
		<div class="stick-3">
		</div>
		<div class="list-1">
			<ul>
				<li>Принаджежности для письма</li>
				<li class="office">Офис</li>
				<li>Электроника</li>
				<li>Посуда</li>
				<li>Текстиль</li>
			</ul>
		</div>
		<div class="list-2">
			<ul>
				<li>Сумки</li>
				<li>Полиграфическая продукция</li>
				<li>Бумажные стаканчики</li>
				<li>Дипломы</li>
				<li>Контакты</li>
			</ul>
		</div>
		<div class="footer-bomb">
		</div>
	</div>
</body>
</html>

CSS

html,
body {
	margin: 0;
    padding: 0;
    font-family: Myriad Pro, sans-serif;
    font-size: 10px;
    max-height: 1038px;
    width: 100%;
}

.container {
	min-width: 919px;
	height: 826px;
	margin: 0 auto;
	width: 100%;

}

.header {
	width: 100%;
	height: 70px;
}

.header-left {
	display: block;
	position: absolute;
	background-color: white;
	color: black;
	padding: 10px 5px;
	height: 52px;
	width: 500px;
	top: 0px;
}

.header-left p {
	position: absolute;
	top: 0px;
	margin-left: 0px;
	font-size: 12px;
	left: 360px;
}

.techno {
	font-family: MyriadPro Cond, sans-serif;
	font-size: 16px;
}
.bomb-logo {
  background-image: url(/images/bomb-logo.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 290px;
  top: 10px;
  width: 60px;
  height: 73px;
  z-index: 30;
  background-color: transparent;
}

.header-right {
  display: block;
  position: absolute;
  background-color: rgb(0, 166, 81);
  left: 508px;
  width: 990px;
  height: 67px;
  padding-left: 20px;
  padding-top: 5px;
  z-index: 27;
}


.header-right p {
	font-family: MyriadPro, sans-serif;
	font-size: 9px;
	line-height: 1.2;
	font-style: italic;
	color: white;

}

.header-line {
  background-color: rgb(0, 166, 81);
  display: block;
  position: absolute;
  left: 508px;
  top: 74px;
  width: 1010px;
  height: 2px;
  z-index: 28;
}

.header-contacts {
	display: block;
    position: absolute;
    border: 2px solid rgb(0, 166, 81);
    border-width: 2px;
    border-radius: 10px;
    background-color: white;
    left: 800px;
    top: 5px;
    width: 149px;
    height: 60px;
    padding-top: 5px;
    padding-left: 0px;
    padding-right: 20px;
    padding-bottom: 5px;
    text-align: center;
    vertical-align: middle;
    z-index: 32;
    font-weight: bold;
    color: rgb(0, 166, 81);
    font-size: 12px;
  	font-family: "Myriad Pro", sans-serif;
  	color: rgb(0, 166, 81);
  	font-weight: bold;
  	font-style: italic;
  	line-height: 1.2;
  	text-align: right;
}

.left-bombs {
	display: block;
	position: absolute;
	background: url(/images/left-bombs.png) no-repeat;
	height: 940px;
	top: 15px;
	width: 180px;
}

.right-bombs {
	display: block;
	position: absolute;
	background-image: url(/images/left-bombs.png);
	height: 940px;
	width: 180px;
	left: 1338px;
	top: 13px;
}

.faces {
	display: block;
	position: absolute;
	background: url(/images/faces.jpg) no-repeat;
	width: 700px;
	height: 212px;
	left: 350px;
	top: 100px;

}

.pencil-picture {
	display: block;
	position: relative;
	background: url(/images/pencil.jpg) no-repeat;
	width: 225px;
	height: 212px;
	left: 1080px;
	top: 30px;
}

.faces-text {
	display: block;
	font-family: Myriad Pro, sans-serif;
	font-size: 9px;
	font-weight: bold;
	font-style: italic;
	color: white;
	position: absolute;
	padding-top: 0px;
	padding-left: 15px;
	background-color: rgba(0, 0, 0, 0.3);
	width: 330px;
	top: 173px;
	height: 35px;
}

.top-sale {
	position: relative;
	width: 230px;
	height: 362px;
	left: 1080px;
	top: 60px;
}

.top-header {
	display: block;
	position: relative;
	font-size: 12px;
	background-color: #00a651;
	width: 157px;
	color: white;
	height: 20px;
	padding-bottom: 15px;
	vertical-align: middle;
	padding-left: 70px;
}

.top {
	color: #fffc00;
	font-weight: bold;

}

.top-bomb {
	position: relative;
	background: url(/images/bomb-2.png) no-repeat;
	height: 70px;
	width: 50px;
	bottom: 70px;
	right: 5px;
}

.top-field {
	display: block;
	position: relative;
	width: 227px;
	height: 325px;
	background-color: #ebebeb;
	bottom: 70px;
}

.footer {
  	background-color: rgb(0, 166, 81);
  	position: absolute;
  	left: 0px;
  	top: 950px;
  	width: 100%;
  	height: 111px;
  	z-index: 11;
}

ul {
	list-style: none;
	font-size: 14px;
	line-height: 1.2;
	color: white;
}

.list-1 {
	position: absolute;
	bottom: 0px;
	left: 550px;
  	text-align: left;
}

.list-2 {
	position: absolute;
  	text-align: left;
  	bottom: 0px;
  	left: 800px ;
}

.footer-logo {
  background-image: url(/images/bomb-logo.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 300px;
  top: 8px;
  width: 55px;
  height: 60px;
  z-index: 12;
  background-color: rgb(0, 166, 81);
}

.stick-1 {
	background-image: url(/images/stick.png);
  	border-radius: 50%;
  	background-color: rgb(255, 255, 255);
  	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.75);
  	position: absolute;
  	left: 565px;
  	top: 4px;
  	width: 4px;
  	height: 102px;
  	z-index: 16;
}

.stick-2 {
	background-image: url(/images/stick.png);
  	border-radius: 50%;
  	background-color: rgb(255, 255, 255);
  	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.75);
  	position: absolute;
  	left: 817px;
  	top: 4px;
  	width: 4px;
  	height: 102px;
  	z-index: 16;
}

.stick-3 {
	background-image: url(/images/stick.png);
  	border-radius: 50%;
  	background-color: rgb(255, 255, 255);
  	box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.75);
  	position: absolute;
  	left: 1060px;
  	top: 4px;
  	width: 4px;
  	height: 102px;
  	z-index: 16;
}

.footer-copyright {
	position: absolute;
	color: white;
	font-size: 8px;
	left: 270px;
	top: 60px;
}

.footer-bomb {
	background-image: url(/images/bomb-1.png);
	position: absolute;
	width: 500px;
	height: 300px;
	bottom: 13px;
	left: 1000px;
	z-index: 8;
}
2

Выглядит очень плохо. Начните с курсов “Блочная модель документа” и “Сетки” на сайте Академии, будет больше пользы.

3

Но там не идет речь об этом. Я css код довольно таки хорошо знаю, у меня проблема с позиционированием, какой способ применять. Например использовать абсолютное позицонирование или относительное или ширину задавать в процентах или чисто в пикселях чтобы сайт нормально отображался. Вот в чем проблема.

4

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

5

Если можете назовите какие у меня основные проблемы чтобы я ориентировался. Просто щас стоит реальная задача и я хочу ее решить.

6

Понял хорошо. Можно будет к вам с вопросами обращаться?

7

Позиционирование используется только для декоративных элементов страницы. У вас позиционирован каждый блок. Так не верстают. Это и есть основная проблема.
Обращайтесь, для того форум и существует.