@Stalk007

Картинки слайдера не между кнопок, как исправить?

У меня произошел баг после того, как я сместил ближе к тексту границу фона, сразу было все нормально

5f2b02d847cea988825811.png

<!DOCTYPE html>
<html>
    <head> 
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="UTF-8">
    <title>Билл Гейтс</title>
    </head>
    <body>	
		<div class ="summa">
			<link href="https://fonts.google.com/specimen/Recursive" 
		rel="stylesheet" type="text/css">
		<h1 align = center><a href ="https://www.google.com/search?q=%
			D0%B1%D0%B8%D0%BB%D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe
			=active&hl=ru&sxsrf=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596
			462929977&source=lnms&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAh
			ULrosKHXaDCVMQ_AUoAXoECBgQAw&biw=1536&bih=706">Билл Гейтс</a></h1>
	<div class = "text"align = center>
		<h2>
		sУи́льям Ге́нри Гейтс III (28 октября 1955, Сиэтл, Вашингтон), <br>
		более известный как Билл Гейтс — американский предприниматель и общественный деятель, <br>
		филантроп, один из создателей (совместно с Полом Алленом) <br>
		и бывший крупнейший акционер компании <a href = "https://ru.wikipedia.org/wiki/Microsoft"> Microsoft</a>. <br>
		</h2>
	</div>
<div class="slider__content">
	<div class="slider" id="slider">
		<div class="polosa" id="polosa">
			<a href="https://www.google.com/search?q=%D0%B1%D0%B8%D0%B
			B%D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe=active&hl=ru&sx
			srf=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596462929977&source=
			lnms&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAhULrosKHXaDCVMQ_AUo
			AXoECBgQAw&biw=1536&bih=706"><img src="Картинки/Билл1.jpg" alt=""></a>
			<a href="https://www.google.com/search?q=%D0%B1%D0%B8%D0%BB%
			D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe=active&hl=ru&sxsrf
			=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596462929977&source=lnm
			s&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAhULrosKHXaDCVMQ_AUoAXo
			ECBgQAw&biw=1536&bih=706"><img src="Картинки/Билл2.Jpeg" alt=""></a>
			<a href="https://www.google.com/search?q=%D0%B1%D0%B8%D0%BB%
			D0%BB+%D0%B3%D0%B5%D0%B9%D1%82%D1%81&safe=active&hl=ru&sxsrf
			=ALeKk02vsGoKBhNtLHB7pyDXtrUfq2Cgbw:1596462929977&source=lnm
			s&tbm=isch&sa=X&ved=2ahUKEwijhtrul__qAhULrosKHXaDCVMQ_AUoAXo
			ECBgQAw&biw=1536&bih=706"><img src="Картинки/Билл3.jpg" alt=""></a>
		</div>
	</div>
	<button class="right" id="slider-right">Вправо</button>
	<button class="left" id="slider-left">Влево</button>
</div>
     <div>
		 <h2 class = "text" align = center>
			Является сопредседателем благотворительного Фонда <br>
			Билла и Мелинды Гейтс.<br> 
			В период с 1996 по 2007 год, с 2009 по 2016 год — <br>
			самый богатый человек планеты по версии журнала Forbes.<br>    
		 </h2>	 
	</div>
	</div>
<script src="script.js" defer></script>
</body>

</html>

@font-face {
	font-family: Lemonada;
	src:url("Lemonada-Bold.tth");
}
.text {
	font-family: Lemonada;
}
.slider__content {
	
	width: 1536px;
	margin: 0px;
	
}
.slider {
	
	width: 512px;
	height: 512px;
	margin: 50px auto;
	overflow: hidden;
	
}
.polosa {
	
	background: yellowgreen;
	width: 1536px;
	position: relative;
	transition: all .5s;
		
}
.polosa img {
	
    width: 512px;
	height: 512px;
	float: right;
	border-radius: 30%;
	
}
.polosa::after {
	content: '';
	display: block;
	clear: both;
}
button {
	position: absolute;
	background-color: red;
	outline: none;
	padding: 8px 0;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	border: 2px solid  black;
	cursor: pointer;
	top: 36%;
	width: 80px;
}
.left {
	border-radius: 30px;
	left: 30%;
}
.right {
	border-radius: 30px;
	right: 28%;
}
.summa {
	background-color: yellowgreen;
	border-style: solid;
    border-color: white;
	border-width: 5px;

	margin-top: 20px;
	margin-left: 200px;
	margin-right: 200px;
}

document.getElementById('slider-left').onclick = sliderLeft;
document.getElementById('slider-right').onclick = sliderRight;
var left = 0;
var polosa = document.getElementById('polosa');

function sliderLeft() {
	left = left - 512;
	if (left < -1024) {
		left = 0;
	}
	polosa.style.left = left + 'px';
}

function sliderRight() {
	left = left + 512;
	if (left > 0) {
		left = -1024;
	}
	polosa.style.left = left  + 'px';
}
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
@lollikay
"Сразу все было нормально" у вас по чистой случайности. Элемент .slider центруется относительно элемента .slider__content, который имеет фиксированную ширину в 1536px. Из-за того, что вы "сдвинули" границу фона, левая граница .slider__content тоже сдвинулась, но элемент так и остался широким (и выпирает из родительского элемента), а .slider так и центруется относительно выпирающего элемента. В качестве фикса можно элементу .slider__content выставить ширину 100%.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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