1

Проблема при изменении масштаба в браузере. Весь контент смешается влево. Многие пишут, что margin: 0 auto; решит проблему, но не помогло. Дайте совет.

Скрин: Скрин

body {
  background: #000;
  font-family: sans-serif;
  margin: 0;
  padding: 0px;
}

@font-face {
  font-family: Narita-Monospace;
  src: url(fonts/Narita-Monospace.ttf);
  font-family: Studio-Gothic-Alternate-Bold-trial;
  src: url(fonts/Studio-Gothic-Alternate-Bold-trial.ttf);
}

h1 {
  margin-top: 280px;
  margin-left: 450px;
  color: white;
  top: 50%;
  left: 50%;
  text-align: center;
  width: 450px;
  height: 10px;
  font-family: Studio-Gothic-Alternate-Bold-trial;
  font-size: 70px;
  opacity: 0.9;
}

div {
  margin-bottom: 130px;
  width: 300px;
  height: 30px;
}

.contact_with_me {
  background-color: white;
  width: 100%;
  height: 700px;
  position: absolute;
}

.textwhatido {
  text-align: center;
  margin-top: 20px;
  margin-left: 290px;
  color: gray;
  font-size: 8px;
  font-family: Narita-Monospace;
  width: 740px;
}

p {
  font-size: 35px;
  color: black;
}

.image_on_contact_with_me {
  margin-top: 200px;
  margin-left: 290px;
  position: absolute;
}

.textaboutwhaido1 {
  margin-top: 150px;
  margin-left: 190px;
  font-family: Narita-Monospace;
  font-size: 18px;
  text-align: center;
  position: absolute;
}

.icreatesimple {
  font-size: 18px;
}

.textaboutwhaido2 {
  margin-left: 520px;
  margin-top: 150px;
  font-family: Narita-Monospace;
  font-size: 18px;
  text-align: center;
  position: absolute;
}

.withaneye {
  font-size: 18px;
}

.textaboutwhaido3 {
  position: absolute;
  text-align: center;
  font-family: Narita-Monospace;
  margin-left: 850px;
  margin-top: 150px;
  font-size: 18px;
}

.withmylove {
  font-size: 18px;
}

.products {
  font-family: Narita-Monospace;
  font-size: 30px;
  text-align: center;
  margin-top: 50px;
}

.sorrybut {
  font-family: Narita-Monospace;
  font-size: 20px;
  text-align: center;
}

.footer {
  position: absolute;
  margin-top: 700px;
}
<div class="text_on_video">
  <h1>i do things...</h1>
</div>
<div class="scroll_icon">
</div>
<div class="video">
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="jquery/jquery.backgroundvideo.min.js"></script>
  <script>
    $(document).ready(function() {
      var videobackground = new $.backgroundVideo($('body'), {
        "align": "centerXY",
        "width": 1280,
        "height": 720,
        "path": "video/",
        "filename": "stars_move",
        "types": ["mp4"]
      });
    });
  </script>
</div>
<div class="contact_with_me">
  <div class="footer">
    <img src="img/footer6.png">
  </div>
  <div class="textwhatido">
    <h2>WHAT I DO</h2>
    <p>Web developer with love for experiments, illustration & animation. Focusing on details i build interfaces for clients.</p>
  </div>
  <div class="textaboutwhaido1">
    <h3>Simple</h3>
    <p class="icreatesimple">I create simple and understandable interfaces.</p>
  </div>
  <div class="textaboutwhaido2">
    <h4>Interface Design</h4>
    <p class="withaneye">With an eye for details, I create beautiful design.</p>
    <div class="products">
      <h5>PRODUCTS</h5>
      <p class="sorrybut">Sorry, but so far I have not made any projects, do not forget, I'm a beginner developer.<br> I'm working on it :)</p>

    </div>
  </div>
  <div class="textaboutwhaido3">
    <h4>Animation</h4>
    <p class="withmylove">With my love of motion graphics i bring life to your projects</p>
  </div>
