USER_ONE
@USER_ONE

Страницу html не видно полностью на экране, как исправить?

Привет всем, я новичок в вёрстке сайтов и пока что учусь. Для тренировки навыков в html и css сделал простой шаблон сайта в photoshop. Сверстал по образцу psd файла, но в итоге вышло не так, как я задумал. Страницу нельзя полностью просмотреть, приходиться скролить. Как же сделать так, чтобы сайт был виден полностью?
Ниже представлен код на html и css
Код Html:
<!DOCTYPE html>
<html lang="ru">
<head>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<header>
	<div class = "banner"></div>
	<div class = "banner_nav"></div>
	</header>

	<div class = "phon"></div>
	<div class = "zagolovok_1"></div>
	<div class = "block_1"></div>
	<div class = "zagolovok_2"></div>
	<div class = "block_2"></div>
</body>
<footer>
	<div class = "the_end"></div>
</footer>
</html>


Код Css:
/*БАННЕР*/
.banner{
	background-color: #ff002a;
	height: 180px;
	width: 100%;
	position: absolute;
  	top: 0;
  	left: 0;
}
/*НАВИГАЦИЯ ПО САЙТУ*/
.banner_nav{
	background-color: #5a4fa4;
	height: 72px;
	width: 100%;
	position: absolute;
  	top: 180px;
  	left: 0;
}
/*ФОН*/
.phon{
	background-color: #f6ff00;
	height: 542px;
	width: 100%;
	position: absolute;
  	top: 252px;
  	left: 0;
}
/*1-й ЗАГОЛОВОК*/
.zagolovok_1{
	background-color: #010700;
	height: 73px;
	width: 580px;
	position: absolute;
  	top: 304px;
  	left: 200px;
  	bottom: 524px;
  	right: 1221px;
}
/*1-й БЛОК С КОНТЕНТОМ*/
.block_1{
	background-color: #1aff00;
	height: 370px;
	width: 580px;
	position: absolute;
  	top: 377px;
  	left: 200px;
  	bottom: 154px;
  	right: 1221px;
}
/*2-й ЗАГОЛОВОК*/
.zagolovok_2{
	background-color: #010700;
	height: 73px;
	width: 900px;
	position: absolute;
  	top: 304px;
  	left: 876px;
  	bottom: 524px;
  	right: 200px;
}
/*2-й БЛОК С КОНТЕНТОМ*/
.block_2{
	background-color: #1aff00;
	height: 370px;
	width: 900px;
	position: absolute;
  	top: 377px;
  	left: 876px;
  	bottom: 154px;
  	right: 200px;
}
/*КОНТАКТЫ*/
.the_end{
	background-color: #5b4804;
	height: 106px;
	width: 100%;
	position: absolute;
  	top: 794px;
  	left: 0;
}


ССЫЛКА НА psd, html, css файлы
https://yadi.sk/d/kwyZT9watVsAGA
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 2
artzolin
@artzolin
php, WordPress разработка сайтов zolin.digital
Хотите учиться верстать — учитесь делать это без копирования стилей элементов из фотошопа, это очень низкое качество верстки, 95% нужно переделывать

Из всего этого я бы оставил только background-color и width: 100%, остальное на выброс
Ответ написан
Комментировать
Говнокод, он такой не предсказуемый)))....
размеры заданы не в относительных (проценты, vw) единицах измерения, а в абсолютных, в данном случае в px. Если у вас экран 1600, а ширина двух блоков, допустим 900 и 800 - естественно он будет вылезать за края

Полностью соглашусь с автором предыдущего ответа, и от себя добавлю, так же это касается figma / avacode - не надо оттуда копировать все вслепую

От себя рекомендую прочитать : Эрик Мейер "CSS полный справочник" - там есть все

... Забыл написать:
И не пишите: "zagolovok", пишите title, не "kartochka-tovara", а "card-product" - так будет правильно, красиво и подтянете уровень английского

/*ФОН*/
.phon{
background-color: #f6ff00;
height: 542px;
width: 100%;
position: absolute;
top: 252px;
left: 0;
}
/*1-й ЗАГОЛОВОК*/
.zagolovok_1{
background-color: #010700;
height: 73px;
width: 580px;
position: absolute;
top: 304px;
left: 200px;
bottom: 524px;
right: 1221px;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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