Ищите помощь с переполнением текста / линейным градиентом в HTML / CSS - PullRequest
0 голосов
/ 15 июня 2019

Я пытаюсь создать свой первый сайт с нуля, используя HTML / CSS. У меня проблема в том, что текст, который у меня есть на странице, выходит за границы фонового изображения, и когда я прокручиваю вниз, контейнер (.violence) перестает отображать линейный градиент и переходит на белый фон. Можно ли как-нибудь расширить и подогнать градиент, чтобы он соответствовал объему введенного текста?

Заранее спасибо.

Я пытался искать решения в Интернете, но отсутствие знаний и понимания HTML / CSS не позволило мне решить проблему.

* {
  margin: 0;
  padding: 0;
}

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.main-nav {
  float: right;
  list-style: none;
  margin-top: 30px;
}

.main-nav li {
  display: inline-block;
}

.main-nav li a {
  color: white;
  text-decoration: underline;
  padding: 5px 10px;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
}

.main-nav li.active a {
  border: 1px solid white;
}

.main-nav li a:hover {
  border: 1px solid white;
}

.logo img {
  width: 150px;
  height: auto;
  float: left;
}

body {
  font-family: monospace;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.welcome {
  position: absolute;
  width: 1200px;
  margin-left: 375px;
  margin-top: 425px;
}

h1 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 50px;
  text-align: center;
  margin-top: 0px;
}

h2 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 22px;
  text-align: center;
  margin-top: 0px;
}

.violence {
  position: absolute;
  width: 1200px;
  margin-left: 375px;
  margin-top: 75px;
}

h3 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

h4 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-top: 25px;
}

h5 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

h6 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-top: 0px;
}

h7 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}

h8 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-size: 15px;
  text-align: left;
  margin-top: 0px;
}

h9 {
  color: white;
  font-family: "Trajan Pro", sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  margin-top: 0px;
}
<html>

<head>
  <title>The Quest for Arrakis: The Second Imperial Renaissance</title>
  <link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>
  <header>

    <div class="row">
      <div class="logo">
        <img src="logo.png">
      </div>
      <ul class="main-nav">
        <li><a href="home.html"> HOME </a></li>
        <li class="active"><a href="setting.html"> GAME SETTING </a></li>
        <li><a href=""> CHARACTERS AND ENTITIES </a></li>
        <li><a href=""> WRITING SAMPLES </a></li>
        <li><a href=""> GAME FEATURES </a></li>
        <li><a href=""> JOIN </a></li>
        <li><a href=""> CONTACT US </a></li>

      </ul>

    </div>

    <div class="violence">
      <h3>
        <p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
      </h3>
      <h4>
        <p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
          grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
        <p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
          previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
          of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
        <p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
          new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
        <h5><br>
          <p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
        </h5>
        <h6><br>
          <p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
            returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
        </h6>
        <h7><br>
          <p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
            are the ruled?"<br>-Princess Irulan</p>
        </h7>
        <h8>
          <p><br>The Quest for Arrakis II offers many paths to power.</p>
          <p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
          <p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
          <p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
            <p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
              you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
        </h8>
        <h9>
          <p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
        </h9>

    </div>

  </header>


</body>

</html>

Я ожидаю, что текст будет по-прежнему видимым.

1 Ответ

0 голосов
/ 15 июня 2019

Ваш вопрос был слишком расплывчатым, но я все еще пытался, поэтому вот мой ответ для вас. Вы должны применить свойство background-image к самому классу насилия вместо класса заголовка.

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

  1. HTML имеет теги заголовков от <h1> до <h6>, но вы использовали теги заголовков, помимо тех, которые HTML не распознает или не поддерживает.
  2. Из того, что я вижу, вы использовали теги заголовков для стилизации, что неправильно. В этом случае вам следует удалить все теги заголовков, кроме <h3>, который фактически используется в качестве заголовка.
  3. Я также вижу, что ваши знания о семантических тегах невелики, поэтому было бы лучше, если бы вы потратили немного времени на их чтение.
...