За последние 24 часа нас посетили 8911 программистов и 612 роботов. Сейчас ищут 83 программиста ...

Убрать из печатной формы ненужные элементы интерфейса

Тема в разделе "HTML и CSS", создана пользователем kretsman, 26 сен 2019.

Метки:
  1. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    Есть страничка индекс.пхп
    выглядит так:
    upload_2019-9-26_14-24-4.png
    При печати выдает такое вот авновг:
    upload_2019-9-26_14-24-51.png
    А надо чтобы меню не было или хотя бы не лезло поверх инфы, но лучше чтобы совсем не показывало.

    Само меню суется через
    PHP:
    1. include('menu.php')
    Как убрать его из печатной формы?
     
  2. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    можете через css
    задайте через правило @media print те области, которые нужно выводить на печать, если такое не задано - будет печататься все подряд
     
  3. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    а как конкретно это сделать? куда прописывать? у меня есть css для меню, в него и прописывать?
     
  4. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    ну можете и в него
    Код (CSS):
    1. @media print {
    2.    .menu {
    3.         display: none;
    4.     }
    5. }
    что-то типа такого
     
  5. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    Не помогло
    --- Добавлено ---
    Вот собсна css этого меню, куда тут и что вставлять то надо...
    Код (CSS):
    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4.   outline: none;
    5.   -webkit-box-sizing: border-box;
    6.   -moz-box-sizing: border-box;
    7.   box-sizing: border-box;
    8. }
    9. *:after,
    10. *:before {
    11.   -webkit-box-sizing: border-box;
    12.   -moz-box-sizing: border-box;
    13.   box-sizing: border-box;
    14. }
    15. article,
    16. aside,
    17. details,
    18. figcaption,
    19. figure,
    20. footer,
    21. header,
    22. hgroup,
    23. nav,
    24. section {
    25.   display: block;
    26. }
    27. html {
    28.   font-size: 100%;
    29.   height: auto !important;
    30.   height: 100%;
    31.   -webkit-text-size-adjust: 100%;
    32.   -ms-text-size-adjust: 100%;
    33. }
    34. .clear {
    35.   display: block;
    36. }
    37. .clear::after {
    38.   clear: both;
    39.   content: ".";
    40.   display: block;
    41.   height: 1px;
    42.   visibility: hidden;
    43. }
    44.  
    45. /*GENERIC STYLES*/
    46. body {
    47.   background: #f2f2f2;
    48.   color: #222;
    49.   -webkit-font-smoothing: antialiased;
    50.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    51.   font-size: 1.05em;
    52.   font-weight: 400;
    53.   height: auto !important;
    54.   height: 100%;
    55.   line-height: 1.6rem;
    56.   min-height: 100%;
    57. }
    58. /*NAV*/
    59. header {
    60.   background: linear-gradient(
    61.     to left,
    62.     rgba(54, 194, 182, 0.96) 0,
    63.     rgba(62, 188, 207, 0.96) 100%
    64.   );
    65.   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    66.   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    67.   display: block;
    68.   position: fixed;
    69.   width: 100%;
    70.   z-index: 1000;
    71. }
    72.  
    73. header > nav > ul {
    74.   display: flex;
    75.   flex-wrap: wrap;
    76.   justify-content: flex-start;
    77.   list-style: none;
    78.   margin: 0;
    79.   padding: 0;
    80. }
    81.  
    82. header > nav > ul > li {
    83.   flex: 0 1 auto;
    84.   margin: 0;
    85.   padding: 0;
    86.   position: relative;
    87.   transition: all linear 0.1s;
    88. }
    89.  
    90. header > nav > ul > li:hover {
    91.   background: rgba(58, 162, 173, 1);
    92. }
    93.  
    94. header > nav > ul > li a + div {
    95.   background: linear-gradient(
    96.     to bottom,
    97.     rgba(58, 162, 173, 1) 0,
    98.     rgba(62, 188, 207, 0.96) 100%
    99.   );
    100.   border-radius: 0 0 2px 2px;
    101.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    102.   display: none;
    103.   font-size: 1rem;
    104.   position: absolute;
    105.   width: 195px;
    106. }
    107.  
    108. header > nav > ul > li:hover a + div {
    109.   display: block;
    110. }
    111.  
    112. header > nav > ul > li a + div > ul {
    113.   list-style-type: none;
    114. }
    115.  
    116. header > nav > ul > li a + div > ul > li {
    117.   margin: 0;
    118.   padding: 0;
    119. }
    120.  
    121. header > nav > ul > li a + div > ul > li > a {
    122.   color: rgba(255, 255, 255, 0.9);
    123.   display: block;
    124.   font-size: 0.75rem;
    125.   letter-spacing: 1.5px;
    126.   padding: 0.25rem 1.5rem;
    127.   text-decoration: none;
    128.   text-transform: uppercase;
    129. }
    130.  
    131. header > nav > ul > li a + div > ul > li:hover > a {
    132.   background-color: rgba(0, 0, 0, 0.15);
    133. }
    134.  
    135. header > nav > ul > li > a {
    136.   align-items: flex-start;
    137.   color: #fff;
    138.   display: flex;
    139.   font-size: 1.55rem;
    140.   font-weight: 200;
    141.   letter-spacing: 1px;
    142.   max-width: 130px;
    143.   padding: 1rem 1.5rem;
    144.   text-decoration: none;
    145.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    146.   transition: all linear 0.1s;
    147. }
    148.  
    149. header > nav > ul > li > a > div > span {
    150.   color: rgba(255, 255, 255, 0.75);
    151.   display: block;
    152.   font-family: Georgia, "Times New Roman", Times, serif;
    153.   font-size: 0.7rem;
    154.   font-style: italic;
    155.   line-height: 1rem;
    156.   max-width: 260px;
    157. }
    158.  
    159. @media (min-width: 990px) {
    160.   header > nav > ul > li > a {
    161.     max-width: 500px;
    162.     font-size: 1.7rem;
    163.     line-height: 2rem;
    164.   }
    165.  
    166.   header > nav > ul > li > a > div > span {
    167.     margin: 4px 0 0;
    168.   }
    169. }
    170.  
    171. .tree {margin: 5px;
    172. }
    173.  
    174.  
    175.  
    176. .treeHTML {
    177.   line-height: normal;
    178.   margin: 0 0 0 .1075em;
    179. }
    180. .treeHTML details {
    181.   display: block;
    182. }
    183. .treeHTML div {
    184.   position: relative;
    185.   margin: 0 0 0 .5em;
    186.   padding: 0 0 0 1.2em;
    187. }
    188. .treeHTML div:not(:last-child) { /* необязательно */
    189.   border-left: 1px solid #ccc;
    190. }
    191. .treeHTML div:before { /* необязательно */
    192.   content: "";
    193.   position: absolute;
    194.   top: 0;
    195.   left: 0;
    196.   width: 1.1em;
    197.   height: .5em;
    198.   border-bottom: 1px solid #ccc;
    199. }
    200. .treeHTML div:last-child:before { /* необязательно */
    201.   border-left: 1px solid #ccc;
    202. }
    203. .treeHTML summary { /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */
    204.   position: absolute;
    205.   top: 0;
    206.   left: 0;
    207.   cursor: pointer;
    208. }
    209. .treeHTML details[open] summary { /* убрать рамку при фокусе */
    210.   outline: none;k;}
     
  6. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    а можете содержимое файла стилей для меню показать?
     
  7. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    Вот собснаcss
    Код (CSS):
    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4.   outline: none;
    5.   -webkit-box-sizing: border-box;
    6.   -moz-box-sizing: border-box;
    7.   box-sizing: border-box;
    8. }
    9. *:after,
    10. *:before {
    11.   -webkit-box-sizing: border-box;
    12.   -moz-box-sizing: border-box;
    13.   box-sizing: border-box;
    14. }
    15. article,
    16. aside,
    17. details,
    18. figcaption,
    19. figure,
    20. footer,
    21. header,
    22. hgroup,
    23. nav,
    24. section {
    25.   display: block;
    26. }
    27. html {
    28.   font-size: 100%;
    29.   height: auto !important;
    30.   height: 100%;
    31.   -webkit-text-size-adjust: 100%;
    32.   -ms-text-size-adjust: 100%;
    33. }
    34. .clear {
    35.   display: block;
    36. }
    37. .clear::after {
    38.   clear: both;
    39.   content: ".";
    40.   display: block;
    41.   height: 1px;
    42.   visibility: hidden;
    43. }
    44.  
    45. /*GENERIC STYLES*/
    46. body {
    47.   background: #f2f2f2;
    48.   color: #222;
    49.   -webkit-font-smoothing: antialiased;
    50.   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    51.   font-size: 1.05em;
    52.   font-weight: 400;
    53.   height: auto !important;
    54.   height: 100%;
    55.   line-height: 1.6rem;
    56.   min-height: 100%;
    57. }
    58. /*NAV*/
    59. header {
    60.   background: linear-gradient(
    61.     to left,
    62.     rgba(54, 194, 182, 0.96) 0,
    63.     rgba(62, 188, 207, 0.96) 100%
    64.   );
    65.   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    66.   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    67.   display: block;
    68.   position: fixed;
    69.   width: 100%;
    70.   z-index: 1000;
    71. }
    72.  
    73. header > nav > ul {
    74.   display: flex;
    75.   flex-wrap: wrap;
    76.   justify-content: flex-start;
    77.   list-style: none;
    78.   margin: 0;
    79.   padding: 0;
    80. }
    81.  
    82. header > nav > ul > li {
    83.   flex: 0 1 auto;
    84.   margin: 0;
    85.   padding: 0;
    86.   position: relative;
    87.   transition: all linear 0.1s;
    88. }
    89.  
    90. header > nav > ul > li:hover {
    91.   background: rgba(58, 162, 173, 1);
    92. }
    93.  
    94. header > nav > ul > li a + div {
    95.   background: linear-gradient(
    96.     to bottom,
    97.     rgba(58, 162, 173, 1) 0,
    98.     rgba(62, 188, 207, 0.96) 100%
    99.   );
    100.   border-radius: 0 0 2px 2px;
    101.   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    102.   display: none;
    103.   font-size: 1rem;
    104.   position: absolute;
    105.   width: 195px;
    106. }
    107.  
    108. header > nav > ul > li:hover a + div {
    109.   display: block;
    110. }
    111.  
    112. header > nav > ul > li a + div > ul {
    113.   list-style-type: none;
    114. }
    115.  
    116. header > nav > ul > li a + div > ul > li {
    117.   margin: 0;
    118.   padding: 0;
    119. }
    120.  
    121. header > nav > ul > li a + div > ul > li > a {
    122.   color: rgba(255, 255, 255, 0.9);
    123.   display: block;
    124.   font-size: 0.75rem;
    125.   letter-spacing: 1.5px;
    126.   padding: 0.25rem 1.5rem;
    127.   text-decoration: none;
    128.   text-transform: uppercase;
    129. }
    130.  
    131. header > nav > ul > li a + div > ul > li:hover > a {
    132.   background-color: rgba(0, 0, 0, 0.15);
    133. }
    134.  
    135. header > nav > ul > li > a {
    136.   align-items: flex-start;
    137.   color: #fff;
    138.   display: flex;
    139.   font-size: 1.55rem;
    140.   font-weight: 200;
    141.   letter-spacing: 1px;
    142.   max-width: 130px;
    143.   padding: 1rem 1.5rem;
    144.   text-decoration: none;
    145.   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    146.   transition: all linear 0.1s;
    147. }
    148.  
    149. header > nav > ul > li > a > div > span {
    150.   color: rgba(255, 255, 255, 0.75);
    151.   display: block;
    152.   font-family: Georgia, "Times New Roman", Times, serif;
    153.   font-size: 0.7rem;
    154.   font-style: italic;
    155.   line-height: 1rem;
    156.   max-width: 260px;
    157. }
    158.  
    159. @media (min-width: 990px) {
    160.   header > nav > ul > li > a {
    161.     max-width: 500px;
    162.     font-size: 1.7rem;
    163.     line-height: 2rem;
    164.   }
    165.  
    166.   header > nav > ul > li > a > div > span {
    167.     margin: 4px 0 0;
    168.   }
    169. }
    170.  
    171. .tree {margin: 5px;
    172. }
    173.  
    174.  
    175.  
    176. .treeHTML {
    177.   line-height: normal;
    178.   margin: 0 0 0 .1075em;
    179. }
    180. .treeHTML details {
    181.   display: block;
    182. }
    183. .treeHTML div {
    184.   position: relative;
    185.   margin: 0 0 0 .5em;
    186.   padding: 0 0 0 1.2em;
    187. }
    188. .treeHTML div:not(:last-child) { /* необязательно */
    189.   border-left: 1px solid #ccc;
    190. }
    191. .treeHTML div:before { /* необязательно */
    192.   content: "";
    193.   position: absolute;
    194.   top: 0;
    195.   left: 0;
    196.   width: 1.1em;
    197.   height: .5em;
    198.   border-bottom: 1px solid #ccc;
    199. }
    200. .treeHTML div:last-child:before { /* необязательно */
    201.   border-left: 1px solid #ccc;
    202. }
    203. .treeHTML summary { /* стилями можно задать любую форму, например, тот же плюс. Я специально не стала усложнять, чтобы можно было проще разобраться в коде */
    204.   position: absolute;
    205.   top: 0;
    206.   left: 0;
    207.   cursor: pointer;
    208. }
    209. .treeHTML details[open] summary { /* убрать рамку при фокусе */
    210.   outline: none;k;}
     
  8. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    Код (Text):
    1. @media print {
    2.    header{
    3.         display: none;
    4.     }
    5. }
     
  9. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    просто добавить внизу?
     
  10. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
  11. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    не помогает
     
  12. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    Создал файл index.html с содержимым
    Код (Text):
    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <title>MediaPrint</title>
    5.         <style type="text/css">
    6.          @media print {
    7.             h2 {
    8.                 display: none;
    9.             }
    10.          }
    11.         </style>
    12.     </head>
    13.     <body>
    14.         <h1>Мы видим это при печати на принтер</h1>
    15.         <h2>А это при печати не видим</h2>
    16.     </body>
    17. </html>
    Открываю страницу через браузер. Вижу [1.png]

    [​IMG]

    Нажимаю CTRL+P (вызов печати). Вижу [2.png]

    [​IMG]
     

    Вложения:

    • 1.png
      1.png
      Размер файла:
      36,8 КБ
      Просмотров:
      15
    • 2.png
      2.png
      Размер файла:
      63,1 КБ
      Просмотров:
      15
  13. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    Это то ясно, не ясно как это долбанное меню при печати не выводить...
    Дело в том что я уже прошерстил как работает это правило, но оно почему то не работает для меню...
     
    #13 kretsman, 26 сен 2019
    Последнее редактирование: 26 сен 2019
  14. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    Страницу полученную сохраните, прикрепите к теме. Гляну
     
  15. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    Полученную страницу в результате чего?
     
  16. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    Вот у вас есть страница, которую вы хотите распечатать. Ее сохраните как html страницу, прикрепите к теме.
     
  17. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    печатную форму или саму страницу?
     
  18. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    страницу, которую вы собираетесь печатать.
     
  19. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    upload_2019-9-26_17-11-3.png
     
  20. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    запакуйте страницу в zip архив
     
  21. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
     

    Вложения:

  22. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    Не знаю как у вас, у меня при отправки страницы на печать, страница отправляется без меню, может вам кеш браузера почистить?

    1.png
     
  23. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    почистил кэш, та же история...
     
  24. kazadai90

    kazadai90 Активный пользователь

    С нами с:
    6 фев 2013
    Сообщения:
    99
    Симпатии:
    18
    HTML:
    1. <link rel="stylesheet" type="text/css" href="./Учет оборудования_files/style.css">
    2.  
    3. <style type="text/css">
    4.          @media print {
    5.             header {
    6.                 display: none;
    7.             }
    8.          }
    9.         </style>
    разместите код для @media print

    после подключения стилей, как указано выше. снова почистите кеш браузера, перезагрузите страницу
     
  25. kretsman

    kretsman Новичок

    С нами с:
    7 сен 2018
    Сообщения:
    75
    Симпатии:
    0
    Что за путь?
    ./Учет оборудования_files/style.css