Log in / Register

Forum › How do I...?

change the header and footer margins?

stevenlavine1
Hi,

I've just started using Prince to produce a PDF directory. I am struggling with a couple of issues and was hoping someone could point me in the right direction with them.

1. the headers have a coloured background which should start and end at the page boundries. I have tried setting the css to @page {
@top {
margin: 0;
}
}
however this does not change anything? What am I doing wrong?

2. on some pages i need to place a full page advert, which needs to have a page margin of 0, so it runs to the bleed, how can I do this, is there a way to "name" a page and have
@page:<page name> {
margin: 0;
}

Any help would be very much appreciated.

Regards,

Steve
mikeday
For the first issue, here is an example of a page header with a background that extends to the edge of the page, and into the bleed area if crop marks are enabled:
<html>
<head>
<style>
@page {
    @top {
        content: "Hello, world!";
        background: aqua
    }
}
</style>
</head>
<body>
<h1>Yo!</h1>
</body>
</html>


For the second issue you want named pages, which allow you to do exactly what you want.
stevenlavine1
thanks, Mike.

The background only runs up to the top margin. I cannot seem to get it to the left or right margins I have attached a couple of pngs as an example.
how_it_should_look.pnghow_it_now_looks.png
  1. how_it_now_looks.png‎ 91.0 kB ‎
    how it looks now
  2. how_it_should_look.png‎ 113.0 kB ‎
    How the header should look
mikeday
To cover the corners you will need to use the @top-left-corner and @top-right-corner page margin boxes in addition to @top.
stevenlavine1
Thanks Mike. that worked a treat.
With regards to the named page, I have tried that, but it breaks the flow of the document. If I use float: top-next, it keeps the flow of the document, but puts the header and footer in, however If I use a named page, and the advert container is written to the html file in, say the second column, the pdf will miss the rest of the page, place the advert on the next page, and then restart the flow on the page following. What I need is the advert to be taken out of the current flow and then, placed on the next page. Is there a way of doing this?
mikeday
Not yet, currently there is no mechanism to combine page floats and named pages. However, it's something that several people have asked for, so we will be looking at it after the next release.
stevenlavine1
do you know of any hacks that could get over the page issue, and column span issue (where in a 3 column layout, a block, or image spans 2 of the columns)?
mikeday
Due to the lack of proper mechanisms to do this it really would be quite a hack. One possibility would be to use a page float (eg. "float: top-next") and try using an absolutely positioned block within the floated block that is actually bigger than the normal page area, so that it covers the headers and footers. This is messy, but it might actually work!

The column spanning issue is trickier, and I can't think of a way of applying this to an arbitrary block without ending up with overlap of some kind, unless the surrounding blocks are carefully arranged.