Версия страницы html для печати. CSS-стили для печати, о которых я забыл

Abbr:after { content: " (" attr(title) ")"; }

10. Принудительная печать фона

Header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

11. Медиа-запросы

@media screen and (min-width: 48em) { /* только для экрана */ }
Почему это так? Всё дело в том, что CSS-правила применяются только в том случае, если значение min-width равно 48em , и если media-type – это screen . Если избавиться в этом медиа-запросе от ключевого слова screen , то он окажется ограниченным лишь значением min-width .

@media (min-width: 48em) { /* все типы средств отображения информации */ }

12. Распечатка карт

Map { width: 400px; height: 300px; background-image: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true"); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

13. QR-коды

14. О печати неоптимизированных страниц

Теги:

• CSS
• печать
• веб-разработка

Это устранение ошибок под названием «дубли контента». Дублирующийся контент означает, что подобный контент отображается в нескольких местах (URL-адресах) в интернете. В результате поисковые системы не знают, какой URL показывать в результатах поиска. Это может навредить ранжированию веб-страницы сайта. Проблема становится серьезней, когда люди начинают ссылаться на разные версии контента. В этой статье мы расскажем о причинах дублирования контента и найдем решения для каждой из них.

Представьте себе, что вы находитесь на перекрестке, а дорожные знаки указывают по двум разным направлениям на один и тот же конечный пункт назначения: какую дорогу вы должны выбрать? И если пойти по «худшему» направлению, конец пути также может слегка измениться. Как читателю, вам всё равно: вы получили контент, к которому стремились. Но поисковая система должна выбрать, какой из них показывать в результатах поиска, так как она не должна показывать один и тот же контент дважды.

Допустим, ваша статья о «ключевом слове x» появляется на http://www.example.com/keyword-x/ и точно такой же контент появляется на http://www.example.com/article-category/keyword-x/. Это происходит во многих современных системах управления контентом (СМS). Ваша статья была поднята несколькими блоггерами, одни из которых сослались на первый URL, другие сослались на второй URL. Этот дублирующийся контент - проблема для вашего интернет-ресурса, так как ссылки одновременно рекламируют разные URL-адреса. Если бы все они ссылались на один и тот же URL-адрес, ваш рейтинг в топ-10 для «ключевого слова x» был бы намного выше.

1. Причины дублирующегося контента

Есть уйма причин, которые вызывают дублирование контента. Большинство из них являются техническими: не так уж часто человек решает разместить один и тот же контент в двух разных местах, не выделяя исходный источник. Тем не менее, технические причины многочисленны. Это происходит в основном потому, что разработчики не думают как браузер или пользователь, не говоря уже о паутине поисковых систем, они думают как разработчик. А как же вышеупомянутая статья, которая появляется на http://www.example.com/keyword-x/ и http://www.example.com/article-category/keyword-x/? Если вы спросите разработчика, он скажет, что она одна.

Давайте посмотрим, как выявить наличие дублирующегося контента на вашем веб-сайте, а также объясним его причину и сделаем всё возможное для его устранения.

1.1.Непонимание смысла URL-адресов

Разработчик просто разговаривает на другом языке. Вы видите, что весь сайт, вероятно, снабжен системой баз данных. В этой базе данных есть только одна статья, программное обеспечение веб-сайта просто позволяет найти одну и ту же статью в базе данных через несколько URL-адресов. Это объясняется тем, что в глазах разработчика уникальный идентификатор для этой статьи - это идентификатор статьи, который есть в базе данных, а не URL. Однако для поисковой системы URL-адрес является уникальным идентификатором части контента. Если вы объясните это разработчику, он увидит проблему. И после прочтения этой статьи вы сможете сразу же предоставить ему её решение.

1.2. Идентификаторы сеансов посетителей

Когда вы отслеживаете посетителей и предоставляете возможность сохранять товары, которые они хотят купить, в корзине покупок, вы даете им сессию. Сессия - это, в основном, краткая история того, что посетитель сделал на вашем сайте, и может содержать такие вещи, как элементы в корзине покупок. Чтобы сохранить сессию посетителя, переходящего с одной страницы на другую, нужно где-то хранить уникальный идентификатор этой сессии, так называемый идентификатор сеанса. Наиболее распространенное решение - сделать это с помощью cookie. Однако поисковые системы обычно не хранят файлы cookie.

Некоторые системы возвращаются к использованию идентификаторов сеанса в URL-адресе. Это означает, что каждая внутренняя ссылка на веб-сайте получает этот идентификатор сеанса, добавленный к URL-адресу, и поскольку этот идентификатор сеанса уникален для этого сеанса, он создает новый URL-адрес и, таким образом, дублирует контент.

1.3. Параметры URL, используемые для отслеживания и сортировки

Другой причиной дублирования контента является использование параметров URL-адресов, которые не изменяют контент страницы, например, в ссылках отслеживания. Вы видите, http://www.example.com/keyword-x/ и http://www.example.com/keyword-x/?source=rss - это на самом деле не один и тот же URL для поисковой системы. Последний может позволить вам отслеживать, из каких источников зашли посетители, но это может также затруднить вам ранжирование. Очень нежелательный побочный эффект!

Разумеется, это не просто отслеживание параметров, это касается каждого параметра, который вы можете добавить к URL-адресу, который не меняет жизненно важную часть контента. Этот параметр предназначен для «изменения сортировки по набору продуктов» или «показа другой боковой панели»: все они вызывают дублирование содержимого.

1.4. Парсинг и синдикация контента

Большинство причин дублирования контента принадлежат вам самим или, по крайней мере, по вине вашего веб-сайта, когда другие сайты используют ваш контент с вашего согласия или без него. Они не всегда ссылаются на вашу оригинальную статью, и поэтому поисковая система не «получает» ее и приходится иметь дело с еще одной версией той же статьи. Чем популярнее становится ваш сайт, тем больше и чаще вы будете его парсить, расширяя эту проблему все больше и больше.

1.5. Порядок параметров

Другая распространенная причина заключается в том, что CMS не использует красивые и чистые URL-адреса, а скорее URL-адреса, такие как / id = 1 & cat = 2, где ID ссылается на статью, а cat относится к категории. URL /? Cat = 2 & id = 1 будет давать те же результаты в большинстве систем сайта, но они фактически совершенно разные для поисковой системы.

1.6. Пагинация комментариев

В моем любимом WordPress, а также и в некоторых других системах, есть возможность осуществлять пагинацию комментариев. Это приводит к дублированию содержимого по URL-адресу статьи и URL-адресу статьи + / comment-page-1 /, / comment-page-2 / и т. д.

1.7. Версия для печати

Если ваша система управления контентом создает страницы, удобные для печати, и вы связываете их со страницами своих статей, в большинстве случаев Google их найдет, если вы специально их не заблокируете. Какую версию покажет Google? Ту, которая загружена рекламой и периферийным контентом, или ту, которая содержит только вашу статью?

1.8. с WWW и без WWW

Одна из старых ситуаций: домен с WWW и без WWW, дублирующие контент, в случае, когда доступны обе версии вашего сайта. Ещё одна менее распространенная ситуация, которая существует: http и https дублируют контент, когда один и тот же контент передается на оба адреса.

2. Концептуальное решение: «канонический» URL

Как было определено выше, когда несколько URL-адресов ведут к одному и тому же контенту - это является проблемой, но её можно решить. Человек, работающий в одном издании, как правило, сможет легко сказать вам, какой «правильный» URL-адрес для определенной статьи должен быть. Но самое смешное, что иногда, когда вы спрашиваете трёх человек в одной компании, они дают три разных ответа...

Это проблема, которая требует обязательного решения в таких случаях, потому что конечный адрес может быть только один (URL). Этот «правильный» URL-адрес должен быть определен поисковым сервером как канонический URL-адрес.

Ироническое примечание

Канонический - термин, вытекающий из римско-католических традиций, где список священных книг был создан и принят как подлинный. Их окрестили каноническими Евангелиями Нового Завета. А ирония заключается в следующем: Римской Католической церкви потребовалось около 300 лет и многочисленные бои, чтобы придумать этот канонический список, и в конечном итоге они выбрали 4 версии одной и той же истории...

3. Как найти дубли контента?

Возможно, вы не знаете, есть ли у вас дублирующийся контент на вашем сайте. Вот несколько способов, как это выяснить:

3.1. Инструменты Google для веб-мастеров

Инструмент Google для веб-мастеров - отличный инструмент для идентификации дублированного контента. Если вы заходите в Инструменты для веб-мастеров Google для своего сайта, см. Раздел «Вид в поиске» «Оптимизация HTML», и вы увидите следующее:

Проблема в том, что если у вас есть статья, похожая на статью о «ключевом слове X», и она отображается в двух категориях, названия могут быть разными. Они могут быть, например, «Ключевое слово X - Категория X - Пример сайта» и «Ключевое слово X - Категория Y - Пример сайта». Google не будет выбирать эти названия в качестве дубликатов, но вы можете найти их с помощью поиска.

3.2. Поиск заголовков или фрагментов

Существует несколько операторов поиска , которые очень полезны для подобных случаев. Если вы хотите найти все URL-адреса на вашем сайте, которые содержат вашу статью с ключевым словом X, введите в Google следующую поисковую фразу:

Site:example.com intitle:"Ключевое слово X"

Затем Google покажет вам все страницы example.com, содержащие это ключевое слово. Чем конкретнее вы отразите эту часть intitle, тем легче будет отсеять дублированный контент. Вы можете использовать один и тот же метод для идентификации дублированного контента в интернете. Допустим, что полное название вашей статьи было «Ключевое слово X - почему оно классное», вы искали: Intitle: «Ключевое слово X - почему это классно»

Google предоставит вам все сайты, соответствующие этому названию. Иногда стоит поискать одно или два полных предложения из вашей статьи, так как некоторые парсеры могут изменить заголовок.

4. Практические решения по дублированию контента

Когда вы решите, какой URL-адрес является каноническим URL-адресом для вашего контента, вам нужно начать процесс канонизации. Это в основном означает, что мы должны сообщить поисковой системе о канонической версии страницы и позволить ей найти ее как можно скорее.

Существует четыре метода решения, в порядке предпочтения:

1. Не создавайте дублирующийся контент;
2. Перенаправляйте дубли контента на канонический URL-адрес;
3. Добавляйте канонический элемента ссылки на дубликат страницы;
4. Добавляйте ссылки HTML с дублированной страницы на каноническую страницу.

4.1. Как избежать дублирования контента?

Некоторые из приведенных выше ошибок при дублировании контента имеют очень простые исправления:

• Используете идентификаторы сеанса в ваших URL-адресах? Их часто можно просто отключить в настройках вашей системы.
• У вас есть дубликаты страниц для печати? Это совершенно не нужно: вам нужно просто использовать таблицу стилей печати.
• Использование пагинации комментариев в WordPress? Эту функцию нужно просто отключить (в настройках «обсуждение») на 99% сайтов.
• Параметры URL в разном порядке? Скажите своему программисту, чтобы он создал скрипт, который позволит использовать параметры в одном порядке.
• Проблемы с отслеживанием ссылок? В большинстве случаев вы можете использовать отслеживание кампаний на основе хеша вместо отслеживания кампаний на основе параметров.
• Две версии сайта с WWW и без WWW? Выберите один вариант и придерживайтесь его, перенаправляя один на другой. Вы также можете отдать предпочтение инструментам Google для веб-мастеров, но вам придется заявлять права на обе версии имени домена.

Если вашу проблему не так легко устранить, возможно, стоит приложить все усилия, чтоб не допускать появления дублирующегося контента. Это, безусловно, лучшее решение проблемы.

4.2. 301 редирект дублированного контента

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

4.3. Использование rel = "канонических" линков

Иногда нет возможности избавиться от дублируемой версии статьи, но вы знаете, что это неправильный URL-адрес. Для этой конкретной проблемы поисковые системы ввели элемент канонической ссылки. Он размещен в разделе вашего сайта и выглядит следующим образом:

href="http://example.com/wordpress/seo-

В разделе канонической ссылки вы размещаете правильный канонический URL для своей статьи. Когда Google (или любая другая поисковая система, поддерживающая его) находит этот элемент ссылки, он выполняет автоматическую мягкую переадресацию: передаётся большая часть значения ссылки, собранной этой страницей, на вашу каноническую страницу.

Этот процесс немного медленнее, чем 301 редирект, упомянутый Джоном Мюллером от Google, который вы можете сделать, что было бы намного предпочтительнее.

4.4. Возврат к исходному контенту

Если вы не можете выполнить любое из вышеперечисленных действий, возможно, потому, что вы не контролируете раздел сайта, на котором отображается ваш контент, добавление ссылки на исходную статью сверху или снизу статьи всегда является хорошей идеей. Это может быть то, что вы хотите сделать в своем RSS-канале: добавьте ссылку на статью в ней. Если Google встретит несколько ссылок, указывающих на вашу статью, он вскоре выяснит, что это фактическая каноническая версия статьи.

5. Вывод: дублирующийся контент можно исправить, и его необходимо исправить!

Дублирующийся контент встречается повсюду. Это процесс, который вам необходимо постоянно отслеживать. Если вовремя всё исправлять, тогда и вознаграждение будет многочисленное. Ваш качественный контент может взлететь в рейтинге, просто избавляясь от дублирующегося контента на вашем сайте. Конечно, если вам нужна помощь в выявлении этих проблем, помощь вашим разработчикам в поиске решений для устранения проблем с дублирующимся контентом или даже решить эти проблемы для вас, вы всегда можете заказать

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

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

Решение - таблицы стилей для печати

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

Но теперь нам нечего бояться, теперь для создания печатной версии
документа нам нужен всего лишь хорошо структурированный документ и
таблица стилей для печати!

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

Обходим ошибку с плавающими элементами

Браузеры семейства Gecko, такие как Netscape 6.x или Mozilla, имеют
проблему с печатью длинных «плавающих» блоков (long floated elements).
Если плавающий элемент вышел за пределы печатной страницы, то
оставшаяся часть полностью пропадает, так и не появившись на следующей
странице.

Если ваш сайт похож на «A List Apart», т.е. статьи в нём заключаются
в один большой плавающий блок, то это значит, что читатели при
распечатке получат лишь первую страницу статьи.

Решение, как и следовало ожидать, заключается в отмене свойства
«плавающий» у блока с текстом перед печатью. Если вкратце, для всех
плавающих элементов устанавливается стилевое правило «float: none».
Сделав это, вы вернёте все плавающие элементы к обычному виду, и
документ будет напечатан так, как и предполагалось — страница за
страницей вплоть до самого конца.

Итак, именно это я и предложил сделать Зельдману для ALA, и, как
только он это сделал, проблема с печатью исчезла. У броузеров семейства
Gecko эта ошибка по-прежнему не исправлена (на момент написания
статьи), но всё же её можно легко обойти предложенным выше способом.

В путь

Ниже представлена «печатная» таблица стилей, с помощью которой «A List Apart» решил проблему печати плавающих элементов:

#menu { display: none; } #wrapper, #content { width: auto; border: 0; margin: 0 5%; padding: 0; float: none !important; }

Хорошее начало. Таблица стилей полностью убирает правое меню так,
что оно не выводится на печать, и задаёт границы и отступы для
содержимого статьи таким образом, чтобы текст на любой странице
располагался равномерно от одного края области печати к другому.

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

Если посмотреть на содержимое тега новых статей на сайте ALA, мы обнаружим (в гуще начинки) следующие строки:

У нас есть файл таблицы стилей, print.css, применение которого для
печатных устройств «print» было оговорено значением атрибута «media».
Файл таблицы стилей nucss2.css, который импортируется с помощью
конструкции @import дабы скрыть его от Navigator 4.x, будет использован
при отображении страницы на любом устройстве вывода (атрибут
media=»all»). Это может быть дисплей, принтер, проектор, синтезатор
речи и так далее. Разойдясь, мы могли бы записать в таблицу стилей для
печати директивы для фонового цвета страницы и указать шрифты в
пикселях.

Статья по теме: Базовый набор плагинов для WordPress

Будет ли это великой бедой? Нет, но большинство броузеров по
умолчанию не печатают фон страницы, а указанные в пикселях размеры
шрифтов, столь подходящие для экранного отображения, не так уж и
полезны при печати.

Поэтому давайте немного улучшим нашу таблицу стилей для печати и решим несколько других проблем с расположением ее компонентов.

Отбеливание фонов

Для элементов бокового правого меню используются множество цветов.
Но так как мы спрятали меню при печати, нам ничего не придется менять.
Это сразу избавляет нас от возможной головной боли.

Так как принтеры не печатают белым цветом, сделаем фон страницы
белым. Также нужно удалить все фоновые изображения, которые
использовались при выводе страницы на экран.

Если мы призовем на помощь свойство background, мы одним махом решим
обе проблемы. Чтобы сделать решение более гибким, зададим для элемента
«body» белый фон, а элементы «wrapper» и «content» пусть имеют
прозрачный фон (и тем самым через них будет проступать белый цвет
«body»):

body { background: white; } #menu { display: none; } #wrapper, #content { width: auto; margin: 0 5%; padding: 0; border: 0; float: none !important; color: black; background: transparent; }

Задание цвета переднего плана (цвет шрифта) не было абсолютно
необходимым, но лучше не забывать об этом. Итак, сейчас у нас есть два
«неплавающих» элемента (#wrapper, #content) с прозрачным фоном, и
страница — с белым фоном.

Вас может взволновать то, как Navigator 4.x обходится со значением
«transparent», но выше нос: NN4.x обращает внимание лишь на таблицы
стилей, у которых атрибут «media» имеет значение «screen». Так же как и
в случае с директивой @import, наши таблицы стилей для печати всегда
сокрыты от подслеповатых глаз Navigator 4. Так что, здесь не о чём
беспокоиться.

Размер шрифта для печати

Общая таблица стилей задаёт размер шрифта равный 11 пикселям. Весьма
неудачный выбор при печати. Само семейство шрифтов — сначала Georgia ,
а потом serif — отлично подходит для печати, так как шрифты с засечками
обычно лучше выглядят на бумаге. Необходимо изменить лишь размер
шрифта. Вот так:

body { background: white; font-size: 12pt; }

«Постойте!», — вероятно, воскликнете вы. — «Пункты — это зло!»

Что ж, да, так он и сказал, и был полностью прав — для экрана нельзя
задавать размеры шрифта в пунктах. При печати же применение пунктов
имеет такой же смысл, как и многие десятилетия назад. Раз уж мы готовим
таблицу стилей для печати, то определить размера шрифта для «body» в 12
пунктов будет правильным и естественным.

Вы, конечно, можете задать любой размер, какой пожелаете, однако
шрифт в 12 пунктов наиболее употребителен. И так как в общей таблице
стилей размеры всех остальных элементов страницы даны относительно
размера в элементе «body», наша работа закончена.

Marginalia

Существующие стилевые правила задают для левых и правых границ
(margins) элементов wrap и content размер в 5%. Это значит, что с обеих
сторон статьи будет «пустое место», и каждое такое «пустое место» будет
составлять 10% ширины области печати. Это следствие того, что блок с
текстом статьи «content» лежит внутри обрамляющего блока «wrapper», и
каждый их них имеет поля по 5% с левой и правой сторон.

Статья по теме: Яндекс.Школа вебмастеров

Исходная общая таблица стилей задаёт 15%-ный правый отступ (padding)
для блока «content». Границы уже дали нам 10%, так что нам надо
добавить ещё 5%. Это достаточно просто сделать:

div#content { margin-left: 10%; }

В другом варианте решения можно бы быть оставить границы (margin) в
покое и добавить 5% к левому отступу (padding). Так как блок «content»
не имеет видимого фона, мы получили бы такой же результат.

К сожалению, некоторые броузеры имеют проблемы с адекватной
обработкой отступов (padding), так что перемещать элементы по странице
лучше с помощью границ (margin).

Ссылки при печати

Был один хитрый вопрос — что же делать с гиперссылками? Очевидно, на
печати они не могут быть столь полезны, как на мониторе, но часто важно
дать ключ к тому, на что же они ссылались в оригинале. Итак, вот что я
изобрёл:

a:link, a:visited { color: #520; background: transparent; font-weight: bold; text-decoration: underline; }

Это задаёт ссылкам цвет, достаточно тёмный, чтобы быть близким к
чёрному при черно-белой печати, оставаясь в тоже время тёмно-красным
при цветной печати. Жирный шрифт и подчеркивание гарантируют, что
ссылка будет выделяться в распечатанном тексте.

В броузере, полностью поддерживающем спецификацию CSS2, мы можем
вывести URL-ы ссылок после них самих, тем самым делая услугу тем, у
кого окажется распечатка и броузер под рукой. Ниже показано правило,
которое применяется только для блока «content», и таким образом URL-ы
других ссылок не выводятся на печать:

#content a:link:after, #content a:visited:after { content: " (" attr(href) ") "; font-size: 90%; }

Попробуйте это в броузерах на платформе Gecko — Mozilla или Netscape
6.x. На распечатке после каждой ссылки вы увидите в скобках относящийся
к ней URL.

В броузерах, не понимающих это стилевое правило, не будет никаких
нежелательных эффектов — ссылки все так же будут темно-красными,
подчёркнутыми и жирными. Просто после текста ссылок не будет выводиться
относящегося к ним URL, вот и всё.

Обратите внимание на то, что пробелы перед и после скобок являются
частью стилевого правила — не забудьте про пробелы, так как они должны
быть включенными в документ.

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

Заглянув в код любой страницы с сайта «A List Apart», мы быстро
заметим там множество так называемых «относительных ссылок» вида
«/issues/144». Они будут вставлены в документ в таком виде, в каком они
есть, а хотелось бы что это были полные URL-ы.

В подобных случаях нам может помочь CSS3. Любой селектор атрибута,
использующий оператор ^=, выбирает элементы, основанные на начале их
значений атрибута. Таким образом, мы можем выбрать любой атрибут href ,
начиняющийся символом слэша, и вставить туда текст, заменяющий
существующее значение атрибута.

#content a:after { content: " (//www.alistapart.com" attr(href) ") "; }

Это правило преобразует все значения типа «/issues/144/», в
«//www.alistapart.com/issues/144/». Это правило не сможет помочь в
случае с относительными URL, которые не начинаются со слэша, но, к
счастью, ALA не использует этот тип ссылок.

ВНИМАНИЕ! ВАЖНО! Как было сказано, селектор вида ^=
относится к селекторам спецификации CSS3. Валидатор для CSS от
консорциума W3 может тестировать лишь на соответствие спецификациям
CSS1 и CSS2. Не понимая селектор, относящийся к CSS3, валидатор будет
сообщать об ошибке даже в том случае, когда селектор не противоречит
рекомендациям спецификации.

Украшаем начало страницы

Просматривая еще раз окончательный вариант стилевой таблицы, я
обнаружил, что мне не очень нравится «шапка» страницы. Дело скорей было
не в самой шапке, а в самом «подчеркивании» названия сайта. Это
подчеркивание разумеется заканчивалось там, где заканчивалась картинка
заголовка. Мне вдруг пришло в голову, что было бы неплохо растянуть эту
линию подчеркивания на всю ширину страницы.