Школа
Веб-разработка

Как сделать вынос ссылок в отдельную колонку?

Пытаюсь разобраться с сайтостроением. Читала статью у вас на сайте про колонки.

Но не увидела, как сделать вынос ссылок в отдельную колонку? Напишите, пожалуйста.

Сейчас таких сайтов не много, но, по‑моему, это ОЧЕНЬ хорошее оформление :‑)

Анна Ванлее
18 фев 2021
👁 6278   🗩4
Веб-разработка

Как сделать вынос ссылок в отдельную колонку?

Пытаюсь разобраться с сайтостроением. Читала статью у вас на сайте про колонки.

Но не увидела, как сделать вынос ссылок в отдельную колонку? Напишите, пожалуйста.

Сейчас таких сайтов не много, но, по‑моему, это ОЧЕНЬ хорошее оформление :‑)

Анна Ванлее
18 фев 2021
👁 6278   🗩4
Василий Половнёв
Технический директор бюро
Полезно
 13
13
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать

Анна!

Советую выносить на поля ссылки и любые другие примечания с помощью абсолютного позиционирования. Если элемент спозиционировать абсолютно, не задавая конкретных координат, он удалится из того места, где он был, «зависнув» прямо над ним. Останется только пододвинуть его на поля. Колонки для этого не нужны.

Сайдноутами (англ. sidenote) мы называем примечания и заметки на полях

Ограничим ширину текста, например, 75%, а оставшееся место отдадим сайдноутам:

Сайдноутами (англ. sidenote) мы называем примечания и заметки на полях

<style>
  * { box-sizing: border-box }
  
  article {
    /* Задаём систему координат
    *  для абсолютного позиционирования
    *  сайдноутов */
    position: relative;
  }
  
  p,
  ul,
  ol {
    width: 75%;
    padding-right: 20px;
  }
  
  .sidenote {
    /* Задаём сайдноутам ширину, равную
    *  ширине поля, и позиционируем их
    *  по правому краю родителя */
    width: 25%;
    position: absolute;
    right: 0;
    /* Уменьшим кегль и подтолкнём сайдноут вниз,
    *  чтобы выровнять по базовой
    *  с основным текстом */
    font-size: .8em;
    margin-top: .0625em;
  }
  
  /* На мобильных экранах ставим всё в одну колонку */
  @media screen and (max-width: 761px) {
    p,
    ul,
    ol,
    .sidenote {
      width: auto;
      position: static;
    }
  }
</style>

<article>
  <p>
    One of the most distinctive features of Tufte’s style
    is his extensive use of sidenotes. Sidenotes are like footnotes,
    except they don’t force the reader to jump their eye
    to the bottom of the page, but instead display off
    to the side in the margin. Perhaps you have noticed their use
    in this document already. You are very astute.
  <p>

  <p class="sidenote">
    See
    <a href="https://edwardtufte.github.io/tufte-css/">
      Tufte CSS by Dave Liepmann
    </a>
  </p>

  <p>
    Sidenotes are a great example of the web not being like print.
    On sufficiently large viewports, Tufte CSS uses the margin for sidenotes,
    margin notes, and small figures. On smaller viewports, elements that would go
    in the margin are hidden until the user toggles them into view. The goal is
    to present related but not necessary information such as asides or citations
    as close as possible to the text that references them. At the same time,
    this secondary information should stay out of the way of the eye,
    not interfering with the progression of ideas in the main text.
  </p>
</article>

Результат:

One of the most distinctive features of Tufte’s style is his extensive use of sidenotes. Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute.Sidenotes are a great example of the web not being like print. On sufficiently large viewports, Tufte CSS uses the margin for sidenotes, margin notes, and small figures. On smaller viewports, elements that would go in the margin are hidden until the user toggles them into view. The goal is to present related but not necessary information such as asides or citations as close as possible to the text that references them. At the same time, this secondary information should stay out of the way of the eye, not interfering with the progression of ideas in the main text.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 13
13
Непонятно
 1
1
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Алексей Самохин

Минус предложенного решения в том, что position: absolute вынимает текст из потока. Если верстальщик вынимает текст из потока, он должен понимать, что дальше положением текста и расчётом положения других элементов относительно него должен управлять он сам, и браузер ему никак не поможет.

В практическом смысле это означает, что есть вероятность, что два блока .sidenote могут пересечься, так как они выносятся просто куда‑то вбок и ничего не знают друг о друге.

Альтернативно можно рассмотреть решение с float: right (для выноса элемента вбок) и clear: right (чтобы .sidenote вставали друг под другом, а не в ряд).

