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!