Текст наслаивается друг на друга при переносе - HTML, CSS - Ответ 16674223

@losttime · Регистрация: 24.04.2020

Author24 — интернет-сервис помощи студентам

Доброго времени суток. Пытаюсь сделать версту по макету. С левой частью все нормально, а справа при отступе текст наслаивается друг на друга, хотя и там и там +- одинаково. Можете пожалуйста помочь с переносами или посоветовать как сделать лучше. ссылка на код пен: https://codepen.io/NIKITA51438813/pen/gOjMvxw

HTML5

<header>
  <div class="banner">
    <div class="banner-container">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/noemi-logo.svg" alt="Логотип" class="banner_logo">
    </div>
    <span class="banner-title">Блог о творчестве, спорте, и образе жизни</span>
    <ul class="menu-list">
      <li class="menu-list-item"><a href="#0" class="menu-item">Главная</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Статьи</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Теги</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Темы</a></li>
      <li class="menu-list-item"><a href="#0" class="menu-item">Контакты</a></li>
    </ul>
  </div>
</header>
<main class="content">
    <article class="laters-posts-content">
    <div class="laters-posts">
   <div class="last-posts-title">
     Новые посты
    <div class="outline"></div>
   </div>
      <div class="new-posts">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/2.jpg" alt="рассвет у моря" class="picture-post">
    <div class="later-post">
      <time class="post-date" datetime="2019-06-14">14 июня 2019</time><br>
      <a href="#0" class="later-post-item">10 мест, ради которых
стоит проснуться      
   </a>
    </div>  
      </div>
      
    </div>
  </article>
  <article class="laters-posts-content">
    <div class="laters-posts">
   <div class="last-posts-title">
     Новые посты
    <div class="outline"></div>
   </div>
      <div class="new-posts">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/2.jpg" alt="рассвет у моря" class="picture-post">
    <div class="later-post">
      <time class="post-date" datetime="2019-06-14">14 июня 2019</time><br>
      <a href="#0" class="later-post-item">10 мест, ради которых
стоит проснуться      
   </a>
    </div>  
      </div>
      
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Travel</a>
        <a href="#0" class="category-post-item">Health</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">10 мест, ради которых стоит
          проснуться на рассвете</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Итак, вы в Питере. Раннее утро. Лед с рек и каналов уже ушел, запущены фонтаны города… Музеи еще закрыты. Что посмотреть?</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post1.jpg" alt="рассвет у моря" class="picture-post">
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Health</a>
        <a href="#0" class="category-post-item">lifestyle</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">ЙОга для начинающих в
          домашних условиях</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Расскажем, какие упражнения выбрать и как сделать коврик для занятий йогой из того, что можно найти в шкафу.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post2.jpg" alt="йога у моря" class="picture-post">
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Music</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Лучшие музыкальные
фестивали этого лета</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Лето на носу, а с ним и музыкальные фестивали. На каком же из них вы разобьёте свою палатку?</p>
        <p>Мы составили список лучших летних фестивалей по всему миру.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post3.jpg" alt="музыкальный фестиваль" class="picture-post">
    </div>
  </article>
      <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">lifestyle</a>
        <a href="#0" class="category-post-item">food</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Наукоёмкий подход к
кулинарии</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post4.jpg" alt="обед" class="picture-post">
    </div>
  </article>
      <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">Lifestyle</a>
        <a href="#0" class="category-post-item">INTERIOR</a>
        <a href="#0" class="category-post-item">art</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">делаем модные принты на
подушках для интерьера </a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Подушки для дивана целесообразнее заказать в съемных чехлах на молнии, если потребуется чистка подушек, проще снять чехлы, чем везти подушку в химчистку.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post5.jpg" alt="подушка с принтом" class="picture-post">
    </div>
  </article>
  <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">travel</a>
        <a href="#0" class="category-post-item">lifestyle</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Как первый раз отправиться
в горы?</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Для начала нужно определиться, в каком формате пройдёт ваше путешествие. Это зависит от многих факторов, не только от ваших желаний и интересов.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post6.jpg" alt="гора" class="picture-post">
    </div>
  </article>
 <article class="post-list">
    <div class="frame-post">
      <div class="category-post">
        <a href="#0" class="category-post-item">lifestyle</a>
        <a href="#0" class="category-post-item">food</a>
      </div>
 
      <div class="title-post">
        <a href="#0" class="title-post-item">Наукоёмкий подход к