</div>
<div class="image_on_contact_with_me">
  <img src="icons/iconswhat.png">
</div>

1
  • не кто меня не учил, я самоучка
    – Atmosphear
    Commented 4 нояб. 2017 в 17:07

2 ответа 2

1

Я исследовал только элемент H1 предложенного вами кода. В стилях этого элемента вы указали следующие свойства:

  • margin-top - устанавливает верхний край элемента;
  • margin-left - устанавливает левый край элемента;
  • top - для абсолютно позиционированных элементов это свойство устанавливает верхний край элемента на единицу выше / ниже верхнего края его ближайшего расположенного предка;
  • left - для абсолютно позиционированных элементов это свойство устанавливает левый край элемента в единицу слева / справа от левого края его ближайшего расположенного предка;
  • text-align - указывает горизонтальное выравнивание текста в элементе.

Все эти элементы стилей создают/обозначают позицию для H1 в выдаче документа браузером. И эти свойства борются между собой и мешают друг другу.

Возможное решение: примените единицы 100vw и/или 100vh CSS для позиционирования этого элемента. Свойство vw - указывает 1% ширины относительно окна просмотра. 100vw всегда будет вычислять до 100% ширины окна просмотра. Если вы используете проценты, и у вас нет 100% от корня, вы не можете быть уверены в правильном вычислении 100% окна просмотра. Свойство vh - указывает 1% высоты относительно окна просмотра. Информация о этих свойствах w3schools. Для этого свойства примените мета тэг viewport. Моё предложение для стилей вашего элемента H1:

 h1 {
  text-align: center;
  color: white;
  width:100vw;    
  height: 10vh;   
  font-family: Studio-Gothic-Alternate-Bold-trial;
  font-size: 70px;
  opacity: 0.9;
}

Вы можете видеть, что я оставил для позиционирования только свойство text-align. Однако при применении этих стилей возникает горизонтальная полоса прокрутки. Это можно устранить устанавливая свойство overflow-x:hidden в элемент body. Таким образом общий код будет выглядеть следующим образом:

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta name=robots content=all />
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {
  background: #000;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
   overflow-x:hidden;      
}

@font-face {
  font-family: Narita-Monospace;
  src: url(fonts/Narita-Monospace.ttf);
  font-family: Studio-Gothic-Alternate-Bold-trial;
  src: url(fonts/Studio-Gothic-Alternate-Bold-trial.ttf);
}
        
 h1 {
  text-align: center;
  color: white;
  width:100vw;    
  height: 10vh;   
  font-family: Studio-Gothic-Alternate-Bold-trial;
  font-size: 70px;
  opacity: 0.9;
}

div {
  margin-bottom: 130px;
  width: 300px;
  height: 30px;
}

.contact_with_me {
  background-color: white;
  width: 100%;
  height: 700px;
  position: absolute;
}

.textwhatido {
  text-align: center;
  margin-top: 20px;
  margin-left: 290px;
  color: gray;
  font-size: 8px;
  font-family: Narita-Monospace;
  width: 740px;
}

p {
  font-size: 35px;
  color: black;
}

.image_on_contact_with_me {
  margin-top: 200px;
  margin-left: 290px;
  position: absolute;
}

.textaboutwhaido1 {
  margin-top: 150px;
  margin-left: 190px;
  font-family: Narita-Monospace;
  font-size: 18px;
  text-align: center;
  position: absolute;
}

.icreatesimple {
  font-size: 18px;
}

.textaboutwhaido2 {
  margin-left: 520px;
  margin-top: 150px;
  font-family: Narita-Monospace;
  font-size: 18px;
  text-align: center;
  position: absolute;
}

.withaneye {
  font-size: 18px;
}

.textaboutwhaido3 {
  position: absolute;
  text-align: center;
  font-family: Narita-Monospace;
  margin-left: 850px;
  margin-top: 150px;
  font-size: 18px;
}

