Проблема c "подвалом" страницы сайта

Alexey42 · 03.Апрель.2018 11:27:40

Здравствуйте.
С версткой ранее не сталкивался, хочу научиться. Сейчас прохожу интерактивные курсы здесь на сайте. Решил попрактиковаться. скачал с интернета картинку в формате .jpeg и psd макет проекта Nerd’s. Смотрел на .jpeg и описывал все что вижу, а в psd макете брал названия шрифтов и их размеры для стилизации.

У меня проблема с “подвалом” сайта. При стилизации страницы с помощью СSS, применив свойства (position: relative; и position: absolute;) для того, чтобы разместить блок с адресом компании сверху на блок с картой, “подвал” сайта ушел под карту. Блоки вывалились из общего контейнера. В общем не могу ничего поделать с этим. Кто подскажет, что я делаю не так?
P.S. Заодно подскажите, какие грубые ошибки в верстке.

<body>
<header>
	<div class="container-center clearfix"> <!--Контейнер центровщик-->
		<div class="logo"> <!--Контейнер для стилизации логотипа-->
			<a href="#">
				<img src="img/logo.png" width="141" height="57" alt="Логотип">
			</a>
		</div>
		<nav class="main-navigation"> <!--Главное меню в шапке сайта-->
			<ul>
				<li class="main-navigation"><a href="#">Студия</a></li>
				<li class="main-navigation"><a href="#">Клиенты</a></li>
				<li class="main-navigation"><a href="#">Магазин</a></li>
				<li class="main-navigation"><a href="#">Контакты</a></li>
			</ul>
		</nav>
		<div class="cart">
			<a href="#">Корзина</a>
		</div>
	</div>
	<div class="header-center clearfix"> <!--Центровщик двух нижних блоков-->
		<div class="promo">
			<h2>Долго, дорого<br>скрупулезно.</h2>
			<p>Математически выверенный дизайн<br>для вашего сайта или мобильного приложения.</p>
			<div class="btn">
			<a href="#" class="btn">Узнать больше</a>
			</div>
		</div>
		<div class="gallery"> <!--Задан класс для стилизации. (Общаяя обертка)-->
			<figure class="gallery-content">
				<img src="img/img-1.jpg" width="338" height="231" alt="Картинки из галереи">
			</figure>
		</div>
	</div>	
</header>
<section class="features"> <!--Блок преимуществ. (Можно было и через ul)-->
	<div class="features-container clearfix"><!--Блок центровщик)-->
		<div class="features-item1">
			<img src="img/features-1.png" width="239" height="124" alt="Веб-сайт">
			<h3>ВЕБ-САЙТЫ</h3>
			<p>Мир никогда не будет прежним<br>после того как увидит ваш сайт!</p>
			<a href="#" class="btn">Заказать</a>
		</div>
		<div class="features-item2">
			<img src="img/features-2.png" width="240" height="124" alt="Мобильные приложения">
			<h3>ПРИЛОЖЕНИЯ</h3>
			<p>Покорите топ-10 приложений<br>в AppStore и Google Play</p>
			<a href="#" class="btn">Заказать</a>
		</div>
		<div class="features-item3">
			<img src="img/features-3.png" width="240" height="124" alt="Презентации">
			<h3>ПРЕЗЕНТАЦИИ</h3>
			<p>Вы даже не подозреваете,<br>насколько Вы изумительны!</p>
			<a href="#" class="btn">Заказать</a>
		</div>
	</div>
</section>
<hr>
<section class="index-content"> <!--Блок основного контента)-->
	<div class="index-content-left"> <!--Левый блок)-->
		<h2 class="index-content-title">Мы - маленькая, но гордая<br>дизайн-студия из Краснодара</h2>
		<p>Исповедуем принципы минимализма и чистоты. Ставим математический<br>расчет выше креатива.Работаем не покладая рук, как роботы.</p>
		<p>Выполняем заказы на разработку:</p>
		<ul>
			<li class="service">Веб-сайтов любой сложности</li>
			<li class="service">Мобильных приложений для IOS и Android</li>
			<li class="service">Слайдшоу и видео для корпоративных презентаций</li>
		</ul>
	</div>
	<div class="index-content-right"> <!--Правый блок)-->
		<div class="index-logo"> <!--Контейнер для стилизации логотипа-->
			<img src="img/index-logo.png" width="187" height="75" alt="Логотип">
		</div>
		<div class="text-logo">
		<p class="text-logo">SINCE 2018</p>
		</div>
		<div class="advertisement">
			<p class="advertisement">Как мы работаем:</p>
			<ul>
				<li class="advertisement">С самоотдачей 146%</li>
				<li class="advertisement">Соблюдая сроки на 100%</li>
				<li class="advertisement">По предоплате 50%</li>
			</ul>
		</div>
	</div>
