Как получить мои тексты содержания моего тела, начиная с немного выше? - PullRequest
Новая
       9

Как получить мои тексты содержания моего тела, начиная с немного выше?

0 голосов
/ 30 декабря 2011

Я пытаюсь сгенерировать pdf, используя Dompdf.У меня есть следующий скрипт для дизайна моего сгенерированного PDF. 

<html>
<head>
<style>
@page { margin: 180px 50px; }
#header { position: fixed; left: 0px; top: -180px; right: 0px; height: 120px; background-color:  orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: lightblue; }
#footer .page:after { content: counter(page, upper-roman); }
</style>

<body>
      <div id=\"header\">

     <h1>Charlie Sheen</h1>
     </div>

      Hi, This is Charlie Sheen <br>

    <p> Winning </p>
   <p> Winning </p>
  <p> Winning </p>
   <p> Winning </p>
    <p> Winning </p>
     <p> Winning </p>
      <p> Winning </p>

   <div id=\"footer\">
 <p class=\"page\">Page </p>
 </div>
 <div id=\"content\">
 <p>the first page</p>
 <p style=\"page-break-before: always;\">the second page</p>
 </div>                  

 </body>
</html>

enter image description here

Когда я генерирую PDF, он выглядит как на картинке выше.Теперь моя проблема в том, что я хочу, чтобы мой контент начинался немного выше, чем сейчас.Если вы заметили на изображении выше, есть предложение «Привет, это Чарли Шин» ... Я хочу, чтобы это началось с немного выше.Я попытался добавить следующий код в стиль, но он не работает: 

#content { position: fixed; margin-top: 0px;}

Не могли бы вы помочь мне начать работу с текста немного выше?

Спасибозаранее :))

Ответы [ 2 ]

0 голосов
/ 04 января 2012

Вы выдвигаете тело в 180px сверху и снизу документа с помощью @page { margin: 180px 50px; }.Тем не менее, высота вашего заголовка составляет всего 120 пикселей.Таким образом, между заголовком и содержимым тела, естественно, будет 60 пикселей.Вам следует либо увеличить размер заголовка, либо уменьшить поля @page. 

<html>
<head>
    <style>
        @page { margin: 120px 50px; }
        #header { position: fixed; left: 0px; top: -120px; right: 0px; height: 120px; background-color:  orange; text-align: center; }
        #footer { position: fixed; left: 0px; bottom: -120px; right: 0px; height: 150px; background-color: lightblue; }
        #footer .page:after { content: counter(page, upper-roman); }
    </style>

<body>
    <div id="header">
        <h1>Charlie Sheen</h1>
    </div>

    <div id="footer">
        <p class="page">Page </p>
    </div>

    <div id="content">
        <p>Winning!</p>
        <p style="page-break-before: always;">Winning!</p>
    </div>
</body>
</html>

(Ваш исходный код немного исправлен).

0 голосов
/ 30 декабря 2011

Изменение поля на #content не будет иметь значения, потому что #content далеко вниз по странице.

Я бы посоветовал обернуть первое предложение в теги p, например,

<p>Hi, This is Charlie Sheen</p>

...