0

Бьюсь больше дня уже - если я не задаю высоту элементу, тогда текст выползает за рамки flex-элемента и в целом слипается, мне же нужно, чтобы граница элемента была вдоль текста, но при этом длина элемента должна быть 730px. Вопрос - как нормализовать здесь текст и уместить его в границы, как на первой картинке?

Как должно быть Мой вариант

.page {
  min-width: 1100px;
  max-width: 1600px;
  margin: 0 auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 600px;
  max-height: 756px;
}

div {
  border: 1px solid red;
}

.logo {
  height: 32px;
  width: 228px;
}

.logo_place_header {
  flex: none;
  top: 0;
  left: 0;
  margin: 30px 60px 0px;
}

.title {
  justify-self: center;
  width: 730px;
  line-height: 96px;
  font-size: 102px;
  font-weight: 600;
}

.header__title {
  margin: 0px 64px 0px;
  z-index: 1;
}

.subtitle {
  width: 388px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
  flex-wrap: wrap;
  text-align: left;
}

.header__subtitle {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0px 64px 30px;
}
<div class="page">
  <header class="header">
    <div class="logo logo_place_header">
      <img src="./images/logo_place_header.svg" alt="Логотип для шапки сайта">
    </div>
    <div class="title header__title">
      <h1>Научиться учиться</h1>
    </div>
    <div class="subtitle header__subtitle">
      <h2>
        <html lang="ru">Какие современные и эффективные подходы к обучению вы можете использовать в своей жизни? <a class="header__link" href="#">Узнать &#8594;</a>

        </html>
      </h2>
    </div>
    <!-- 
      <div class="main-illustration header__elements-position-type"><img src="./images/header-image.png" alt="Картинка для шапки сайта" width="765"></div>
      <div class="square-pic header__elements-position-type"></div>   -->
  </header>
  <!--<div class="two-columns">
        <div class="brief two-columns__brief">
            <h4>Главные проблемы в обучении</h4>  
        </div>
        <div class="main-text"> 
          <p class="two-columns__main-text">Ни в школе, ни в институте нас не учат тому, как правильно изучать материал. Мы готовимся к экзаменам и учим билеты. Мы тренируемся решать однообразные задачи, чтобы лучше сдать тест, но часто в итоге это не дает нам реального знания. Зубрежка быстро выветривается и не приносит пользы.</p>
          <p class="two-columns__main-text"><span class="span-accent">Вывод:</span> учиться тоже нужно уметь, но почему-то этому мало где учат. Что с этим делать?</p>
          <p class="two-columns__main-text">Конкретные техники и упражнения помогают изменить подход к обучению, сделать его эффективным и захватывающим. Эти же техники применяются на примере обучения в Практикуме.</p>
        </div>    
      </div>   -->
</div>

7
  • Александр оформите код так чтобы он воспроизводил Вашу задачу, по текущему коду ничего не понятно, можете так же приложить скрины "что есть" и "как надо", так же не стесняйтесь изпользовать стили css чтобы подчеркнуть эффект 18 сен 2022 в 14:29
  • у .header отсутствует закрывающая }
    – ZxNuClear
    18 сен 2022 в 14:36
  • Неверно скопировал 18 сен 2022 в 14:37
  • Поменял, прошу прощения, первый раз здесь 18 сен 2022 в 14:49
  • А вопрос в чём? Нормально опишите проблему. 18 сен 2022 в 15:57

1 ответ 1

0

Получилось сделать вот так:

<header class="header">
  <div class="logo logo_place_header">
    <img src="./images/logo_place_header.svg" alt="Логотип для шапки сайта">
  </div>
  <div>
    <h1 class="header__title header__title_position">Научиться учиться</h1>
  </div>
  <div class="header__subtitle header__subtitle_position">
    <p>Какие современные и эффективные подходы к обучению вы можете использовать в своей жизни? <a class="header__link" href="#">Узнать &#8594;</a></p>
  </div>
  <div class="header__main-illustration header__main-illustration_place"><img src="./images/header-image.png" alt="Картинка для шапки сайта" width="765"></div>
  <div class="header__square-pic header__square-pic_place"></div>
</header>

.page {
  min-width: 1100px;
  /* мы ещё не умеем делать мобильную версию сайта, */
  /* поэтому выше установлена минимальная ширина страницы */
  max-width: 1600px;
  /* выше установили ограничение по максимальной ширине */
  margin: 0 auto;
  /* выше для экранов больше 1600px отцентрировали весь контент */
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  min-height: 600px;
  max-height: 756px;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

.logo {
  height: 32px;
  width: 228px;
  position: absolute;
  margin: 0;
  padding: 0;
}

.logo_place_header {
  top: 0;
  left: 0;
  margin:  30px 60px 0px;
}

.header__title {
  position: relative;
  z-index: 2;
  width: 730px;
  line-height: 96px;
  font-size: 102px;
  font-weight: 600;
  margin: 0;
  padding: 0;
}

.header__title_position {
  margin: 0px 64px 0px;
}

.header__subtitle {
  width: 388px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
  flex-wrap: nowrap;
  text-align: left;
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
}

.header__subtitle_position {
  bottom: 0;
  left: 0;
  margin: 0px 64px 30px;
}

.header__link {
  color: #2f80ed;
  text-decoration: 0;
  margin: 0;
  padding: 0;
}

.header__main-illustration {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  margin: 0;
  padding: 0;
}
.header__main-illustration_place {
  z-index: 1;
  right: 0;
  bottom: 0;
  margin-bottom: 0;
}

.header__square-pic { 
  height: 568px;
  width: 568px;
  background-color: #2f80ed;
  position: absolute;
  margin: 0;
  padding: 0;
}

.header__square-pic_place {
  top: 0;
  right: 0;
  margin: 64px 0px 0px;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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