Проблема с позиционированием h1 - PullRequest
Новая
       2

Проблема с позиционированием h1

0 голосов
/ 31 января 2019

h1 в области витрины становится друг на друга, когда я пытаюсь сжать окно, которое не должно вести себя таким образом. Но когда это не так, все в порядке.Поскольку я новичок в этом секторе, я не понимаю, что я сделал неправильно.Может ли кто-нибудь показать мне, где это должно быть исправлено?html: 

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}


/* GLOBAL */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  padding: 0;
  margin: 0;
}


/* HEADER */

header {
  background-color: #35424a;
  color: #fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}


/*Showcase*/

#showcase {
  min-height: 400px;
  background: url('../images/showcase.jpg') no-repeat 0 -400px;
  text-align: center;
  color: #fff;
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
}

#showcase p {
  font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ACME Web Design</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">Acme</span> Web Design</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="showcase">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
    </div>
  </section>
  <section id="newsletter">
    <div class="container">
      <h1>Subscribe To Our Newsletter</h1>
      <form action="">
        <input type="email" name="email" id="" placeholder="Enter Email">
        <button type="submit" class="button_1">Submit</button>
      </form>
    </div>
  </section>
  <section id="boxes">
    <div class="container">
      <div class="box">
        <img src="images/logo_html.png" alt="">
        <h1>HTML 5 Markup</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_css.png" alt="">
        <h1>CSS 3 Styling</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_brush.png" alt="">
        <h1>Graphic Design</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
    </div>
  </section>
  <footer>
    <p>ACME Web Design, Copyright &copy; 2019</p>
  </footer>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Лично я бы добавил стиль line-height: 55px; к элементу #showcase h1, чтобы высота текста соответствовала его размеру.

Это будет конечный результат: 

body {
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}


/* GLOBAL */

.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  padding: 0;
  margin: 0;
}


/* HEADER */

header {
  background-color: #35424a;
  color: #fff;
  padding-top: 30px;
  min-height: 70px;
  border-bottom: #e8491d 3px solid;
}

header a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 17px;
}

header li {
  float: left;
  display: inline;
  padding: 0 20px;
}

header #branding {
  float: left;
}

header #branding h1 {
  margin: 0;
}

header nav {
  float: right;
  margin-top: 10px;
}

header .highlight,
header .current a {
  color: #e8491d;
  font-weight: bold;
}

header a:hover {
  color: #cccccc;
  font-weight: bold;
}


/*Showcase*/

#showcase {
  min-height: 400px;
  background: url('../images/showcase.jpg') no-repeat 0 -400px;
  text-align: center;
  color: #fff;
}

#showcase h1 {
  margin-top: 100px;
  font-size: 55px;
  margin-bottom: 10px;
  line-height: 55px;
}

#showcase p {
  font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ACME Web Design</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header>
    <div class="container">
      <div id="branding">
        <h1><span class="highlight">Acme</span> Web Design</h1>
      </div>
      <nav>
        <ul>
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="services.html">Services</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="showcase">
    <div class="container">
      <h1>Affordable Professional Web Design</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
    </div>
  </section>
  <section id="newsletter">
    <div class="container">
      <h1>Subscribe To Our Newsletter</h1>
      <form action="">
        <input type="email" name="email" id="" placeholder="Enter Email">
        <button type="submit" class="button_1">Submit</button>
      </form>
    </div>
  </section>
  <section id="boxes">
    <div class="container">
      <div class="box">
        <img src="images/logo_html.png" alt="">
        <h1>HTML 5 Markup</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_css.png" alt="">
        <h1>CSS 3 Styling</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
      <div class="box">
        <img src="images/logo_brush.png" alt="">
        <h1>Graphic Design</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
      </div>
    </div>
  </section>
  <footer>
    <p>ACME Web Design, Copyright &copy; 2019</p>
  </footer>
</body>

</html>

Надеюсь, это поможет.

0 голосов
/ 31 января 2019

У вас есть несколько вариантов здесь:

  1. Если вы хотите разрешить стек заголовка для небольших экранов, вам нужно будет внести небольшие изменения в ваш CSS.Я заметил, что у вас есть следующая строка в вашем css:

line-height: 1.6em;

Попробуйте изменить это значение на 

line-height:1.6;

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

Если вы хотите, чтобы при изменении размера экрана текст оставался одной строкой, вы можете использовать медиазапросы для изменения размера шрифта:

На основании вашего кода я заметил, что шрифт начинаетсядля стека в 1204 пикселей, поэтому попробуйте добавить это: 

@media screen and (max-width: 1204px) {
#showcase h1 {
    font-size: 45px;
}

} ​​

А затем вы можете продолжить тестировать размер экрана, а затем добавить дополнительные точки останова в зависимости от того, где шрифтначинает складываться.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...