0

Доброго времени суток. Подскажите, пожалуйста, почему может возникать такая проблема? Когда меняю масштаб сайта в браузере, по боковым сторонам, а также с низу появляются отступы. Подскажите, пожалуйста, какие можно предпринять меры? Спасибо :) Пример

/*This is CSS RESET*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*This is the END of CSS RESET*/
/*This is the END of CSS RESET*/
/*This is the END of CSS RESET*/

body, html {
	background-color: #B63D32;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
div {
	box-sizing: border-box;
}
#page-wrapper {
	width: 100%;
	font: 100%/1.4em,Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 0;
 }
header{
	width: 96.1%;
	min-height: 202px;
	/*border*/
	border-top: 22px solid #000;
	border-bottom: 13px solid #000;
	border-left: 22px solid #000;
	border-right: 22px solid #000;
	margin: 0 auto;
	/*border ends*/
}
.container {
	max-width: 898px;
	margin: 0 auto;
}
.logo {
	width: 85px;
	height: 86px;
	margin: 0 auto;
	padding-top: 2px;
	padding-right: 9.85%;
}
.title__first {
	margin-top: 6px;
	margin-left: 0px;
	padding-right: 0px;
	font-size: 36px;
	font-family: Impact, sans-serif;
	color: #fff;
	text-shadow: 0px 4px rgba(0, 0, 0, .34);
	text-align: center;
}
.img2 {
	width: 300px;
	height: px;
}
h1 {
	font-size: 17px;
	font-family: Lobster, sans-serif;
	letter-spacing: 1px; 
	font-weight: normal;
	color: #fff;
	text-align: center;
	margin-top: 3px;
	padding-right: 0px;
}
.title__second {
	font-size: 18px;
	color: #000000;
	font-family: Impact, sans-serif;
	text-shadow: 1px 0.5px 3px rgba(255,255,255,0.6);
	background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
	letter-spacing: -0.55px;
	text-align: center;
	margin-top: 2px;
	margin-left: 0px;
	padding-right: 0px;
}
.main__menu {
	height: 13px;
	float: none;
	margin-top: 1.5%;
}
.main__menu ul li > a:hover {
	color: black;
	transition: 0.2s;
}
.menu {
	padding: 0;
	margin: 0;
	display: block;
	position: relative;
	left: -11.1%;
}
ul {
	padding-top: 11px;
}
.menu li {
	float: left;
	display: block;
	margin: 0 auto;
	width: 10%;
	text-align: center;
	padding-left: 23%;
}
.menu li a {
	color: white;
	text-decoration: none;
	font-size: 19px;
	font-family: Courier, sans-serif;
	font-weight: bolder;
}
section {
	width: 96.1%;
	height: 640px;
	/*border*/
	border-bottom: 13px solid #000;
	border-left: 22px solid #000;
	border-right: 22px solid #000;
	margin: 0 auto;
	margin-top: -16px;

	/*border ends*/ 
}
.container1 {
	height: 640px;
	margin-left: 0px;
	margin-top: 16px;
	margin-right: 0px;
	background-color: #BFBFBF;
	background-image: url(../img/fon.png);
	-webkit-background-size: cover; /* Для хрома */
	-moz-background-size: cover;  /* Для лисы*/
	-o-background-size: cover;  /* Для оперы*/
	-ms-background-size: cover;  /* Для ИЭ*/
	background-size: cover;  /* Для закрипления*/
	background-position: 19%;
	background-repeat: no-repeat;
}
.spisok {
	height: 640px; 
	width: 238px;
	background-color: #7B2019;
	position: relative;
	top: -100%;
	/*border*/
	border-bottom: 0px solid #000;
	border-left: 0px solid #000;
	border-right: 15px solid #000;
	/*border ends*/ 
} 
.spisok li {
	width: 195px;
	height: 45px;
	display: block;
	
	margin-right: 10px;
	margin-left: 13.2px;
	background-image: url(../img/span_menu.png);
	color: rgba(222,222,222 .1);	
	background-size: cover;
	-webkit-transition: All 0.3s ease-in-out;
	-moz-transition: All 0.3s ease-in-out;
	-o-transition: All 0.3s ease-in-out;
	-ms-transition: All 0.3s ease-in-out;
	transition: All 0.3s ease-in-out;

}
#oblacheniya {
	margin-top: 16px;
}

