Блог

Главная - Вопросы по программированию - Мой html-сайт переполняется правильным образом, когда я нажимаю на экран входа в систему и возвращаюсь на главную страницу

Мой html-сайт переполняется правильным образом, когда я нажимаю на экран входа в систему и возвращаюсь на главную страницу

#html #css

#HTML #css

Вопрос:

прежде всего, спасибо за вашу помощь. Я разрабатываю новый веб-сайт / блог, и это моя проблема. Когда я нажимаю на свою страницу входа, возвращаюсь на предыдущую страницу и нажимаю клавишу F5, моя страница переполняет нужный сайт. Как я могу это исправить?

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

 body{ width:100%; overflow-x: hidden;} 
.start{
    
    margin: 0;
    padding: 0;
    height: 40.7vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: whitesmoke;
}

.image{
    width: 450px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    margin: 0 9px;
}
.image img{
    width: 100%;
}
p{
    font-size: 17px;
    text-align: justify;
    line-height: 26px;
    margin-top: 20px;
}

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Open Sans",sans-serif;
}

header{
  height: 90px;
  background: #2f3640;
}

.inner-width{
  max-width: 2000px;
  padding: 0 40px;
  margin: auto;
}

.logo{
  float: left;
  padding: 12px 0;
}

.logo img{
  height: 62px;
}


.navigation-menu{
  float: right;
  display: flex;
  align-items: center;
  min-height: 90px;
}

.navigation-menu a{
  margin-left: 10px;
  color: #ddd;
  text-transform: uppercase;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 4px;
  transition: .3s linear;
}

.navigation-menu a:hover{
  background: #fff;
  color: #2f3640;
  transform: scale(1.1);
}

.navigation-menu i{
  margin-right: 8px;
  font-size: 16px;
}

.home{
  color: #ff6b6b;
}

.about{
  color: #0abde3;
}

.works{
  color: #feca57;
}

.team{
  color: #5f27cd;
}

.contact{
  color: #1dd1a1;
}

.menu-toggle-btn{
  float: right;
  height: 90px;
  line-height: 90px !important;
  color: #fff;
  font-size: 26px;
  display: none !important;
  cursor: pointer;
}


@media screen and (max-width:1200px) {
  .menu-toggle-btn{
    display: block !important;
  }

  .navigation-menu{
    position: fixed;
    width: 100%;
    max-width: 400px;
    background: #172b4d;
    top: 90px;
    right: 0;
    display: none;
    padding: 20px 40px;
    box-sizing: border-box;
  }

  .navigation-menu::before{
    content: "";
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #172b4d;
    position: absolute;
    top: -10px;
    right: 10px;
  }

  .navigation-menu a{
    display: block;
    margin: 10px 0;
  }

  .navigation-menu.active{
    display: block;
  }
}



.search-box{

    position: absolute;
    top: 6%;
    left:25%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding:10px;
}

.search-btn{
    color: #e84118;
    float:right;
    width:40px;
    height:40px;
    border-radius:50%;
    background: #2f340;
    display:flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.search-txt {
    border:none;
    background:none;
    outline:none;
    float:left;
    padding:0;
    color:white;
    font-size:16px;
    transition:0.4s;
    line-height:40px;
    width:0px;
}
.search-box:hover > .search-txt {
    width:240px;
    padding:0 6px;
}

.search-box:hover > .search-btn {
    background:white;
}


div.ü{
    position:relative;
    left:150px;
    vertical-align:top;
}
div.yayın{
    position:relative;
    left:150px;
}
img.u {
vertical-align:top;
}  
 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/menubar.css">
<link rel="stylesheet" href="css/style.css">
<title>Alba</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>
<body>
<header>
      <div class="inner-width">
        <a href="#" class="logo"><img src="images/AAAALBA_thumbnail.png" alt=""></a>
        <i class="menu-toggle-btn fas fa-bars"></i>
        <nav class="navigation-menu">
          <a href="#"><i class="fas fa-home home"></i> Anasayfa</a>
          <a href="#"><i class="fas fa-align-left about"></i> Hakkımızda</a>
          <a href="#"><i class="fab fa-buffer works"></i> Çalışmalar</a>
          <a href="#"><i class="fas fa-users team"></i> Yazarlar</a>
          <a href="#"><i class="fas fa-headset contact"></i> İletişim</a>
          <a href="sistemler/login.php"><i class="hesap"></i>Giriş Yap</a>
        </nav>
      </div>
</header>


<div class="search-box">
     <input class="search-txt" type="text" name="" placeholder="Aramak İçin Tıklayın">
     <a class="search-btn" href="#">
     <i class="fas fa-search"></i>
   </a>
</div>



<div class = "start">
 
  <div class = "image" >
   <a href = "https://www.youtube.com/">
   <img src = "images/1.jpg" alt = "">
   </a>
  </div>
  
  <div class = "image" >
   <a href = "https://www.youtube.com/">
   <img src = "images/2.jpg" alt = "">
   </a>
  </div>
  
  <div class = "image" >
   <a href = "https://www.youtube.com/">
   <img src = "images/3.jpg" alt = "">
   </a>
  </div>
  
</div>
<div class="ü">
           <a href="#"><i class=""></i>Yayın Akışı</a>

<br>
</div>

<div>
  <div class="yayın">
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
  
  <br>
  <h3><img class="u" src = "images/7.jpg" class=""   height = "125px" style="margin-right:20px;">Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC</h3>
</div>
 <script type="text/javascript">
      $(".menu-toggle-btn").click(function(){
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });
      
      
      $(".menu-toggle-btn").click(function(){
        $(this).toggleClass("fa-times");
        $(".navigation-menu").toggleClass("active");
      });
      
      
      
      document.querySelector(".search-icon").addEventListener('click',function(){
            document.querySelector(".search-screen").classList.add("active");
        });

        document.querySelector(".close-icon").addEventListener('click',function(){
            document.querySelector(".search-screen").classList.remove("active");
        });
      

      
      
    </script>
</body>
</html>

Комментарии:

1. Попробуйте добавить, например, border: 1px solid #F00; для всех элементов, поэтому в * в вашем css, чтобы увидеть элемент, который переполняется, затем попробуйте проверить его, возможно, это поможет вам понять, почему это происходит.

Ответ №1:

У меня была та же проблема, что и у вас, на локальном хосте, которая иногда возникает у меня.

Попробуйте без локального хоста. Возможно, это сработает..

(Как на скриншоте, который я видел, вы используете локальный хост ..)!>> [Это также может быть проблемой CSS]