HTML/CSS - Timeline makes page too long with white spaceMake a div fill the height of the remaining screen spaceAdding HTML entities using CSS contentConvert HTML + CSS to PDF with PHP?Hiding the scrollbar on an HTML pageRedirect from an HTML pagepermanent 2x3 CSS image galleryDynamically loaded CSS having no effect in a Windows 8 appCSS border-style being reset to “none”Cannot display HTML stringTextarea too large for page?
Languages that we cannot (dis)prove to be Context-Free
Do infinite dimensional systems make sense?
Accidentally leaked the solution to an assignment, what to do now? (I'm the prof)
How to draw a waving flag in TikZ
Can I make popcorn with any corn?
Why "Having chlorophyll without photosynthesis is actually very dangerous" and "like living with a bomb"?
What typically incentivizes a professor to change jobs to a lower ranking university?
NMaximize is not converging to a solution
How to format long polynomial?
Character reincarnated...as a snail
Add text to same line using sed
How old can references or sources in a thesis be?
Arrow those variables!
How is it possible to have an ability score that is less than 3?
Why can't we play rap on piano?
How does quantile regression compare to logistic regression with the variable split at the quantile?
Which country benefited the most from UN Security Council vetoes?
Are the number of citations and number of published articles the most important criteria for a tenure promotion?
Can an x86 CPU running in real mode be considered to be basically an 8086 CPU?
Can a Cauchy sequence converge for one metric while not converging for another?
Today is the Center
Important Resources for Dark Age Civilizations?
"You are your self first supporter", a more proper way to say it
RSA: Danger of using p to create q
HTML/CSS - Timeline makes page too long with white space
Make a div fill the height of the remaining screen spaceAdding HTML entities using CSS contentConvert HTML + CSS to PDF with PHP?Hiding the scrollbar on an HTML pageRedirect from an HTML pagepermanent 2x3 CSS image galleryDynamically loaded CSS having no effect in a Windows 8 appCSS border-style being reset to “none”Cannot display HTML stringTextarea too large for page?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
0
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 is only work for snippet, didn't work for dreamweaver. I tried to run on both Chrome and firefox
GIF OF MY PROBLEM
@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!
html css dreamweaver timeline
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
add a comment |
0
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 is only work for snippet, didn't work for dreamweaver. I tried to run on both Chrome and firefox
GIF OF MY PROBLEM
@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!
html css dreamweaver timeline
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
What is your question? Do you have a screenshot or a dev site we can look at?
– Spartacus
Mar 8 at 2:18
@Spartacus I just update a gif link, my question was: is there a way for me to cut short of that white blank below?
– RoyalTulip
Mar 8 at 4:40
add a comment |
0
0
0
0
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 is only work for snippet, didn't work for dreamweaver. I tried to run on both Chrome and firefox
GIF OF MY PROBLEM
@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!
html css dreamweaver timeline
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
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 is only work for snippet, didn't work for dreamweaver. I tried to run on both Chrome and firefox
GIF OF MY PROBLEM
@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!
@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>@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>html css dreamweaver timeline
html css dreamweaver timeline
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
edited Mar 8 at 4:37
RoyalTulip
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
asked Mar 8 at 2:10
RoyalTulipRoyalTulip
144
144
What is your question? Do you have a screenshot or a dev site we can look at?
– Spartacus
Mar 8 at 2:18
@Spartacus I just update a gif link, my question was: is there a way for me to cut short of that white blank below?
– RoyalTulip
Mar 8 at 4:40
add a comment |
What is your question? Do you have a screenshot or a dev site we can look at?
– Spartacus
Mar 8 at 2:18
@Spartacus I just update a gif link, my question was: is there a way for me to cut short of that white blank below?
– RoyalTulip
Mar 8 at 4:40
What is your question? Do you have a screenshot or a dev site we can look at?
– Spartacus
Mar 8 at 2:18
What is your question? Do you have a screenshot or a dev site we can look at?
– Spartacus
Mar 8 at 2:18
@Spartacus I just update a gif link, my question was: is there a way for me to cut short of that white blank below?
– RoyalTulip
Mar 8 at 4:40
@Spartacus I just update a gif link, my question was: is there a way for me to cut short of that white blank below?
– RoyalTulip
Mar 8 at 4:40
add a comment |
2 Answers
2
active
oldest
votes
2
.timeline
height: 3000px;
This is the problem. I deleted the height: 3000px and it looks fine now. Also I don't think the max-height: 3000px in body and ul is necessary anymore.
@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
add a comment |
1
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
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55055753%2fhtml-css-timeline-makes-page-too-long-with-white-space%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
.timeline
height: 3000px;
This is the problem. I deleted the height: 3000px and it looks fine now. Also I don't think the max-height: 3000px in body and ul is necessary anymore.
@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
add a comment |
2
.timeline
height: 3000px;
This is the problem. I deleted the height: 3000px and it looks fine now. Also I don't think the max-height: 3000px in body and ul is necessary anymore.
@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
add a comment |
2
2
2
.timeline
height: 3000px;
This is the problem. I deleted the height: 3000px and it looks fine now. Also I don't think the max-height: 3000px in body and ul is necessary anymore.
@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
.timeline
height: 3000px;
This is the problem. I deleted the height: 3000px and it looks fine now. Also I don't think the max-height: 3000px in body and ul is necessary anymore.
@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>@charset "utf-8";
.timeline
list-style: none;
padding: 20px 0 20px;
position: relative;
body
ul
.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>answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
edited Mar 8 at 2:29
answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
answered Mar 8 at 2:21
lnhtmnhlnhtmnh
256
256
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
add a comment |
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
Hi, thank you for your answer, but that doesn't solve my problem. I will try to post a Gif about what my problem is. I would like to point out that the body with max-height is essential to keep the line of timeline exactly 3000px.
– RoyalTulip
Mar 8 at 4:35
add a comment |
1
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
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
add a comment |
1
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
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
add a comment |
1
1
1
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
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
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
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
answered Mar 11 at 15:45
RoyalTulipRoyalTulip
144
144
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55055753%2fhtml-css-timeline-makes-page-too-long-with-white-space%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What is your question? Do you have a screenshot or a dev site we can look at?
– Spartacus
Mar 8 at 2:18
@Spartacus I just update a gif link, my question was: is there a way for me to cut short of that white blank below?
– RoyalTulip
Mar 8 at 4:40