кулинарии</a>
      </div>
      <div class="date-author-post">
        <time class="post-date" datetime="2019-06-10">10 июня 2019</time>
        Неизвестный автор
      </div>
      <div class="text-post">
        <p>Узнаем основы проектирования новых пищевых и около-пищевых опытов, вскроем физику, химию и микробиологию еды.</p>
      </div>
    </div>
    <div class="picture">
      <img src="https://netology-code.github.io/html-2-diploma/sources/images/last-post4.jpg" alt="обед" class="picture-post">
    </div>
  </article>
 
  
</main>

CSS

@font-face {
  font-family: "OpenSans";
  src: url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Regular.woff")
      format("woff2"),
    url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Regular.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: "OpenSans";
  src: url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Bold.woff")
      format("woff2"),
    url("https://netology-code.github.io/html-2-diploma/sources/fonts/OpenSans-Bold.woff")
      format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
 
body {
  margin: 0;
}
 
.banner {
  position: relative;
  width: 1170px;
  height: 450px;
  background-image: url(https://netology-code.github.io/html-2-diploma/sources/images/banner-bg.jpg);
  background-color: rgba(0, 0, 0, 0.6);
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top right 50%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
 
.banner:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
}
 
.banner_logo {
  position: absolute;
  width: 179px;
  height: 41px;
  left: 3px;
  top: 20px;
  z-index: 3;
}
 
.banner-title {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 193px;
  text-align: center;
  width: 715px;
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 74.97 px;
  font-size: 45px;
  color: #fff;
  z-index: 3;
}
 
.menu-list {
  position: absolute;
  right: -2px;
  top: 0;
  display: flex;
  z-index: 3;
}
 
.menu-list-item {
  font-family: OpenSans, Arial, sans-serif;
  text-transform: uppercase;
  line-height: 36px;
  font-size: 13px;
  list-style-type: none; 
  margin-left: 35px;
}
 
.menu-item {
  color: #fff;
  text-decoration: none;
}
 
.menu-item:hover {
    text-decoration: underline;
   }
 
.content {
  margin: 64px 0;
  width: 1170px;
  height: 2420px;
  margin-left: auto;
  margin-right: auto; 
}
 
.post-list {
  position: relative;
  width: 748px;
  margin-bottom: 59px;
}
 
.frame-post {
  position: absolute;
  margin-left: 30px;
  top: -11px;
  left: 381px;
  width: 367px;
  height: 294px;
}
 
.category-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 39.98px;
  font-size: 14px;
  word-spacing: 19px;
}
 
.category-post-item {
  text-decoration: none;
  color: #b59f5b;
}
 
.category-post-item:hover {
  text-decoration: underline;
}
 
.title-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 23.99px;
  font-size: 20px;
  margin-bottom: 10px;
  
}
 
.title-post-item {
  color: #000;
  text-decoration: none;
}
 
.title-post-item:hover {
  color: #b59f5b;
}
 
.date-author-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  line-height: 39.98px;
  font-size: 12px;
  margin-bottom: 35px;
}
 
.post-date {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: normal;
  color: #888888;
  line-height: 39.98px;
  font-size: 12px;
  margin-right: 11px;
  text-transform: none;
}
 
.text-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: normal;
  line-height: 22px;
  font-size: 15px;
  color: #000;
}
 
.picture{
  width: 381px;
  height: 294px;
}
 
.picture-post {
  position: absolute;
}
 
.laters-posts-content {
  position: relative;
  margin-bottom: 22px;
}
 
.laters-posts {
  position: absolute;
  margin-left: 150px;
  top: -10px;
  left: 748px;
  width: 272px;
  height: 602px;
}
 
.last-posts-title {
  text-align: center;
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  line-height: 29.15px;
  text-transform: uppercase;
  font-size: 14px;
  color: #000;
}
 
.outline {
  width: 66px;
  height: 3px;
  background-color: rgba(181, 159, 92, 0.4);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 29px;
}
 
.new-posts{
  position: absolute;
}
 
.later-post {
  font-family: OpenSans, Arial, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 17.99px;
  font-size: 14px;
  margin-left: 90px;
  margin-top: -15px;
}
 
.later-post-item {
  color: #000;
  text-decoration: none; 
}
 
.later-post-item:hover {
  color: #b59f5b;
}

Вернуться к обсуждению:
Текст наслаивается друг на друга при переносе HTML, CSS

