x
 
Анна Ванлее
18 февраля 2021
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

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

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


Анна!

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

Сайдноутами (англ. 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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Комментарии

Алексей Самохин
24 февраля 2021

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

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

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

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

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сколько времени тратите на планирование реализации «фичи» и сколько времени на написание самого кода? Как сбросить дефолтные стили браузера 1 Почему не стоит использовать атрибут id для стилизации элементов 2 А может быть маг полководцем или полководец магом?




Недавно всплыло

9 1 Насколько правильным будет делать цвет ошибок почти таким же, как цвет кнопок? 2 Аврал сразу в двух проектах 1