Seitenlayout mit Prince

[Dina]

Hi Leute!

Ich versuche verzweifelt heraus zu bekommen, wie man so ein Format

Hier ein Beispiel

hinbekommt. Dabei meine ich allerdings nur diesen Kasten auf der rechten und linken Seite (in dem die große 1 steht).

Alles andere hab ich schon, aber ich weiß nicht, ob Prince

@page: left {
  @center-right{...}
}

interpretiert und wie es via CSS umzusetzen ist.
Bisher hab ich nur das:
@page {
 @top-right {
  content: string(doctitle);
  font-size: x-small;
 }
 @top-left {
  content: "Titel der Seite";
  font-size: x-small;
 }
}

@page :right {
  @bottom-left {
    content: counter(page);
  }
}

@page :left {
  @bottom-right {
    content: counter(page);
  }
  @center-right {
    content: "1";
}

Ich hoffe, ihr könnt mir helfen!

[Dina]

So, jetzt habe ich es geschafft, dass es wie im Beispiel ausschaut.
Mein CSS:
@page :right {
 @left {  /*Festlegung des grauen Kastens auf der rechten Seite*/
  content: counter(h1);
  border: 1px solid grey;
  background-color: grey;
  margin-right: 40px;
  color: white;
  font-size: 400%;
  font-weight: bold;
  margin-bottom: 700px;
 }
  @bottom-left {
    content: counter(page);
  }
}

@page :left {
 @right { /*Festlegung des grauen Kastens auf der linken Seite*/
  content: counter(h1);
  border: 1px solid grey;
  background-color: grey;
  margin-left: 40px;
  color: white;
  font-size: 400%;
  font-weight: bold;
  margin-bottom: 700px;
 }
  @bottom-right {
    content: counter(page);
  }
}

h1 {
 string-set: doctitle content();
 counter-increment: h1;  /*muss hinzugefügt werden, damit grauer Kasten bei 1 anfängt zu zählen*/
 border-bottom: solid black thin;
 line-height: 2;
}

Nun ist aber mein nächstes Problem, dass ich es so eingerichtet haben möchte, dass er ebenfalls, wenn ein neues <h1> kommt, er die graue Box um ein Stück nach unten setzt.
Wie kann ich das am besten umsetzen?

Hoffe, einer von euch kann mir diesmal helfen!