CSS нумерация страниц HTML
Я знаю, что этот вопрос задан. Однако я не могу понять, что я делаю неправильно. Я хочу, чтобы номера страниц печатались в правом верхнем углу страницы при печати html. Это код, который у меня есть, что не так?
hello hello hello hello hello hello hello 2 ответа
Ответ на ваш вопрос специфичен для браузера, с которым вы пытаетесь использовать это правило CSS. @top-right CSS в @top-right выглядит так, как будто он поддерживается IE8, но никаких других браузеров. Отметьте поля поля @Page для получения дополнительной информации об этом.
Вы можете изменять поля, сироты, вдова и разрывы страниц документа. Попытки изменить любые другие свойства CSS будут проигнорированы.
Ещё вопросы
- 1 Нет Access-Control-Allow-Origin с использованием настройки OneSignal
- 0 Предотвращение дублирования инициализации асинхронных служб в Angular.js
- 1 Python Selenium: получить значения из выпадающего списка
- 1 TFS Changeset несколькими пользователями
- 0 Sprit читабельная строка php для разделения переменных
- 1 Разница между paint () и repaint ()
- 0 Изменения условного образа JQuery и Javascript
- 0 Отключить ввод в AutoCompleteBox
- 0 Как перенаправить пользователя на страницу с ошибкой из контроля входа при вводе неверного имени пользователя и / или пароля?
- 0 event.cyTarget придерживаться предыдущего события
- 1 Получите оптимальный размер предварительного просмотра видео для высокоскоростной видеосессии
- 1 Несоответствие числа образцов ошибки из Python
- 0 Захватить jQuery Маскированный ввод Изменение ввода
- 0 Настройте сервер AngularJS и NodeJS
- 0 AngularJS устанавливает заголовки SSL
- 0 Расширить методы в Javascript
- 0 Почему десятичные поля принимают буквы в предложении where?
- 1 Как вы создаете объект массивов в Javascript
- 0 Почему второй модуль не работает в angularjs?
- 0 Лучший подход к созданию приложения киоска с представлениями, которые меняются по таймеру
- 0 Получение данных из Википедии
- 0 Как добавить функцию удаленной загрузки в веб-приложение с Instagram-подобными фильтрами, чтобы разрешить обмен на Facebook?
- 1 Перестановка элементов между A и B для получения равенства сумм
- 1 Отправить строку в веб-сокет Python, используя JavaScript
- 0 .get List из метода контроллера и отображения
- 0 Как представить отношения один-ко-многим в JSON с помощью Php?
- 1 При создании библиотеки Android, какой шаблон можно использовать для поддержки настроенного обратного вызова в Activity
- 0 CSS Divs перекрывают друг друга
- 0 HTML / PHP формы сообщений (случайные) значения в таблицу SQL
- 0 Как использовать угловые не против разделения кода?
- 0 Изменить первичные ключи массива
- 0 PHP: если файл с именем X существует, показать его содержимое
- 0 Альтернатива многократному использованию if-else в базе кода
- 0 как сделать меню полосы прокрутки из нескольких столбцов похожим на таблицу Excel
- 0 Как использовать Spring Restful веб-сервис, используя $ ресурс в Angularjs
- 1 Angular CLI использует SystemJS?
- 0 Многопоточное приложение C ++ с использованием Matlab Engine
- 0 вернуть строку и избежать пустых полей внутри нее
- 1 Преобразование «set var% number% = [value]», где «number» меняет значение в скрипт Python
- 1 Как получить доступ к ссылке, выполнив поиск по ее тексту в Selenium WebDriver?
- 1 Шрифт C3.js tootltip
- 1 Невозможно получить доступ к закрытому потоку при отправке вложения
- 0 Как работать с stl с функтором обтекания указателя функции?
- 1 DLL должна завершить свою работу, хотя ссылочное приложение закрывается
- 1 Это хороший способ использования .NET System.Lazy
- 1 Как мне искать, если значение находится внутри фрейма данных
- 0 PHP отображает имена элементов массива
- 1 Попросите пользователя продолжить просмотр следующих 5 строк данных
- 0 Проблема с кодировкой Facebook API
- 0 MySQL имеет функцию заполнения (), когда я использую month () для заполнения данных?
HTML + CSS Нумерация страниц
Выполняя очередную рабочую ситуацию, сталкиваешься с проблемой, когда разрабатываешь или дорабатываешь CRM. На этот раз задача стояла в проставлении номера страницы.
Вариант нашелся сразу на стаке, но его отказывался понимать хром и все браузеры работающие на его движке. Даже ради такого обновил Яндекс браузер и Google Chrome, они просто проставляли на всех страницах единицы. Т.е. счет не велся. Но этот же пример работал в мозилле и в ишаке.
#content < display: table; >#pageFooter < display: table-footer-group; >#pageFooter:after
Также не работала такая конструкция:
Т.е. варианты выше подразумевают автоматическую подстановку при увелечении числа страниц на печать.
Если хром это не понимает и нужно вывести номера страниц, приходится вручную проставлять эти номера. А точнее вставлять div’ы для номеров, это дело можно сделать автоматически, но в моем случае этого не требовалось документы от силы страниц 10 были.
В итоге я создал стиль для одной страницы и в последующем его применял просто к новой, удобство заключается в том что на экране видишь, то и будет распечатано (отступы, межстрочный, номера страниц).
Раньше когда пользовался лисой на этом как-то не заморачивался. Но так как печать будет не с лисы и скорее всего без всякого обновления за последний год, то остановился на этом варианте. В целом он выглядит так:
Добавил форматы страниц А3, А5
@page < margin:0.5cm; >body < height: 100%; margin: 0px; background: rgb(204,204,204); counter-reset: pagenumber; >.page < margin: 0 auto; padding: 0px; background: white; display: block; position: relative; overflow: hidden; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); page-break-after: always; >.page .content < margin-top: 2cm; margin-left: 2cm; margin-right: 2cm; position: relative; height: 100%; text-indent: 1.25cm; font-size: 14px; line-height: 1.5; font-family:times new roman,times,serif; text-align: justify; overflow: hidden; >.page .content p < margin: 0em; >.page .page-footer < position: absolute; bottom: 0.5cm; left: 50%; right: 50%; >.page .page-footer:after < counter-increment: pagenumber; content: counter(pagenumber); >@media print < body, .page < margin: 0; box-shadow: 0; >> .page[size="A4"] < width: 21cm; height: 29.7cm; >.page[size="A4"][layout="portrait"] < width: 29.7cm; height: 21cm; >.page[size="A3"] < width: 29.7cm; height: 42cm; >.page[size="A3"][layout="portrait"] < width: 42cm; height: 29.7cm; >.page[size="A5"] < width: 14.8cm; height: 21cm; >.page[size="A5"][layout="portrait"]
Как пользоваться: допустим нужны 2 страницы А4 в книжной ориентации:
Содержимое 1 страницыСодержимое 2 страницыНа этом все. А нет, так как делал для CRM: Клиентская база, то пожалуй расскажу как это туда засунуть для тех кто испытывает трудности:Первое, заходим в нужную таблицу далее жмем Шаблоны печати — Добавить шаблон. Вписываете имя шаблона, формат шаблона — html, в заголовок шаблона вставляете следующий код:
@page < margin:0.5cm; >body < height: 100%; margin: 0px; background: rgb(204,204,204); counter-reset: pagenumber; >.page < margin: 0 auto; padding: 0px; background: white; display: block; position: relative; overflow: hidden; margin-bottom: 0.5cm; box-shadow: 0 0 0.5cm rgba(0,0,0,0.5); page-break-after: always; >.page .content < margin-top: 2cm; margin-left: 2cm; margin-right: 2cm; position: relative; height: 100%; text-indent: 1.25cm; font-size: 14px; line-height: 1.5; font-family:times new roman,times,serif; text-align: justify; overflow: hidden; >.page .content p < margin: 0em; >.page .page-footer < position: absolute; bottom: 0.5cm; left: 50%; right: 50%; >.page .page-footer:after < counter-increment: pagenumber; content: counter(pagenumber); >@media print < body, .page < margin: 0; box-shadow: 0; >> .page[size="A4"] < width: 21cm; height: 29.7cm; >.page[size="A4"][layout="portrait"] < width: 29.7cm; height: 21cm; >.page[size="A3"] < width: 29.7cm; height: 42cm; >.page[size="A3"][layout="portrait"] < width: 42cm; height: 29.7cm; >.page[size="A5"] < width: 14.8cm; height: 21cm; >.page[size="A5"][layout="portrait"] < width: 21cm; height: 14.8cm; >.content tableВ тело шаблона вписываете ваш текст, например мой:
Содержимое 1 страницыСодержимое 2 страницыВ Подвал шаблона вставляем логическое завершение всей конструкции :)Кстати, не забываем про Права доступа, ибо если вы разграничили и сделали группы, без наследования, то Вам в ручную нужно их вновь проставлять. Ибо забудете, что в 90% случаях.
Нумерация страниц при печати
Добавлено через 2 часа 1 минуту
Для печати своих колонтитулов использую такую конструкцию:1 2 3 4 5 6 7 8 9 10 11 12style type="text/css"> html body < font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;>#container #content<> #footer /style> style media="print"> .Noprint < DISPLAY: none;>.PageNext < PAGE-BREAK-AFTER: always >/style>div id="container" > div id="content" style="max-height:250mm; margin-bottom: 20px;" > //ТЕКСТ ТЕЛА ПИСЬМА /div> div id="footer" style="position:fixed;"> //колонтитул НИЖНИЙ /div> /div>возникают такие проблемы:
1) текст накладывается поверх на колонтитул
2) нет счетчика страниц при печати, т.к. размер текст в теле формируется автоматически и не известен заранееДобавлено через 9 минут
вопрос с перекрытием колонтитулов решил. У вас написал правильно, а у себя забыл закрыть блок.
Осталось решить проблему со счетчиком страниц
count(@page) не работает
Нумерация страниц
Привет всем помогите с нумерацией страниц <div <div <tr>.Нумерация страниц при печати
Прошу помощи в нумерации страниц при печати. У меня большая таблица и вправо и вниз, которую.Нумерация страниц при разной ориентации страниц
Добрый день уважаемые форумчане. Возник такой вопрос, прошу помощи. Есть документ, в котором.Сквозная нумерация сторонних документов при массовой печати
Доброго времени суток! Господа профессионалы, необходимо реализовать решение следующей задачи: .Слетает нумерация страниц на колонтитуле при конвертации в pdf
Здравствуйте, уважаемые форумчане. Столкнулся с проблемой, при конвертации документа word в pdf.
Сообщение было отмечено fidel42rus как решение
Решение
div class="document"> div class="page"> div class="content">Lorem, ipsum1/div> div class="footer">/div> /div> div class="page"> div class="content">Lorem, ipsum2/div> div class="footer">/div> /div> /div>.document { counter-reset: page; } .page { counter-increment: page; } .footer:before { content: "Страница: " counter(page) ": "; }
