Я новичок в HTML / CSS, и я пытаюсь разместить график на своем веб-сайте. У меня возникла странная проблема: каждый раз, когда я пытаюсь изменить высоту, под моим классом #timeline появляется странный блок пространства.

Что я пробовал: я читал несколько сообщений об абсолютном / относительном позиционировании и о том, как, если вы попытаетесь изменить высоту с помощью объекта с абсолютным или относительно позиционированием, он оставит зазор между тем, где он находится, и тем, где он раньше быть.

Имея эту информацию, я не уверен, как изменить положение элементов временной шкалы без использования абсолютного позиционирования, потому что я не хочу, чтобы шкала времени была слишком большой. Любые рекомендации или советы были бы замечательными. вот мой код (просмотрите в полноэкранном режиме - на шкале времени есть некоторые проблемы совместимости с сафари прямо сейчас: (используйте хром, если можете)

Мой CSS довольно длинный, но я хотел, чтобы вы увидели всю веб-страницу и поняли, как все это работает вместе. У меня возникла проблема после стилизации компонента body и #timeline, поэтому я считаю, что стили под этими компонентами вызывают проблемы.

Любые указатели будут оценены.

html{
	font-size: 10px;
	font-family: Raleway;
	width: 100%;
	height: 100%;
	background: linear-gradient(#FF9940, white);
	font-weight: normal;

}

h1{
	font-family: Raleway;
	padding: 20px;
	font-size: 53px;
	text-shadow: 2px 2px 1px grey;
	background-color: #1E2752;
	text-align: center;
	border: 5px solid black;
	color: #FCFCFF;
	margin-top: 10px;
}

li{
	float: left;
	padding-right: 30px;
}

li a{

display: block;
color: white;
text-decoration: none;
padding: 19px 16px;
border: 2px solid #ffffff;
right: -100px;

}

li a:hover{
color: #ffffff;
background: #FF9940;
transition: all 0.4s ease 0s;
}


ul{
transition: all 0.4s ease 0s;
list-style-type: none; 
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
color: #ffffff;
background: transparent;
display: inline-block;
position: absolute;
text-align: center;
padding: 0px;
top: 28px;
left: 23px;
right: 23px;
width: 100%;
}

h2{
	text-align: center;
	font-size: 25px;
}

h2 p{
	font-size: 18px;
}

.right-button{
  float: right;
  padding-right: 47px
  
}

.other-button{
	float: right;
	padding-right: 30px;
}

body{
	font-family: tahoma;
	font-size: 15px;
	line-height: 1.75;
	padding: 0;
	margin: 0;


}

#timeline{
	margin-left: 470px;
	height: 400px;
	width: 500px;
	display:flex;
	background-color: #031625;
}

#timeline:hover .t1-item{
	max-width: 400px;
	max-height: 500px;
	width:23.3333%;
}

.t1-item:before, .t1-item:after{

	transform: translate3d(0,0,0);
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	
}
.t1-item{

	transform: translate3d(0,0,0);
	position: relative;
	width: 25%;
	height: 100vh;
	min-height: 600px;
	color:white;
	overflow: hidden;
	transition: width 0.5s ease;
}

.t1-item:after{

	background: rgba(3,22,37,0.85);
	opacity: 1;
	transition: opacity .5s ease;
}

.t1-item:before{
	
	
	background: linear-gradient(to bottom, 
	rgba(0,0,0,0) 0%, rgba(0,0,0,1) 75%);

	z-index: 1;
	opacity: 0;
	transform: translate3d(0,0,0) translateY(50%);
	transition: opacity .5s ease,
	transform .5s ease;

}

.t1-item:hover{

	width: 30%;
}

.t1-item:hover:after{
	
	opacity: 0;
}

.t1-item:hover:before{
	
	opacity: 1;
	transform: translate3d(0,0,0) translateY(0);
	transition: opacity 1s ease, transform 1s ease
	.25s;
}

.t1-item:hover .t1-content{

	opacity: 1;
	transform: translateY(0);
	transition: all .75s ease .5s;
}

.t1-item:hover .t1-bg{

	filter: grayscale(0);
}

.t1-content{
	
	transform: translate3d(0,0,0) translateY(25px);
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 0.1618em;
	top: 55%;
	opacity: 0%;

}

.t1-content h3{

	font-family: tahoma;
	text-transform: uppercase;
	color: #1779cf;
	font-size: 1.44rem;
	font-weight: normal;
}

.t1-year{

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}

.t1-year p{

	font-family: tahoma;
	font-size: 1.628rem;
	line-height: 0;

}

.t1-bg{

	transform: translate3d(0,0,0);
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center center;
	transition: filter .5se ease;
	filter: grayscale(100%);
}
<!DOCTYPE html>
<html lang = "en" >

	<head>
		<meta charset = "UTF-8">
		<title> Isabelle Kreienbrink </title>
		<link href="styles/style.css" rel="stylesheet"> 
		<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
	</head>
	<body>
		<h1> Header </h1>
			<ul>
				<li><a href="#resume">Resume</a></li>
				<li><a href="#academics">Academics</a></li>
				<li><a href="#projects" >Projects</a></li>
				<li class="right-button"><a href="#contacts">Contact Info</a></li>
				<li class="other-button"><a href="#other">Test</a></li>
				<li class="other-button"><a href="#other">Testing</a></li>
			</ul>
		<h2> Welcome to my website! 
			<p> I hope you learn a little about me while you're here. </p>
		</h2>

		<section id="timeline">
			<div class="t1-item">
				<div class="t1-bg" style="background-image:url(https://eng-dev.stanford.edu/sites/default/files/styles/full_width_banner_tall/public/chalkboard_web.jpg?itok=xqk3ef56)">
				</div>

				<div class="t1-year">
					<p class="f2 heading">2014</p>
				</div>

				<div class="t1-content">
					<h3>Lorem ipsum dolor </h3>
					<p>
						test
					</p>
				</div>

			</div>



			<div class="t1-item">
				<div class="t1-bg" style="background-image:url(001.jpeg)"></div>

				<div class="t1-year">
				<p class="f2 heading">2015</p>
				</div>

				<div class="t1-content">
					<h3>Lorem ipsum dolor </h3>
					<p>
						test
					</p>
				</div>
			</div>

			<div class="t1-item">
				<div class="t1-bg" style="background-image:url(001.jpeg)"></div>

				<div class="t1-year">
				<p class="f2 heading">2016</p>
				</div>

				<div class="t1-content">
					<h3>Lorem ipsum dolor </h3>
					<p>
						test
					</p>
				</div>
			</div>

			<div class="t1-item">
				<div class="t1-bg" style="background-image:url(001.jpeg)"></div>

				<div class="t1-year">
				<p class="f2 heading">2015</p>
				</div>

				<div class="t1-content">
					<h3>Lorem ipsum dolor </h3>
					<p>
						test
					</p>
				</div>
			</div>

		</section>


	</body>
</html>
0
banna 15 Апр 2020 в 04:24

1 ответ

Лучший ответ

Если я правильно понимаю вашу проблему, проблема возникает из-за .t1-item {height: 100vh;} вместе с min-height: 600px. Это толкает .t1-item вниз в его состоянии до наведения, таким образом создавая это пространство.

Альтернативой использованию этих спецификаций высоты было бы использование margin-top для размещения ваших экземпляров .t1-item:

.t1-item {
transform: translate3d(0,0,0);
position: relative;
width: 25%;
color: white;
overflow: hidden;
transition: width 0.5s ease;
margin-top: 20rem;
}
0
somdev 15 Апр 2020 в 02:56