Log in / Register

Forum › How do I...?

A black and a red box on top of every page

pronik
Maybe I'm missing something obvious here. I'm trying to implement our CI requirements and these documents require to put something on top of every page. For simplicity, we could say we need a black box from outer left edge to the page middle and a red box from the right outer edge to page middle. Both boxes are 10mm high and need to be repeated on every page.

I've tried doing something like

@page {
   @top-right {
      margin: 0;
      padding: 0;
      right: 0mm;
      top: 0;
      width: 105mm;
      height: 10mm;
      position: absolute;
      content: ' ';
      background-color: red;
      display: block;
   }

   @top-left {
      margin: 0;
      padding: 0;
      left: 0mm;
      top: 0;
      width: 105mm;
      height: 10mm;
      position: absolute;
      content: ' ';
      background-color: black;
      display: block;
   }
}


however, this doesn't work, since the boxes seem to protrude into main flow and thus actually respect page margins etc.

I assume it might be possible using static() and flow(), but maybe there is another way to implement this?
mikeday
Can you draw a little picture of what you are trying to achieve, or show an example that doesn't work? This looks fine to me, although I'm not sure why you need the absolute positioning in the first place. Do you want the boxes to be in the top page margin, or not?
pronik
mikeday wrote:
Can you draw a little picture of what you are trying to achieve, or show an example that doesn't work? This looks fine to me, although I'm not sure why you need the absolute positioning in the first place. Do you want the boxes to be in the top page margin, or not?


Something like this is what I need: http://i.imgur.com/SGwDN.png (quick sketch, gray and white colors instead of red and black)

What I see in my PDFs is that the edges of both rectangles align perfectly with the text margins, i.e. left margin equals the left text margin, dito for the right side. Top margin is aligned perfectly, but the bottom one is way too low -- definitely more than the 10mm I wished for.

Gonna experiment more today.
mikeday
Here is one method, using @top-left and @top-left-corner:
<html>
<head>
<style>
@page {
    margin-top: 20mm;

    @top-left-corner {
        background: black;
        margin-bottom: 10mm;
        content: ""
    }
    @top-left {
        background: black;
        margin-bottom: 10mm;
        content: ""
    }
    @top-right-corner {
        background: red;
        margin-bottom: 10mm;
        content: ""
    }
    @top-right {
        background: red;
        margin-bottom: 10mm;
        content: ""
    }
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>

Here is a different method, using negative margins on each side:
<html>
<head>
<style>
@page {
    margin-left: 25mm;
    margin-right: 25mm;
    margin-top: 20mm;

    @top-left {
        background: black;
        margin-left: -25mm;
        margin-bottom: 10mm;
        content: ""
    }
    @top-right {
        background: red;
        margin-right: -25mm;
        margin-bottom: 10mm;
        content: ""
    }
}
</style>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>