Почему масштаб страницы остаётся статичным при изменении?

Question

Всем ку. Такая проблема уже давно, но решения не могу найти. Когда уменьшаю или увеличиваю масштаб, то всё остаётся на своём месте (в верхнем левом углу)

На всех других сайтах, уменьшая масштаб, всё смещается в середину (проверьте сами, чтобы понять) Можно посмотреть во вконтакте, допустим. Как решить такую проблему?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Proba</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script type="text/javascript">
        (function() {
          var preload = document.getElementById("preloader");
          var loading = 0;
          var id = setInterval(frame, 64);

      function frame() {
            if (loading == 100) {
      clearInterval(id);
            } else {
          loading = loading + 1;
          if (loading == 90) {
        preload.style.opacity = "0";
      }
    }
  }
})();
  </script>

</head>
<body bgcolor="purple" margin="0" padding="0">

    <div class="panel">
        <button>
        <a id="onthepanel1" href="#Global">Global</a>
        <a id="onthepanel2" href="#Own">Own</a>
        <a id="onthepanel3" href="#Playlist">Playlist</a>
        </button>
    </div>
    
    <div class="panel">
        <p id="pop"><a href="#pop">Ку</a></p>
    </div>

    <div class="conteiner">
        <h3> Test </h3>
    </div>

</body>
</html>

body{
    margin: 0;
    padding: 0;
}

.panel {
    overflow: hidden;
    background-color: #333;
    position: relative;
    /*margin-top: -10px;
    width: 1538px;
    height: 50px;
    margin-left: -10px;*/
    margin: 0;
    padding: 0;
}
  
.panel a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    transition: 2s;
}
  
.panel a:hover {
    background-color: rgb(88, 88, 88);
    color: black;
    transition: 2s;
}
  
.panel a.active {
    background-color: #4CAF50;
    color: white;
}

#onthepanel1 {
    color: rgb(231, 166, 223);
    margin-left: 10px;
}

#onthepanel2 {
    color: rgb(231, 166, 223);
    margin-left: 600px;
}

#onthepanel3 {
    color: rgb(231, 166, 223);
    margin-left: 620px;
}

#onthepanel1:hover{
    color: rgb(197, 19, 197);
    margin-left: 10px;
}

#onthepanel2:hover{
    color: rgb(197, 19, 197);
    margin-left: 600px;
}

#onthepanel3:hover{
    color: rgb(197, 19, 197);
    margin-left: 620px;
}

button {
    background: #333;
    border: 2px solid #333;
}

#pop {
    text-align: right;
}

.container{
    max-width: 1600px;
    margin: 0 auto;
 }

Answer 1

Там используются container с центрированием например попробуйте добавить свои элементы так:

HTML:

<div class="container>
   <h3> Test </h3>
   <h3> Test </h3>
   <h3> Test </h3>
   <h3> Test </h3>
   <h3> Test </h3>
   <h3> Test </h3>
</div>

CSS

.container{
   max-width: 1600px;
   margin: 0 auto;
}

Ваш HTML должен быть таким:

<body bgcolor="purple" margin="0" padding="0">

    <div class="container">
        <div class="panel">
            <button>
                <a id="onthepanel1" href="#Global">Global</a>
                <a id="onthepanel2" href="#Own">Own</a>
                <a id="onthepanel3" href="#Playlist">Playlist</a>
            </button>
        </div>

        <div class="panel">
            <p id="pop"><a href="#pop">Ку</a></p>
        </div>
    </div>
</body>
</html>

в HTML

<div class="link__box"> 
  <a href="#"> Link </a>
</div>

В css:

.link__box{
  text-align: center;
}

Не стоит испоользовать что-то в таком роде:

<button>
    <a id="onthepanel1" href="#Global">Global</a>
    <a id="onthepanel2" href="#Own">Own</a>
    <a id="onthepanel3" href="#Playlist">Playlist</a>
    </button>

стоит заменить на:

<ul>
  <li><a id="onthepanel1" href="#Global">Global</a></li>
<li><a id="onthepanel2" href="#Own">Global</a></li>
<li><a id="onthepanel3" href="#Playlist">Global</a></li>
</ul>

БЛОГ НА HUSL

Почему масштаб страницы остаётся статичным при изменении?

Ответы (1 шт):