Следующий ответ

Другие темы раздела
HTML, CSS Как центрировать текст по вертикали средствами bootstrap? https://www.cyberforum.ru/ html/ thread3066731.html Добрый день! Не могу центрировать текст по вертикали с помощью bootstrap. Вписал align-middle <div class="row mt-5 h-25"> <div class="col-12 border border-primary align-middle"> Тут просто текст </div> </div> так тоже не работает	HTML, CSS Развернутый текст всем привет! всех с наступившим. нужно сделать такое. подскажите в каком напровлении мне информацию поискать.
HTML, CSS У table не соответствует ширина, откуда-то взялись отступы https://www.cyberforum.ru/attachment.php?attachmentid=1392873&stc=1&d=1672562637 Главная таблица: <table border="0" cellspacing="0" cellpadding="0" width="100%" style="max-width: 600px;min-width:300px; padding: 0; margin: 0;"> Дочерняя(header): <table bgcolor="#252527" style="border-bottom-width:3px;border-bottom-style:solid;border-bottom-color:#D9D9D9; padding: 0; margin: 0;" width="100%"... https://www.cyberforum.ru/ html/ thread3066670.html	HTML, CSS Как в bootstrape задать большие значения padding и margin? https://www.cyberforum.ru/ html/ thread3066625.html Добрый день! В bootstrap максимальный margin задаётся как - ,например, - mt-5 или ml-5. Можно ли средствами бутстрапа добиться больших значений margin и padding или нужно прибегать к обычному css?
Angular и стили HTML, CSS Помогите подправить стили Они должны быть как на картинках. У меня кнопки и отступы между ними не совпадают https://github.com/SashaMaksyutenko/skinet	HTML, CSS Создание Веб-сайта https://www.cyberforum.ru/ html/ thread3066095.html Главная страница index.html. На нем должны быть размещены логотипы двух ваших любимых игр. При щелчке на логотип игры должен происходить переход на страницу с описанием этой игры. Образец главной страницы показан в файле index.png (см. вложение). • Страница game1.html. На ней необходимо разместить следующую информацию: название игры, логотип, миссия, герои, несколько скриншотов по игровому...
HTML, CSS Подсветка пункта меню в тильде, в зеро блоке, на одностраничнике, чтобы показывало, где находится пользователь Разрабатывается сайт одностраничник, для записи на курсы, на конструкторе Tilda, в нем есть шапка, созданная с помощью зеро блока и мне бы хотелось, чтобы при нажатии пользователем, например, на меню "Курсы", данный пункт меню стал так сказать "активным" и подсвечивался, показывая, что пользователь якобы находится там. И так с каждым пунктом меню. https://www.cyberforum.ru/ html/ thread3066094.html	HTML, CSS Одна задачка по html <!DOCTYPE html> <html> <title>1 испытание: Фигурное Катание. Спортивные пары</title> <meta charset="utf-8"> <style> p { display: inline; } img {
HTML, CSS Запретить перенос данных отдельно от заголовка таблицы html, pdf Всем привет) Есть задача сверстать шаблон отчета в формате html c последующей конвертацией в pdf. В отчете будут таблицы, которые должны переноситься на следующие страницы по такой логике: 1) разрыв внутри thead запрещен, если шапка не помещается на странице, таблицы должна полностью переноситься на следующую страницу 2) шапка таблицы всегда остаётся на странице с как минимум одной строкой... https://www.cyberforum.ru/ html/ thread3066038.html	HTML, CSS Надчёркивание текста https://www.cyberforum.ru/ html/ thread3065893.html Коллеги, добрый день, подскажите, пожалуйста, как используя только HTML, можно сделать надчёркивание текста? Вот так это выглядит Заранее спасибо за ответы и уделённое время!
Выравнивание карточек товаров в списке HTML, CSS Как можно выровнять содержимое карточек товара в списке если имеем такую структуру <div class="cart-in-list"> <div class="cart-in-list_img"></div> <div class="cart-in-list_name"></div> <div class="cart-in-list_prop"></div> <div class="cart-in-list_price"></div> </div> <div class="cart-in-list"> <div class="cart-in-list_img"></div>	HTML, CSS Tab на bootstrap проблема Почему-то не работают вкладки (tabs) даже в стандартном примере: <! <!DOCTYPE html> <html lang="RU"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Admin</title> https://www.cyberforum.ru/ html/ thread3065346.html

	02.01.2023, 18:18