Использование оболочки для предотвращения перемещения элементов? - PullRequest
Новая
       14

Использование оболочки для предотвращения перемещения элементов?

0 голосов
/ 14 мая 2018

Я очень плохо знаком с HTML / CSS и работаю над сайтом для моей группы. Проблема, с которой я сталкиваюсь, заключается в том, что, когда я изменяю размер окна, текст перемешивается, а логотип сжимается. Я уже исследовал эту проблему, но пока мне не повезло. Общее решение, по-видимому, заключается в применении класса-обертки ко всему тексту текста с указанием минимальной ширины, но это не сработало.

Мне бы хотелось, чтобы все содержимое страницы оставалось там, где оно есть, когда размер окна браузера изменяется. Вот мой HTML: 

body {
  background-color: black;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.banner {
  position: absolute;
  top: 20px;
  margin-left: 40px;
}

.navbar {
  color: skyblue;
  font-size: 17px;
  font-family: "Courier New";
  font-weight: lighter;
  position: absolute;
  top: 350px;
}

.navbarlinks {
  text-decoration: none;
  color: skyblue;
}

a.navbarlinks:hover {
  color: azure;
}
<body>

  <div class="wrapper">

    <div class="banner">
      <img src="https://i.imgur.com/8d3CGHC.jpg" height=80% width=80%>
    </div>



    <nav>
      <h1 class="navbar">
        <a class="navbarlinks" href="shows.html">S h o w s</a> |

        <a class="navbarlinks" href="listen.html">L i s t e 
                n</a> |

        <a class="navbarlinks" href="watch.html">W a t c h</a> |

        <a class="navbarlinks" href="dance.html">D a n c e</a> | <a class="navbarlinks" href="dance.html">C o n t a c 
                t</a>
      </h1>

    </nav>

  </div>

</body>

Вот как выглядит страница в полноэкранном режиме:

(https://i.imgur.com/NuwgLnz.png)

А потом, когда я сделаю окно браузера уже:

(https://i.imgur.com/S1EZFHy.png)

Любые советы очень ценятся, это сводит меня с ума. Спасибо!

...