I am new to HTML/CSS and I'm currently working on adding a timeline to my website. However, I've encountered a strange issue with the #timeline class where there is an odd block of space below it whenever I try to adjust the height.
So far, I have explored some resources that mention how changing the height of an absolute or relative positioned object can create a gap between its current position and original placement. This has left me unsure about how to reposition my timeline elements without resorting to absolute positioning, as I want to avoid making the timeline too large. Any suggestions or advice would be greatly appreciated. Here's my code (please view in a full window - there may be compatibility issues with Safari at the moment so Chrome is recommended):
My CSS code is quite extensive, but I wanted to provide the complete webpage for better understanding. The issue occurred after styling the body and #timeline components, leading me to believe that the styling after these components could be causing the problem.
Any guidance you can offer would be highly valued.
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>