@recovni
Начинающий программист

Почему то section стоит ниже footer'a хотя footer самый последний, может не то где то написал как решить?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/style.css" type="text/css">
	<link href="https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans+TC:700&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans+TC:700|PT+Serif&display=swap" rel="stylesheet">
</head>
<body>
	<header>
		<div class="container">
			<div class="heading clearfix">
				<img src="image/logo.png" alt="Erasyl" class="logo" width="215px">
					<nav>
						<ul class="menu">
							<li>
								<a href="index.html">Портфолио</a>
							</li>
							<li>
								<a href="#vniz">Обо мне</a>
							</li>
							<li>
								<a href="#">Блог</a>
							</li>
							<li>
							<a href="#">Контакты</a>
							</li>
						</ul>
					</nav>
			</div>
		</div>

		<div class="container">

			<div class="titles_first">
				Портфолио веб-программиста
			<h1>
				Ерасыла Кудайбергенова
			</h1>
			</div>
		</div>
	</header>

	<section>
		<div class="container">
			
			<div class="title">
				
				<a name="vniz">Обо мне</a>

			</div>

			<div class="aboutme">
				
				Здравствуйте, я веб-программист меня зовут Ерасыл Кудайбергенов, я учусь в колледже "СФЭК" в 3 - м курсе. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus reprehenderit, qui explicabo perferendis, ratione cumque ipsam! Quos optio numquam dolores, corporis natus minima labore, animi, dolore minus, accusamus beatae dolorem quisquam odit possimus reiciendis eius debitis ratione consectetur quae nesciunt ab voluptas? Quaerat explicabo alias laudantium unde, odio adipisci quisquam.

			</div>

		<div class="services">
			<div class="services_item">
				
				<img src="image/icon1.png" alt="Услуга">

				<h3>Разработка сайтов</h3>
				<div class="lorem">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, incidunt.
				</div>

			</div>

			<div class="services_item">
				
				<img src="image/icon2.png" alt="Услуга" height="85px"></img>

				<h3>Графический дизайн</h3>

				<div class="lorem">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, culpa quae recusandae ipsum quibusdam, nulla officia facilis eveniet soluta mollitia. Saepe sequi non doloremque! Quos aperiam, consequatur minima! Cum, debitis veritatis vero eius vitae nesciunt aliquam ipsam molestiae in, tenetur, soluta tempora officiis ipsa similique a minus accusamus at nemo?
				</div>

			</div>

			<div class="services_item">
				
				<img src="image/icon3.png" alt="Услуга" height="90px">

				<h3>Системное администрирование</h3>

				<div class="lorem">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, beatae totam libero, architecto est reprehenderit!
				</div>

			</div>

		</div>
	</section>

	<a href="#" data-target="#el">Обратно наверх :)</a>

	<script type="text/javascript">
	$('a').on('click', function(){
  	var target = $(this).data('target');
  	var pos = $(target).offset().button;
  	$('html, body').animate({'scrollButton': pos -200}, -500);
	});
	</script>
</body>
</html>

body {
	padding: 0;
	margin: 0;

}

div {
	box-sizing: border-box;
}

header {
	background: url(../image/lowpoly.png) no-repeat center top / cover;
	height: 800px;
}

.container {
	width: 900px;
	margin: 0 auto;
}

.logo {
	margin-top: 41px;	
	float: left;
}

nav {
	float: right;
	margin-top: 60px;
}

.menu {
	padding: 0;
	margin: 0;
	display: block;
}

.menu li {
	float: left;
	display: block;
	margin-right: 41px;
}

.menu li a {
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
}

.clearfix:after {
	content: '';
	display: table;
	width: 100%;
	clear: both;
}

.titles_first {
	color: #fff;
	font-size: 40px;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	margin-top: 185px;
}

h1 {
	font-size: 38px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
}

.title {

	font-size: 35px;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	margin-top: 75px;

}

.aboutme {

	font-size: 15px;
	color: #000;
	font-family: 'Montserrat', sans-serif;
	text-align: left;
	margin-top: 50px;
	line-height: 35px;

}

.services {

}

.services_item {
	width: 270px;
	float: left;
	text-align: center;
	margin-top: 150px;
}

h3 {

	font-family: 'Montserrat', sans-serif;

}

.lorem {
	font-family: 'Montserrat', sans-serif;
}

a {
	text-decoration: none;
	font-size: 25px;
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: #102D86;
}

5e7847deb85a9358757025.png
В итоге выходит так, то есть слово "Обратно на вверх должно быть в самом низу но она выше section'a
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
В песочницу не загонял, но думаю, потому что родителю сервисов не задан clearfix
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@recovni Автор вопроса
Начинающий программист
Вот закинул в песочницу - www.cssdesk.com/HBbfA
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы