При изменении масштаба страницы смещается содержимое сайта

Question

При изменении масштаба страницы смещается содержимое сайта

Рейтинг: 3Ответов: 1Опубликовано: 11.02.2015

Я только-только начал изучать веб-программирование и столкнулся с проблемой, описанной в названии темы. Вот мой код:

<html>
<head>
     <title>ПредиСЛОВие</title>
     <style>
           html 
                {
                  height:100%;
                }
           body
                {

                  height:100%;
                  background:url(Image/pr.png);
                  background-size:100%100%;
                  background-attachment:fixed;
                }
           .logo
                 {
                  position:fixed;
                  right:39%;
                 }
           .logo1
                  {
                   position:fixed;
                   bottom:30%;
                   left:10%;
                  }
           .logo2 
                  {
                    position:fixed;
                    bottom:31%;
                    left:41%;
                  }
           .logo3 
                  {
                    position:fixed;
                    bottom:31%;
                    right:10%;
                  }
           .logo4
                  {
                    position:fixed;
                    bottom:23%;
                    left:10%;
                  }

     </style>
</head>
<body>
     <div class="logo">
                      <a href="prdsl.html">
                                          <img src="Image/pr1.png">
                      </a>
     </div>
     <div class="logo1">
                       <a href="News.html">
                                          <img src="Image/pr2.png">
                       </a>
     </div>
     <div class="logo2">
                       <a href="Video.html">
                                           <img src="Image/pr3.png">
                       </a>
     </div>
     <div class="logo3">
                       <a href="cntk.html">
                                           <img src="Image/pr4.png">
                       </a>
     </div> 
     <div class="logo4">
                       <font size="10" color="white" face="Politica">О ПРОЕКТЕ</font>
     </div>               
</body>
</html>

И еще несколько скриншотов, чтобы проиллюстрировать проблему. Скриншоты иллюстрируют состояние страницы до увеличения и уменьшения и после таковых изменений!

Скриншоты:

alt text

Исправленный код:

   <html>



   <head>
     <title>Slovo - Одесса</title>
     <style>
           html 
                {
                  height:100%;
                }
           body
                {
                  margin:0;
                  height:100%;
                  background:url(Image/pr.png);
                  background-size:100%100%;

                }
       .wrapper 
                { 
                  position: relative;
                  display: block;
                  min-width: 960px;
                  min-height: 700px;

               }
       .logo
             {
              position:absolute;
              top:5px;
              right:990px;
             }
       .logo1
              {
               position:absolute;
               top:645px;
               right:2000px;
              }
       .logo2 
              {
                position:absolute;
                top:655px;
                right:1050px;
              }
       .logo3 
              {
                position:absolute;
                top:634px;
                right:200px;
              }
       .logo4
              {
                position:absolute;
                top:1000px;
                right:2100px;
              }

     </style>
</head>



<body>
     <div class="wrapper">
     <div class="logo">
                      <a href="prdsl.html">
                                          <img src="Image/pr1.png">
                      </a>
     </div>
     <div class="logo1">
                       <a href="News.html">
                                          <img src="Image/pr2.png">
                       </a>
     </div>
     <div class="logo2">
                       <a href="Video.html">
                                           <img src="Image/pr3.png">
                       </a>
     </div>
     <div class="logo3">
                       <a href="cntk.html">
                                           <img src="Image/pr4.png">
                       </a>
     </div> 
     <div class="logo4">
                       <font size="10" color="white" face="Politica">О ПРОЕКТЕ</font>
     </div> 
     </div>



</body>



</html>

css html масштабирование

Источник: Stack Overflow на русском

Answer 1

▲ 1

При использовании position: fixed; вы НЕ избежите такой проблемы. Пара советов:

1) Задайте так называемый "ограничитель" с минимальной высотой и шириной

   .wrapper {
        position: relative;
        display: block;
        min-width: 960px;
        min-height: 700px;
   }

2) Позиционируйте элементы "абсолютно": position: absolute;

При изменении масштаба страницы смещается содержимое сайта

Ответы