.withmylove {
  font-size: 18px;
}

.products {
  font-family: Narita-Monospace;
  font-size: 30px;
  text-align: center;
  margin-top: 50px;
}

.sorrybut {
  font-family: Narita-Monospace;
  font-size: 20px;
  text-align: center;
}

.footer {
  position: absolute;
  margin-top: 700px;
}</style>
</head>
<body>
    <div class="text_on_video">
  <h1>i do things...</h1>
</div>
<div class="scroll_icon">
</div>
<div class="video">
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="jquery/jquery.backgroundvideo.min.js"></script>
  <script>
    $(document).ready(function() {
      var videobackground = new $.backgroundVideo($('body'), {
        "align": "centerXY",
        "width": 1280,
        "height": 720,
        "path": "video/",
        "filename": "stars_move",
        "types": ["mp4"]
      });
    });
  </script>
</div>
<div class="contact_with_me">
  <div class="footer">
    <img src="img/footer6.png">
  </div>
  <div class="textwhatido">
    <h2>WHAT I DO</h2>
    <p>Web developer with love for experiments, illustration & animation. Focusing on details i build interfaces for clients.</p>
  </div>
  <div class="textaboutwhaido1">
    <h3>Simple</h3>
    <p class="icreatesimple">I create simple and understandable interfaces.</p>
  </div>
  <div class="textaboutwhaido2">
    <h4>Interface Design</h4>
    <p class="withaneye">With an eye for details, I create beautiful design.</p>
    <div class="products">
      <h5>PRODUCTS</h5>
      <p class="sorrybut">Sorry, but so far I have not made any projects, do not forget, I'm a beginner developer.<br> I'm working on it :)</p>

    </div>
  </div>
  <div class="textaboutwhaido3">
    <h4>Animation</h4>
    <p class="withmylove">With my love of motion graphics i bring life to your projects</p>
  </div>
</div>
<div class="image_on_contact_with_me">
  <img src="icons/iconswhat.png">
</div>
</body>
</html>

Извините, что не исследовал полностью, предложенный вами код, но для вашего обучения будет полезным применить данную информацию для других проблемных элементов вашего веб-сайта.

0

Попробуй следующий способ для решения своей проблемы:

body 
      {
        margin: 0;  /* Это используется для сброса любых полей браузера по умолчанию */
        color: #FFFFFF;
      }

      .MostImportantBlock
      {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #000000;
      }
      .mainBlock
      {
        position: absolute;
        border: 1px solid rgb(183, 31, 130);
        width: 1100px;
        height: 470px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .mainBlock-internal
      {
        position: relative;
        width: 1100px;
        height: 470px;
      }

      /* Block 1 */
      .block-1
      {
        position: absolute;
        border: 1px solid red;
        border-radius: 5px;
        width: 420px;
        height: 80px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .block-1-internal
      {
        position: relative;
        width: 420px;
        height: 80px;
      }
      .blT-1
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 220px;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      /* ===== */

      /* Block 2 */
      .block-2
      {
        position: absolute;
        border: 1px solid rgb(74, 208, 21);
        border-radius: 5px;
        width: 680px;
        height: 105px;

        left: 50%;
        top: 28%;
        transform: translate(-50%, -28%);
      }
      .block-2-internal
      {
        position: relative;
        width: 680px;
        height: 105px;
      }
      .blT2-1
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 110px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .blT2-2
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 525px;

        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
      }
      /* ===== */

      /* Block 3 */
      .block-3
      {
        position: absolute;
        border: 1px solid rgb(239, 243, 26);
        border-radius: 5px;
        width: 310px;
        height: 80px;

        left: 0%;
        top: 62%;
        transform: translate(-0%, -62%);
      }
      .block-3-internal
      {
        position: relative;
        width: 310px;
        height: 80px;
      }
      .blT3-1
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 38px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .blT3-2
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 280px;

        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
      }
      /* ===== */

      /* Block 4 */
      .block-4
      {
        position: absolute;
        border: 1px solid rgb(239, 243, 26);
        border-radius: 5px;
        width: 375px;
        height: 80px;

        left: 50%;
        top: 62%;
        transform: translate(-50%, -62%);
      }
      .block-4-internal
      {
        position: relative;
        width: 375px;
        height: 80px;
      }
      .blT4-1
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 56px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .blT4-2
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 375px;

        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
      }
      /* ===== */

      /* Block 5 */
      .block-5
      {
        position: absolute;
        border: 1px solid rgb(239, 243, 26);
        border-radius: 5px;
        width: 310px;
        height: 80px;

        left: 100%;
        top: 62%;
        transform: translate(-100%, -62%);
      }
      .block-5-internal
      {
        position: relative;
        width: 310px;
        height: 80px;
      }
      .blT5-1
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 97px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .blT5-2
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 310px;

        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
      }
      /* ===== */

      /* Block 6 */
      .block-6
      {
        position: absolute;
        border: 1px solid rgb(26, 225, 243);
        border-radius: 5px;
        width: 375px;
        height: 80px;

        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
      }
      .block-6-internal
      {
        position: relative;
        width: 375px;
        height: 80px;
      }
      .blT6-1
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 50px;

        left: 50%;
        top: 0%;
        transform: translate(-50%, -0%);
      }
      .blT6-2
      {
        position: absolute;
        border: 1px solid white;
        border-radius: 3px;
        width: 375px;

        left: 50%;
        top: 100%;
        transform: translate(-50%, -100%);
      }
      /* ===== */
<div class="MostImportantBlock">
      <div class="mainBlock">
        <div class="mainBlock-internal">
          <!-- Block 1 -->
          <div class="block-1">
            <div class="block-1-internal">
              <div class="blT-1">
                <h1>
                  <code>I do things...</code>
                </h1>
              </div>
            </div>
          </div>
          <!-- Block 2 -->
          <div class="block-2">
            <div class="block-2-internal">
              <div class="blT2-1">
                <h2>
                  <code>WHAT I DO</code>
                </h2>
              </div>
              <div class="blT2-2">
                <code style="font-size: 14px;">
                  Web developer with love for experiments, illustration & animation. 
                  Focusing on details i build interfaces for clients.
                </code>
              </div>
            </div>
          </div>
          <!-- Block 3 -->
          <div class="block-3">
            <div class="block-3-internal">
              <div class="blT3-1">
                <h3>
                  <code style="font-size: 10px;">Simple</code>
                </h3>
              </div>
              <div class="blT3-2">
                <code style="font-size: 10px;">
                  I create simple and understandable interfaces.
                </code>
              </div>
            </div>
          </div>
          <!-- Block 4 -->
          <div class="block-4">
            <div class="block-4-internal">
              <div class="blT4-1">
                <h3>
                  <code style="font-size: 10px;">Animation</code>
                </h3>
              </div>
              <div class="blT4-2">
                <code style="font-size: 10px;">
                  With my love of motion graphics i bring life to your projects.
                </code>
              </div>
            </div>
          </div>
          <!-- Block 5 -->
          <div class="block-5">
            <div class="block-5-internal">
              <div class="blT5-1">
                <h3>
                  <code style="font-size: 10px;">Interface Design</code>
                </h3>
              </div>
              <div class="blT5-2">
                <code style="font-size: 10px;">
                  With an eye for details, I create beautiful design.
                </code>
              </div>
            </div>
          </div>
          <!-- Block 6 -->
          <div class="block-6">
            <div class="block-6-internal">
              <div class="blT6-1">
                <h3>
                  <code style="font-size: 10px;">PRODUCTS</code>
                </h3>
              </div>
              <div class="blT6-2">
                <code style="font-size: 10px;">
                  With my love of motion graphics i bring life to your projects.
                </code>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Обрати свое внимание на следующие стили:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

Именно они создают магию!

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.