Масштабировать часть изображения или таблицы в CHM

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

Изображение:

введите здесь описание изображения

Можно ли сделать это с помощью CSS или HTML, с изображением или таблицей?

ИЗМЕНИТЬ:

У меня все еще есть 2 проблемы с ним, которые я не могу исправить. Надеюсь, вы можете помочь немного больше. Цвет фона в header_center также дает небольшое подчеркивание после компиляции в файл CHM. Его сделали красным для наглядности. Кроме того, когда я масштабирую окно CHM, между header_left и header_center появляется пробел, и я понятия не имею, почему. Это решается, если я задаю всем 3 заголовкам цвет фона, но мне не нужна строка под header_right из-за изображения. Любые идеи?

Эти изображения являются результатом на данном этапе:

Заголовок не масштабируется Масштабирование заголовка


image html css tabular chm
person Irene    schedule 18.10.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы знаете, CHM подобен формату ZIP и может содержать как HTML, так и CSS. Ниже я показал одну из возможностей использования изображений. Попробуйте и измените под свои нужды (см. HTML ниже). Цвета фона в <colgroup> используются только в демонстрационных целях. Если в середине есть текст, в качестве цвета фона должен быть установлен соответствующий цвет баннера компании.

введите здесь описание изображения

Изображения, которые я использовал:

введите здесь описание изображения введите здесь описание изображения введите здесь описание изображения

Убедитесь, что внешний файл CSS, например. design.css находится внутри структуры уровня вашего проекта и добавляется в раздел [FILES] вашего файла проекта HHP. Вы можете открыть этот файл *.hhp, например, с помощью Notepad++ для добавления файлов. Если файлы перечислены в разделе [FILES], компилятор включает их в CHM-файл.

[FILES] 
welcome.htm 
design.css
How_to_extend\extend_menu.htm 
How_to_extend\power_function.htm 
images\gui_screenshot.jpg

HTML и CSS:

   <html>
     <head>
       <meta name="generator"
       content="HTML Tidy for HTML5 (experimental)" />
       <title></title>
       <style>

   .header {
     width: 100%;
     border-collapse: collapse;
     /*border: 1px solid black;*/
   }

   .header_left{
    width: 81px;
   }

   .header_center{
    /*background-image: url("help-info-de-right-part.png");*/
    /*background-color: #ff33cc;*/
    background-color: #e0e0e0;
    text-align: center;
   }

   .header_right{
    width: 82px;
   }

   .header td {
    padding: 0;
   }

   </style>
   </head>

     <body>
       <table class="header">
         <colgroup>
           <col style="background-color:green;" />
           <col style="background-color:red;" />
           <col style="background-color:yellow;" />
         </colgroup>
         <tr>
           <td class="header_left">
             <img src="help-info-de-left-part.png" />
           </td>
           <td class="header_center">
             <img src="help-info-de-center-part.png" />
           </td>
           <td class="header_right">
             <img src="help-info-de-right-part.png" />
           </td>
         </tr>
       </table>
       <h1>Heading 1</h1>
       <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
       aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
       takimata sanctus est Lorem ipsum dolor sit amet.</p>
     </body>

   </html>
person help-info.de    schedule 19.10.2018
comment
Извините за поздний ответ, мне потребовалось некоторое время, чтобы включить это, и у меня все еще есть 2 проблемы, которые я не могу исправить. Надеюсь, вы можете помочь немного больше. Цвет фона в header_center также дает небольшое подчеркивание. Его сделали красным для наглядности. Кроме того, когда я масштабирую окно CHM, между header_left и header_center появляется пробел, и я понятия не имею, почему. Это решается, если я задаю всем 3 заголовкам цвет фона, но мне не нужна строка под header_right из-за изображения. Любые идеи? - person Irene; 01.11.2018
comment
Дома посмотрю позже. - person help-info.de; 01.11.2018
comment
Спасибо, я очень ценю это. Я добавил изображения к исходному вопросу. - person Irene; 02.11.2018
comment
Проблема, которую вы описали в вопросе EDIT выше, удивительна. Я протестировал один файл HTML в нескольких браузерах (Chrome, FireFox, Microsoft Edge, Microsoft Internet Explorer). В скомпилированном справочном модуле (CHM) теперь я вижу и вашу проблему. Я безуспешно включил следующий метатег в раздел ‹head› <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"/>. В настоящее время я не знаю, в чем причина. - person help-info.de; 25.11.2018