I'm trying to create this timeline telling people about graffiti art. I have a problem where I couldn't cut short my page and it would let me scroll down to nothingness. Here is the code with only CSS and HTML.
EDIT: Here is a Gif about my problem is, I tried to remove the timeline: 3000px, but it only works for the snippet, didn't work for Dreamweaver. I tried to run on both Chrome and Firefox
@charset "utf-8";
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
height: 3000px;
}
body {
max-height: 3000px;
}
ul {
max-height: 3000px;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 22px;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4;
}
.timeline-badge.success {
background-color: #3f903f;
}
.timeline-badge.warning {
background-color: #f0ad4e;
}
.timeline-badge.danger {
background-color: #d9534f;
}
.timeline-badge.info {
background-color: #5bc0de;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
.timeline-body {
text-align: left;
margin: 0px;
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.timeline-panel .timeline-body .img-responsive {
padding-top: 5px;
}
@media screen and (max-width:768px){
#closer1 {
top: -200px;
}
#closer2 {
top: -200px;
}
#closer3 {
top: -200px;
}
#closer4 {
top: -200px;
}
#closer5 {
top: -200px;
}
#closer6 {
top: -200px;
}
#closer7 {
top: -200px;
}
}<body>
<div class="container">
<div class="page-header">
<h1 id="timeline">History</h1>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge">1970</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>n modern times, paint (particularly spray paint) and marker pens have become the most commonly used graffiti materials. </p>
</div>
</li>
<li class="timeline-inverted" id="closer">
<!--<div class="timeline-badge warning"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>A train full with what consider vandalism at that time.</p>
</div>
</div>
</li>
<li id="closer1">
<!--<div class="timeline-badge danger"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>In most countries, marking or painting property without the property owner's permission is considered defacement and vandalism, which is a punishable crime</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer2">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">1970s</h4>
</div>
<div class="timeline-body">
<p>Soon art galleries in New York began buying graffiti but it was around that time when John Lindsey, the mayor of New York at that time, declared the first war on graffiti in 1972. A few die-hard artists refused to be beaten and kept the art form alive during this period.</p>
</div>
</div>
</li>
<li id="closer3">
<div class="timeline-badge info">1980</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title"></h4>
</div>
<div class="timeline-body">
<p>Graffiti is considered one of the four elements of hip-hop (along with emceeing, DJing, and B-Boying). Graffiti is a central part of this subculture. The origins of all of these can be traced to the Bronx, in New York City.</p>
</div>
</div>
</li>
<li class="timeline-inverted" id="closer4">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Modern graffiti</h4>
</div>
<div class="timeline-body">
<p>On top of the political aspect of graffiti as a movement, political groups and individuals may also use graffiti as a tool to spread their point of view.</p>
</div>
</div>
</li>
<li id="closer5">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Banksy's work</h4>
</div>
<div class="timeline-body">
<p>Banksy displays his art on publicly visible surfaces such as walls and self-built physical prop pieces.</p>
</div>
</div>
</li>
<li class="timeline-inverted in" id="closer6">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Another Banksy works</h4>
</div>
<div class="timeline-body">
<p>Both Mickey Mouse and Ronald McDonald are two family-friendly faces of American capitalism, the same country that dropped Napalm on Vietnam</p>
</div>
</div>
</li>
<li id="closer7">
<!--<div class="timeline-badge success"></div>-->
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lady Pink</h4>
</div>
<div class="timeline-body">
<p>Lady Pink was born in Ecuador, raised in NYC and currently resides in the countryside north of the city</p>
</div>
</div>
</li>
</ul>
</div>
</body>As you can see, I try to reduce the height of the page by using max-height in both body and container. But It just didn't work. Thank you in advance!
So after a while i figured out myself what was the problem. The problems are: 1/ .timeline This is the parent and the position is relative. I set this max-height to 3000px 2/ The height that i set for each #closer is bigger and bigger and they are also relative. (-200px each)
Because of those 2 things, i accidentally expand my .body height higher and higher
The reason why i didn't notice this earlier because in my original file, i put it -400px for #closer1 and -800px for #closer2. This however expand my total max-height of timeline to over (3000px). This was the reason cause my page longer than before.
So yeah, when i delete the max-height and change each #closer to -200px, it's worked
All thank to @lnhtmn for his solution