</section>
<hr>
<div class="projects"> <!--Блок проеты студии, он же центровщик)-->
	<div class="progect1">
		<a href="#" class="project1">
			<img src="img/project-1.png" width="198" height="37" alt="Логотип проекта Glukhanko">
		</a>
	</div>
	<div class="progect2">
		<a href="#" class="project2">
			<img src="img/project-2.png" width="201" height="67" alt="Логотип проекта HTML Academy">
		</a>
	</div>
	<div class="progect3">
		<a href="#" class="project3">
			<img src="img/project-3.png" width="207" height="87" alt="Логотип проекта Barbershop">
		</a>
	</div>
</div>
<hr>
<div class="map"> <!--Блок с картой)-->
	<div class="map-container"> <!--Блок центровщик)-->
		<img src="img/map.png" width="1199" height="416" alt="Карта" usemap="#Navigation">
		<map name="Navigation">
			<area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Информация"><!--Атрибуты тега area заполнены "отбалды"--> 
		</map>	
		<div class="adress">
			<h3 class="adress-title">NERDS DESIGN STUDIO</h3>
			<p>191186, Санкт-Петербург<br>ул. Б. Конюшенная д. 19/8</p> <!--Пока br, после задания контейнеру с адресом ширины, текст сам перенесется как нужно-->
			<p>тел. +7 (812) 666-02-66</p>
			<a href="#" class="btn">Напишите нам</a>
		</div>
	</div>
</div>
<footer class="main-footer"> <!--Подвал сайта)-->
	<div class="container"> <!--Блок центровщик)-->
		<div class="container-left"> <!--Первый смысловой блок соцсети-->
			<a href="#" class="social-btn social-btn-vk">
				<img src="img/vk.png" width="63" height="63" alt="ВКонтакте">
			</a> <!--После заменить на иконки-->
			<a href="#" class="social-btn social-btn-fb">
				<img src="img/fb.png" width="63" height="63" alt="Фейсбук">
			</a>
			<a href="#" class="social-btn social-btn-inst">
				<img src="img/inst.png" width="63" height="63" alt="Инстаграмм">
			</a>
		</div>
		<div class="container-right"> <!--Второй смысловой блок-->
			<h2 class="footer-title">Давайте дружить, это выгодно!</h2>
			<p>Скидка 10% для друзей из социальных сетей.</p>
		</div>
	</div>
</footer>

И CSS

body {
margin: 0;
padding: 0;
font-size: 15px;
line-height: 22px;
font-family: "Mirad-Pro", sans-serif;
color: #283136;
background-color: white;

}

ul {/Вместо маркеров картинка/
list-style-image: url("…/img/style-img.png");
list-style-position: outside;
}

.logo {/Логотип/
width: 330px;
margin-left: 150px;
float: left;
}

.main-navigation a {/Главное меню/
text-decoration: none;
color: black;
list-style: none;
text-transform: uppercase;
}

.main-navigation a:hover {/Цвет при наведении/
color: #fb565a;
}

.main-navigation a:active {/Цвет при нажатии/
color: rgba(143, 143, 143, 0.7);
}

li.main-navigation {/Главное меню - сделвны эл-ты списка болчно-строчными/
display: inline-block;
}

.main-navigation a {/Главное меню - отступы справа друг от друга/
margin-right: 30px;
}

nav {/Главное меню-параметры блока/
width: 450px;
float: left;
}

nav {/Стиль шрифта/
font-family: “Roboto”, sans-serif;
font-size: 14px;
line-height: 30px;
font-weight: bold;
}

.cart a {/Корзина-параметры/
width: 170px;
margin-right: 100px;
margin-top: 15px;
float: right;
}

.cart a {/Корзина-стиль шрифта/
text-transform: uppercase;
text-decoration: none;
color: black;
}

.cart a {/Корзина-стиль шрифта/
font-family: “Roboto”, sans-serif;
font-size: 14px;
line-height: 30px;
font-weight: bold;
}

.cart a:hover {/Цвет при наведении/
color: #fb565a;
}

.cart a:active {/Цвет при жатии/
color: rgba(143, 143, 143, 0.7);
}

div.btn a {
text-transform: uppercase;
}

.btn {/Общие параметры для кнопок/
width: 220px;
height: 38px;
background: #fb565a;
color: white;
border-radius: 5px;
display: inline-block;
}

.btn {/Стилизация шрифта/
text-decoration: none; У ссылки убрано подчеркивание по умолчанию
text-transform: uppercase;
text-align: center;
}

.btn {/Стилизация шрифта/
font-family: “Roboto”, sans-serif;
font-size: 12px;
line-height: 18px;
}

.btn:hover {/Цвет при наведении/
background: #d6494d;
}

.btn:active {/Цвет при нажатии/
background: #b63538;
}

.btn a {/Позиционирование текста/
vertical-align: center;
}

.promo h2 {/Параметры промо-надписи/
font-family: “Roboto”, sans-serif;
font-size: 36px;
line-height: 36px;
font-weight: bold;
}

