Log in / Register

Forum › How do I...?

Changing style definition at the top of a page

BorisK
Hi everybody !

I have level 3 titles with a top margin equal to 15pt

h3  {
...
margin-top: 15pt;
...


I'd like this h3 to have a null top margin when the title is on the top of a page, instead of 15pt margin.

For the while, I change a h3 placed in top of a page by declaring it with a Next_page class :

h3.Next_page  {
...
page-break-before: always;
margin-top: 0pt;
...
}


but it's a tedious method and I have to change the next page h3 when I change the text or the page-setting.

How can I do to obtain an automatic null top margin a the top of a page ?

Tanking you in anticipation

Boris
mikeday
A <h3> that occurs after a natural page break should have its margin removed automatically. The margin should remain only if you have created the page break manually, with one of the page break properties.
BorisK
Thank you, Mike, for your answering me, especially on sunday.

In fact, my post doesn't correspond exactly to the problem I need to resolve.

I place the h3 title in the left margin, the following paragraph facing the title :

h3  {
   float: left;
   margin-top: 15pt;
   margin-left: 0cm;
   margin-bottom: 0pt;
   width: 5cm;
	...
   page-break-after: avoid;
    }

h3 + p {
   margin-top: 15pt;
}


When a natural page break occurs, the paragraph is correctly placed a the top border of the page but the h3 title conserves its 15pt top margin, that is the title is lower that the paragraph facing it.

To correct that, I declare the h3 placed at the top of a page using a Next_page class :
h3.Next_page  {
   page-break-before: always;
   margin-top: 0pt;
}
h3.Next_page  + p  {
   margin-top: 0pt;
}


but, as I said, it's a tedious and non stable method.


I tried
h3  {
    position: absolute;
    left: 0;
}


but in this case, when natural page break occurs, the h3 title is placed at the very bottom of the previous page, lower the page bottom border.
mikeday
Thanks, I see the problem. How about wrapping up the h3 in a div element, and putting the top margin on that? Then both the paragraph and the heading should line up. Here is an example document:
<html>
<head>
<style>
@page { border: solid red thin }

div.wrap { margin-top: 15pt }

h3 {
    float: left;
    margin-top: 0;
    margin-left: -1in;
}
</style>
</head>
<body>
<div class="wrap">
<h3>Heading!</h3>
</div>
<p>Paragraph</p>

<p>foo</p><p>foo</p><p>foo</p><p>foo</p>
<p>foo</p><p>foo</p><p>foo</p><p>foo</p>
<p>foo</p><p>foo</p><p>foo</p><p>foo</p>
<p>foo</p><p>foo</p><p>foo</p><p>foo</p>
<p>foo</p><p>foo</p><p>foo</p><p>foo</p>
<p>foo</p><p>foo</p>

<div class="wrap">
<h3>Heading!</h3>
</div>
<p>Paragraph</p>
</body>
</html>

This document demonstrates the heading at the beginning of the first page and second page. On the second page the top margin will be removed, but they should still line up correctly.
BorisK
Thank you, Mike, for your suggestion which actually resolves the problem.

I think that my clients will accept this perhaps not really natural way of writing. If they won't, I 'll write a small PHP script.

It would be much better if we had the capability of declaring in css code something like

h3  {
float: left;
margin-top: 15pt;
margin-top-top-of-page: 0;


Generally speaking, it would be perharps worth disposing of suffixes "-top-of-page", "-bottom-of-page", "-first-of-page", "-last-of-page" for almost any css item.

For instance:
class_item  {
font-weight: normal;
font-weight-top-of-page: bold;
color: black;
color-top-of-page: silver;
margin-top: 15pt;
margin-top-top-of-page: 25pt;
etc.
}


or
class_item:top-of-page  {
font-weight: bold;
color: silver;
margin-top: 25pt;
etc.
}



With thanks, sincerely yours

Boris
BorisK
Hello,

I am confused of having written a perhaps not very polite sentence in my previous post. :(

I wish, I had written « I think that my clients will accept this perhaps not really natural way of writing. If they won't, I 'll write a small PHP script. »

So I changed my previous post in this way.

I apologize for my initial incorrect writing.

Best regards

BorisK
mikeday
No problem at all! It would be nice to have ways to control the appearance of an element depending on where it appears on the page. But I think that adding many extra properties might make life difficult, for us to implement them, and for authors to work with them. Perhaps there is another way, I don't know. Something for us to think about after the next release. :)