.spisok li a {
	width: 100%;
	height: 100%;
	text-decoration: none;
	font-family: CyrillicOldBold, sans-serif;
	letter-spacing: 0.5px;
	color: white;
	text-decoration: none;
	font-size: 16px;
	font-weight: normal;
	position: relative;
	display: list-item;
    text-align: -webkit-match-parent;
    text-align: center;
    padding-left: 9px;
    
}
.spisok ul 	> li:hover{
	background-image: url(../img/span_menu_hover.png);
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: All 0.3s ease-in-out;
	-moz-transition: All 0.3s ease-in-out;
	-o-transition: All 0.3s ease-in-out;
	-ms-transition: All 0.3s ease-in-out;
	transition: All 0.3s ease-in-out;
}
.spisok ul li > a:hover{
	text-shadow: gold 0 0 40px; /* Свечение голубого цвета */
    color: white;

}

.spisok ul li a p {
	padding-top: 14px;
	margin-top: 5px;
}

#ugol {
	background-image: url(../img/span_menu_black.png);
}


.text-div {
	width: 158px;
	height: 30px;
	text-align: center;
	margin-left: -9px;

}
.letter-spacing {
	letter-spacing: 1px;
}
.ryasi {
	letter-spacing: 2px;
}
.Nashi_Tseny {
	 /* Абсолютное позиционирование */
	float: none;
	margin: 0 auto;
   	width: 100%; /* Ширина слоя в процентах */
    height: 100%; /* Высота слоя в процентах */
    position: relative;
    top: 4%;
    left: -0.5%;
}
.text_1 {
	width: 600px;
	height: 400px;
	font-size: 16px;
	line-height: 25px;
	font-family: Courier New, sans-serif;
	font-style: normal;
	margin: 0 auto;
	position: relative;
	left: 8%;
	top: 1%;
}
h2 {
	font-size: 35px;
	font-family: Impact;
	font-weight: 400;
	margin: 0 auto;
	padding-top: 5px;
	text-decoration: underline;
	text-align: center;
}
strong {
	font-weight: bolder;
	font-size: 16px;
}
#vocem_tis {
	font-style: italic;
	font-weight: 900;
	font-family: Lobster, sans-serif;
	font-size: 15px;
}

footer {
	width: 96.1%;
	height: 115px;
	/*border*/
	border-bottom: 15px solid #000;
	border-left: 22px solid #000;
	border-right: 22px solid #000;
	margin: 0 auto;
	/*border ends*/
}
<?php  
	require_once $_SERVER['DOCUMENT_ROOT'].'/header.php';
?>
<section>
	<div class="container1">
		<div class="Nashi_Tseny">
			<div>
		 		<h2>Наши цены:</h2> <br><br><br><br>
			</div>
			<div class="text_1">
				<p>Облачения:<p>
				-иерейские <strong>шелковые</strong> от <strong><span id="vocem_tis">9000</span></strong> рублей с шикарными галунами <br>
				-иерейские <strong>парчевые</strong> от <strong><span id="vocem_tis">10000</strong></span> рублей<strong>*</strong><br> 
				Подрясники:<br>
				Подризники:<br>
				Рясы:<br>
				Стихари:<br>
				Скуфии:от 800 рублей;<br>
				Камилавки:от 1700<br>
				Крещальные:<br>
				Облачения для храма:<br>
				Вышитые кресты:<br>
				Кадильный уголь:<br>

				*парчевые облачения с индийскими галунами шьются по заказу
			</div>
		</div>
		<?php  
	require_once $_SERVER['DOCUMENT_ROOT'].'/left_menu.php';
        ?>
	</div>
</section>
<?php  
	require_once $_SERVER['DOCUMENT_ROOT'].'/objects/footer.php';
?>

2
  • разумеется появляются отступы.. размеры у вас фиксированные , либо медиа запросами меняете размеры либо вообще не указывайте и пользуйтесь flexbox
    – user33274
    16 ноя 2017 в 4:09
  • Спасибо. Похоже, правда пора учиться flexbox'у
    – Alex
    16 ноя 2017 в 4:11

1 ответ 1

0

У тебя очень слабый css-reset, судя по коду. Возможно, он не обнуляет что-то, а что именно - будет видно в инспекторе кода твоего браузера.

К тому же, для html и body нужно задать высоту, равную 100%.

Ну и дальше, по мелочи - растянуть рамку на минимальную высоту в 100%.


А вообще, стоит немного подучиться, вопрос показал очень слабое знание верстки.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.