.promo {/Параметры блока промо/
width: 450px;
margin-left: 150px;
padding-left: 10px;
float: left;
}

.gallery {/Параметры блока галерея/
width: 450px;
margin-right: 50px;
float: right;
}

.container-center {
margin-top: 20px;
}

header {
padding: 10px;
background-color: #eeeeee;
}

.features {
margin: 80px 0;
}

.features h3 {/Параметры блока преимуществ/
font-family: “Roboto”, sans-serif;
font-size: 18px;
line-height: 30px;
font-weight: bold;
}

.features p {/Параметры абзацев в блоке/
font-family: “Roboto”, sans-serif;
font-size: 15px;
line-height: 22px;
}

.features a {/Параметры ссылок блока/
text-transform: uppercase;
}

.features-item1 {
width: 300px;
margin-left: 150px;
float: left;
}

.features-item2 {
width: 300px;
margin-left: 135px;
float: left;
}

.features-item3 {
width: 300px;
margin-right: 100px;
float: right;
}

.features-item1 a,
.features-item2 a,
.features-item3 a {
width: 140px;
height: 30px;
color: white;
}

.features-item1 a {
background-color: #fb565a;
}

.features-item1 a:hover {
background-color: #d6494d;
}

.features-item1 a:active {
background-color: #b63538;
}

.features-item2 a {
background-color: #00ca74;
}

.features-item2 a:hover {
background-color: #01a25e;
}

.features-item2 a:active {
background-color: #009053;
}

.features-item3 a {
background-color: #efc84a;
}

.features-item3 a:hover {
background-color: #d6ae2c;
}

.features-item3 a:active {
background-color: #c09b24;
}

.features-item1 a,
.features-item2 a,
.features-item3 a {
padding-top: 10px;
}

hr {
width: 1132px;
}

.index-content {
margin-top: 80px;
}

.index-content-left {
width: 570px;
margin-left: 150px;
float: left;
}

.index-content-left h2 {
font-family: “Roboto”, sans-serif;
font-size: 36px;
line-height: 36px;
}

.index-content-left p {
font-family: “Roboto”, sans-serif;
font-size: 16px;
line-height: 22px;
}

.index-content-right {
width: 280px;
margin-right: 100px;
margin-top: 15px;
float: right;
}

.text-logo p {
font-family: “Roboto”, sans-serif;
font-size: 16px;
line-height: 8px;
font-weight: bold;
}

.text-logo {
margin-top: 25px;
padding-left: 25px;
float: left;
}

.advertisement {
float: left;
}

.advertisement p {
font-family: “Roboto”, sans-serif;
font-size: 16px;
line-height: 22px;
}

.index-content-left,
.index-content-right {
margin-bottom: 80px;
}

div.advertisemen li {
text-align: left;
}

.projects {
margin: 60px 0;
}

.project1 {
width: 300px;
margin-left: 150px;
float: left;
}

.project2 {
width: 300px;
margin-left: 135px;
float: left;
}

.progect3 {
width: 300px;
margin-right: 100px;
float: right;
}

.progect1 a,
.progect2 a,
.progect3 a {
margin-bottom: 60px;
}

.map-container {
margin: 0 115px;
}

.map-container img {
position: absolute;
display: inline-block;
}

.adress {
width: 251px;
height: 241px;
background-color: white;
position: relative;
left: 155px;
top: 95px;
display: inline-block;
padding-left: 30px;
padding-top: 20px;
}

.container {
margin: 250px 0;
display: inline-block;
border: 2px solid green;
}

.container-left {
width: 300px;
float: left;
}

.container-left a {
min-height: 20px;
margin-left: 150px;
margin-right: -125px;
border: 2px solid red;
}

.container-right {
width: 600px;
float: right;
}

.container-right h2 {
min-height: 20px;
border: 2px solid red;
margin-left: 430px;
margin-right: -400px;
}

.container-right h2 {
font-family: “Roboto”, sans-serif;
font-size: 36px;
line-height: 36px;
}

.container-right p {
min-height: 20px;
border: 2px solid red;
margin-left: 430px;
margin-right: -400px;
}

.container-right p {
font-family: “Roboto”, sans-serif;
font-size: 16px;
line-height: 22px;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

ruslanhimself · 03.Апрель.2018 16:43:28

Уверены, что без обертки ссылки дивом не обойтись?

А так, каких-то грубых ошибок я не увидел в html. CSS бегом проглядел, ну можно правда флоаты не использовать, а делать на флексбоксах, даже в академии уже на интенсивах их не дают.

Проверяйте себя через линтер для редактора, где пишите, сами на переполняемость блоков и на соответствие макету через плагин для хрома perfectpixel.

И если скидываете код - добавляйте ссылку на песочницу, где его можно глянуть в действие, так очень сложно оценить, особенно css

Alexey42 · 06.Апрель.2018 11:37:34

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

Еще раз спасибо за Ваш комментарий и подсказки и дельные подсказки.