Как осуществить печать элементов на полях (css)?
Здравствуйте
У меня сверстан сайт, который должен печататься на A4
Свойства для печати задавал через
@media print
, поля для страницы через
@page { margin: 9mm 0 0 9mm }
Проблема в том, что мне необходимо, чтобы элементы декора печатались на полях, т.е. на краях страницы, но они обрезаются.
Что только не пробовал. Если убрать поля в настройках страницы, то они печатаются с краю, но без полей выглядит плохо. Поля нужно оставить, но как вывести элементы на поля? position: absolute; не помогло.
Дополнительно:
@media print
Если убрать поля в настройках страницы, то они печатаются с краю, но без полей выглядит плохо.
Думаю логично вместо полей описать другие css-правила для принта. Маржины, ширина контейнера. Не работал с принтом особо, но насколько понимаю при задавании полей ты с пространством в этих полях работать не сможешь. Это противоречит самой идее поля.
Убрал поля у
@page
Страница сделана из нескольких блоков. Для каждого из этих блоков сделал margin-left, margin-right в
@media print
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для осуществления печати элементов на полях в CSS, можно использовать свойство `@media print`. Это позволяет определить стили, которые будут применяться только при печати страницы.
Например, если вы хотите скрыть некоторые элементы при печати, вы можете использовать следующий код в вашем CSS:
@media print { .element-to-hide { display: none; } }
Этот код скроет элемент с классом `element-to-hide` при печати страницы. Вы также можете настроить другие стили, такие как размер шрифта, отступы и другие параметры для печати.
Если вы хотите, чтобы определенные элементы были видны только при печати, вы можете использовать следующий код:
@media print { .element-to-show { display: block; } } .element-to-show { display: none; }
Этот код скроет элемент с классом `element-to-show` на экране, но отобразит его при печати страницы.
Таким образом, используя `@media print`, вы можете легко управлять тем, какие элементы будут отображаться или скрываться при печати страницы, что делает ваш дизайн более гибким и удобным для пользователей.