Мои CSS отступы и поля отображаются, но не объявлены - PullRequest
Новая
       31

Мои CSS отступы и поля отображаются, но не объявлены

0 голосов
/ 25 марта 2020

Я пытаюсь исправить свой сайт. Проблема № 1 Я не могу вывести список заголовков с помощью margin-left или padding-left. Задача № 2: Главный заголовок 1 и 3 создают там собственный отступ . Моя цель - исправить заполнение, сблизить заголовки и избавиться от этой проблемы заполнения / полей. 

#hlist {
  top: 10px;
  margin-right: 3px;
  position: relative;
  height: 30px;
  padding-right: -12px;
}

ul#hlist {
  float: right;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
}

ul#hlist li {
  float: left;
}

ul#hlist li a {
  font-family: 'Poppins';
  color: black;
  text-align: center;
  text-decoration: none;
  padding: 14px 16px;
}

ul#hlist li a:hover {
  border-style: solid;
  border-width: 1px;
  border-color: gray;
  color: gray;
}

.content-wrapper {
  padding: 0;
}

.text-wrapper {
  height: 300px;
  width: 100%;
  position: relative;
  margin-top: -60%;
}

.text-wrapper h1 {
  text-shadow: 2px 2px black;
  text-align: center;
  color: #ffff;
  font-size: 10vw;
}

.text-wrapper h3 {
  margin-top: 10%;
  text-shadow: 2px 2px black;
  text-align: center;
  color: #ffff;
  font-size: 30px;
}
<div id="header">
  <ul id="hlist">
    <li><a href="#">WHERE TO WATCH</a></li>
    <li><a href="#">ABOUT</a></li>
  </ul>
  <div id="logo-box">
    <img style="height: 32px; padding:5px;" src="https://assets.nationalgeographic.com/styleguide/stable/logos/ng-logo-2fl.svg" alt="logo">
  </div>
</div>
</header>
<div class="content-wrapper">
  <image id="bg" src="https://i.imgur.com/i2MSrn7.jpg">
    <div class="text-wrapper">
      <h3> The Giant </h3>
      <h1> Panda </h1>
    </div>
    <image id="ply" style="height: 32px; padding:5px;" src="images.svg">
</div>

1 Ответ

0 голосов
/ 26 марта 2020

Ваш body имеет margin: 8px набор. Вот почему есть зазор по краям. Установите margin: 0 на теге body. Проверьте этот кодекс, который я создал . Это решает зазор по краям изображения.

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

Если вы хотите расположить ссылки более простым способом, изучите использование Flexbox и сделайте что-то вроде этого: 

display: flex;
justify-content: flex-end;

Сделайте это с вашими ссылками, и они должны всплывать, если это именно то, что вы пытаетесь сделать.

Также обратите внимание на использование CSS Reset, По умолчанию элементы HTML поставляются с определенными стилями CSS, применяемыми автоматически. Сброс избавит от стилей по умолчанию, чтобы они не мешали тому, что вы пытаетесь сделать. Многие элементы HTML имеют отступы / поля по умолчанию, которые вы можете не заметить.

...