1 Тема від Vo_Vik

  • Vo_Vik
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 01.10.2012
  • Повідомлень: 4 787
    • Репутація: 2494

Тема: Формат друку сторінки

Умова, потрібно зробити не друкованою всю сторінку за виключенням одного(чи більше) елементу.
Трохи не зрозумілим є принцип використання стилю @media print

Vo_Vik вебсайт

2 Відповідь від Vo_Vik

  • Vo_Vik
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 01.10.2012
  • Повідомлень: 4 787
    • Репутація: 2494

Re: Формат друку сторінки

▼"Все розібрався:"

@media print {
  .noprint { display: none; }
  .print {display: block; }
}
Те що треба ставимо
class="print"
що не треба class="noprint"

Оце значить треба вночі спати, а не страдати над задачами, зранку воно якось швидше получається.

Подякували: Replace, miroslav.chandler2

Vo_Vik вебсайт

3 Відповідь від Replace

  • Replace
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 06.04.2012
  • Повідомлень: 2 895
    • Репутація: 2106

Re: Формат друку сторінки

Потрібно для всіх елементів, які не друкуються проставити display:none;
Або йти від супротивного. Для всіх display: none, а для тих які необхідно показати: display: block;

Приклад:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>media print</title>
<style>

#header, #footer, #content {
    border: 1px solid #ccc;
    text-align: center;
    width: 1000px;
    margin: 20px auto;
    padding: 20px;
}

@media print
  {
    #header, #footer {
        display: none;
    }
  }
</style>
</head>

<body>
    <div id="header">
        header
    </div>
    
    <div id="content">
        content
    </div>
    
    <div id="footer">
        footer
    </div>
    
</body>
</html>

Replace вебсайт

  • Дата реєстрації: 08.06.2012
  • Повідомлень: 2 031
    • Репутація: 743

Re: Формат друку сторінки

На мою думку краще юзати так, як показав Vo_Vik або Replace.

5 Відповідь від truesupport

  • Звідки: Львів
  • Дата реєстрації: 15.08.2012
  • Повідомлень: 355
    • Репутація: 191

Re: Формат друку сторінки

Я колись бачив варіант коли джаваскріптом ховається те що не потрібно, викликається менюшка друку, а потім повертається все назад. Я просто в шоці був, хоча може комусь було ліньки ксс писати, але блін.... хоча до такого тоже треба додуматись :)

6 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Формат друку сторінки

Я роблю ось так:
елементи які не треба друкувати я ховаю через цсс.
а всі інші хай залишаються як є.
Це фактично щось середнє між варіантом Вовіка і Реплейса. Так як вовік вказує всім кого треба друкувати у мене тілкьи ті кого не треба друкувати всі інші незмінні)
У Реплейса перераховуються елементи які приховувати. Досить громіздкий селектор може вийти якщо треба приховати 10-20 елементів .
Це особисто моя думка ;)
Як це працює дивіться на сторінках сайту зразок (новина або документ)
У кожного кодера своя реалізація але чим більше ви знаєте варіантів тим краще ;)

▼Прихований текст
    <!DOCTYPE html>
    <html>
    <head>
    <title>test print page</title>
    <style>
    
    @media print    {
       .noprint {
         display: none; 
      }
    }
    </style>
    </head>
     
    <body>
    <div id="header" class="noprint">
    header
    </div>
    <div id="content">
    content
    </div>
    <div id="footer"  class="noprint">
    footer
    </div>
    </body>
    </html>

funivan вебсайт