И важно не забыть, что при использовании float у контейнера должна быть нейтрализация float в конце (например :after‑элемент с clear).

Строго говоря, float тоже вынимает элементы из потока, но с особенностями: элементы с float знают друг о друге.

См. пример с корректно работающими 2 sidenote подряд: https://jsfiddle.net/Lojd4rn2/1/

Леонид Загорянский

Два предложенных способа сайдноута работают, но возникает проблема наследования ширины для p, ul, ol на всей странице. И если у вас есть меню, прописанное в ul , его ширина будет равна width: 75%, что неизбежно ведёт к разрушению вёрстки.

Богдан Руденко

В html сайдноут ставим перед текстом, к которому он относится. На десктопе всё ок: сайдноут с дополнительной информацией виден справа от основного текста. Но на мобильных сайдноут оказывается перед текстом. И это плохо — второстепенная инфа предшествует главной. И если на десктопе можно проигнорировать «заметки на полях», то на мобильном не получится — всё в одной колонке.

Мне ничего не приходит в голову, кроме как дублировать сайдноут: один размещаем перед основным текстом (на десктопе сайдноут окажется справа), другой — после (на мобильном он появится ниже текста, что выглядит логичным). И потом в стилях мы один из них то показываем, то скрываем в зависимости от разрешения экрана.

Но это кажется топорным. Да и с т. з. seo, наверно, неправильно дублировать контент.

Василий Половнёв, Алексей Самохин и другие советчики, может есть более изящное решение?

Богдан, если на мобильном блоки идут сверху вниз, а на десктопе слева направо, то их порядок в вёрстке неизменно совпадает с их порядком на экране. Поэтому дублировать блоки не надо. А чтобы разместить их бок о бок на широком экране, подойдёт любой способ: флексбоксы, флоаты, абсолютное позиционирование, даже инлайн‑блоки... Лишь бы решение соответствовало другим аспектам задачи и вас устраивали его сильные и слабые стороны.

Вот пример решения с флоатами. Они умеют сами отодвигаться, когда сайдноут предыдущего абзаца заходит на их территорию.
https://jsfiddle.net/glebkema/dprnwvus/

<style>
  * { box-sizing: border-box; }

  /* На всех экранах уменьшим 
  *  сайдноутам кегль */
  .sidenote {
    font-size: .8em;
  }

  /* На достаточно просторном экране 
  *  ужмём основной текст и перенесём
  *  сайдноуты вправо */
  @media screen and (min-width: 761px) {
    p,
    ul,
    ol {
      width: 75%;
      padding-right: 20px;

      /* Основной текст плывёт к левому краю */
      float: left;
    }

    .sidenote {
      /* Задаём сайдноутам ширину, равную 
      *  ширине поля */
      width: 25%;

      /* Направляем сайдноуты к правому краю,
      * чтобы слишком длинный сайдноут 
      * не отодвигал последующий абзац
      * и интервалы между абзацами 
      * не нарушались */
      float: right;

     /* Подтолкнём сайдноут вниз, 
      * чтобы выровнять по базовой 
      * с основным текстом.
      * Используем padding, чтобы 
      * не высчитывать margin сайдноута
      * на основе margin основного текста */
      padding-top: .0625em;
    }
  }
</style>

<article>
  <p>
    One of the most distinctive features of Tufte’s style
    is his extensive use of sidenotes. Sidenotes are like footnotes,
    except they don’t force the reader to jump their eye
    to the bottom of the page, but instead display off
    to the side in the margin. Perhaps you have noticed their use
    in this document already. You are very astute.
  </p>
  
  <p>
    Sidenotes are a great example of the web not being like print.
  </p>
  
  <p class="sidenote">
    Huge note for the second paragraph with a long, important definition
    or something else useful.
  </p>
  
  <p>
    On sufficiently large viewports, Tufte CSS uses the margin for sidenotes,
    margin notes, and small figures. On smaller viewports, elements that would go
    in the margin are hidden until the user toggles them into view. The goal is
    to present related but not necessary information such as asides or citations
    as close as possible to the text that references them. At the same time,
    this secondary information should stay out of the way of the eye,
    not interfering with the progression of ideas in the main text.
  </p>
  
  <p class="sidenote">
    See
    <a href="https://edwardtufte.github.io/tufte-css/">
      Tufte CSS by Dave Liepmann
    </a>
  </p>
  
  <p class="sidenote">
    One more short sidenote for the same paragraph.
  </p>

</article>
Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы