Log in / Register

Forum › How do I...?

Named page for a multiple-pages div

johnw
I'd like to apply different styles on pages where a long <div> spreads. Let say the <div> starts at page 2 and ends at page 4. I'd like pages #2, #3, #4 to have different styles.

So far I haven't managed to do that with named pages. What I have tried :

@page longDiv {
@bottom-right {
content: normal;
}
}

div#myDiv {
page: longDiv;
}


Cause a page break before #myDiv

@page longDiv {
@bottom-right {
content: normal;
}
}

div#myDiv {
page: longDiv auto;
}


Named page style not applied

@page longDiv:first {
@bottom-right {
content: normal;
}
}

div#myDiv {
page: longDiv auto;
prince-page-group: start
}


Cause a page break before #myDiv

Anyone has an idea on how to achieve that ?

PS : I've trie to insert "markers" divs in my longDiv and apply the "page: myDiv" to them but either it doesn't work, either it inserts page break after/before each marker div.
mikeday
You may be able to achieve the layout you want using the @page :nth() selector and "prince-page-group: start", as demonstrated here:
<html>
<head>
<style>
@page mypage:nth(1) { background: red }
@page mypage:nth(2) { background: green }
@page mypage:nth(3) { background: blue }

div {
    page: mypage;
    prince-page-group: start
}

h1 { page-break-before: always }
</style>
</head>
<body>
<h1>Hello!</h1>
<h1>World!</h1>
<div>
<h1>Page 1!</h1>
<h1>Page 2!</h1>
<h1>Page 3!</h1>
</div>
</body>
</html>
johnw
Thanks for your reply. It still inserts a page break before the long div though (even if I remove the page-break-before on h1 tags).

To be precise, what I want to achieve is to set the bottom content to normal on the first page and on every page where div shows. The problem is the div HAS to start on the first page (which has a different layout and is already configured to set the bottom content to normal) and continue on an unknown number of pages.

To simplify I can assume that the div will never be more than 3 or 4 pages long, so I can safely use @page mypage:nth(X).

But the problem with the page break before the div remains.
mikeday
Unfortunately using a different named page will always force a page break before and after, so this may not be possible, unless you can wrap the content before the div as well and include that in the same named page.
johnw
Of course I can !
So simple solution...

Thanks !