I didn't add any br in between the two slideshows so why is there a huge space (as big as 7 line breaks) in between it?
All I know is basic html and css (which I learned on my own). I don't know anything about Javascript AT ALL. The Javascript code I have below is from w3schools which my teacher showed us.
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
var slideIndex = [1, 1];
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no] - 1].style.display = "block";
}/* B O D Y */
body {
font-family: "Lato", sans-serif;
background-image: url(stars.gif);
margin: 0;
}
#content {
background-color: rgba(255, 255, 255, 0.2);
margin-left: 200px;
margin-right: 200px;
padding-top: 15px;
padding-bottom: 15px;
}
/* S I D E B A R */
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
/* A B O U T T H E A U T H O R */
#about-the-author-heading {
text-align: center;
margin-left: 200px;
margin-right: 200px;
padding-top: 5px;
padding-bottom: 5px;
border-top: 1px solid rgb(188, 184, 184);
border-bottom: 1px solid rgb(188, 184, 184);
color: white;
}
#about-the-author-description {
text-align: justify;
margin-left: 200px;
margin-right: 200px;
font-size: 24px;
}
#about-the-author-image {
width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}
#about-the-author-description {
color: white;
}
/* S L I D E S H O W */
* {
box-sizing: border-box
}
.mySlides1,
.mySlides2 {
display: none text-align: center;
height: 600px;
}
img {
vertical-align: middle;
}
.mySlides1 img,
.mySlides2 img {
width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Slideshow container */
.slideshow-container {
max-width: 600px;
position: relative;
margin: auto;
}
/* Next& previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 33%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.slideshow-title {
color: white;
text-align: center;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}<div id="mySidebar" class="sidebar"><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a><a href="about-the-author">About</a><a href="#">Bucket List</a><a href="#">Interests</a><a href="#">Education</a></div><div><button class="openbtn" onclick="openNav()">☰ MENU</button></div><div id="content"><div id="about-the-author"><h1 id="about-the-author-heading">About the Author</h1><img title="gf ni jeyen" id="about-the-author-image" src="author.jpg" alt="picture of the author at the beach"><p id="about-the-author-description"> Dana Pacatang has been a student for over 14 years. She’s currently a Grade 12 honor student of her section, St. Benedict, in Malate Catholic School. Her experience in cramming and staying late at night has enabled her to finish this project. You
can learn more about her by talking to her just for her to ignore you or you can email her at pacatangdanajustine@gmail.com. </p></div><h1 class="slideshow-title">Bohol Travel (2019)</h1><div class="slideshow-container"><div class="mySlides1 fade"><div class="numbertext">1 / 21</div><img src="1airport.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">2 / 21</div><img src="2zoocolate.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">3 / 21</div><img src="3zoocolate.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">4 / 21</div><img src="4zipline.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">5 / 21</div><img src="5zipline.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">6 / 21</div><img src="6sikatuna.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">7 / 21</div><img src="7sikatuna.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">8 / 21</div><img src="8dumaluan.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">9 / 21</div><img src="9loboc.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">10 / 21</div><img src="10loboc.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">11 / 21</div><img src="11chap.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">12 / 21</div><img src="12chap.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">13 / 21</div><img src="13chap.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">14 / 21</div><img src="14chocolate.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">15 / 21</div><img src="15chocolate.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">16 / 21</div><img src="16balicasag.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">17 / 21</div><img src="17balicasag.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">18 / 21</div><img src="18visland.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">19 / 21</div><img src="19dolphin.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">20 / 21</div><img src="20dolphin.jpg" style="width:100%"></div><div class="mySlides1 fade"><div class="numbertext">21 / 21</div><img src="21henann.jpg" style="width:100%"></div><a class="prev" onclick="plusSlides(-1, 0)">❮</a><a class="next" onclick="plusSlides(1, 0)">❯</a></div><h1 class="slideshow-title">Jeyen :></h1><div class="slideshow-container"><div class="mySlides2"><div class="numbertext">1 / 20</div><img src="j1.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">2 / 20</div><img src="j2.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">3 / 20</div><img src="j3.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">4 / 20</div><img src="j4.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">5 / 20</div><img src="j5.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">6 / 20</div><img src="j6.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">7 / 20</div><img src="j7.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">8 / 20</div><img src="j8.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">9 / 20</div><img src="j9.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">10 / 20</div><img src="j10.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">11 / 20</div><img src="j11.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">12 / 20</div><img src="j12.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">13 / 20</div><img src="j13.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">14 / 20</div><img src="j14.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">15 / 20</div><img src="j15.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">16 / 20</div><img src="j16.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">17 / 20</div><img src="j17.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">18 / 20</div><img src="j18.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">19 / 20</div><img src="j19.jpg" style="width:100%"></div><div class="mySlides2 fade"><div class="numbertext">20 / 20</div><img src="j20.jpg" style="width:100%"></div><a class="prev" onclick="plusSlides(-1, 1)">❮</a><a class="next" onclick="plusSlides(1, 1)">❯</a></div></div>