После запуска HTML-кода, я вижу, что некоторая часть содержимого следующей страницы видна на предыдущей странице, а иногда страница, которая должна начинаться с некоторого текста, а затем с изображением, я вижу, что страница непосредственно начинается с изображения, и янеобходимо вручную прокрутить вверх, чтобы увидеть текст
Я использую панель навигации, которая имеет 5 опций и фиксируется в верхней части. Когда я выбираю первую опцию, которая "примерно", я вижу, что в моем HTMLон должен начинаться с текста h2, курсив. Но моя страница "about" начинается с изображения, которое фактически является моей второй строкой в моем HTML.
Это изображение вызывает у меня эту проблему?Если да, пожалуйста, помогите мне найти решение
.jumbotron {
background: url("../images/BGPic.jpg") top center;
background-size: cover;
padding-top: 30em;
padding-bottom: 30em;
color: DodgerBlue;
}
.container-fluid {
padding: 100px 50px;
min-height: 5px;
}
.navbar {
margin-bottom: 0;
background-color: lightgray;
z-index: 9999;
border: 0;
font-size: 25px;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.container-fluid {
padding: 60px 50px;
}
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail img {
width: 100%;
height: 100%;
margin-bottom: 10px;
}
video{
width :100%;
height:auto;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
@media screen and (max-width: 768px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
}
@media screen and (max-width: 480px) {
.logo {
font-size: 150px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#myPage">Slam Book </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About You</a></li>
<li><a href="#blastFromPast">Blast From Past</a></li>
<li><a href="#Sree">Special Friend</a></li>
<li><a href="#Videos">Family and Friends</a></li>
<li><a href="#ATB">All The Best</a></li>
</ul>
</div>
</nav>
<div class="jumbotron text-center">
<div class="row">
<div class="col-sm-8">
<h1><i><mark>Bla Bla Bla</mark></i></h1>
<p><i><b><mark>Bla Bla Bla</mark></b></i></p>
</div>
</div>
</div>
<div id="about" class="container-fluid text-center bg-grey">
<h2><i>Bla Bla Bla</i></h2><br>
<div class="row">
<div class="col-sm-4">
<div class="thumbnail">
<img src="../images/IMG-20161114-WA0001.jpg" width="400" height="300" >
</div>
</div>
<div class="col-sm-8">
<h1>Bla Bla Bla</h1>
<ol>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla <h4><mark>Bla Bla Bla</mark></h4></li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla</li>
<li>Bla Bla Bla<mark>Bla Bla Bla</mark></li>
</ol>
</div>
</div>
</div>
<br>
<div id="blastFromPast" class="container"><br><br>
<h1><i>Gallery....</i></h1>
<div id="myPhotos" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myPhotos" data-slide-to="0" class="active"></li>
<li data-target="#myPhotos" data-slide-to="1"></li>
<li data-target="#myPhotos" data-slide-to="2"></li>
<li></li>
</ol>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</body>