Log in / Register

Forum › How do I...?

Best strategy for adding a running header banner

markb
I would like to create a running header in the form of a ribbon/tab that pulls in the title of the current document section as shown in the attached image. I know how to pull in the content but I am having difficulty figuring out how to style the running header so it extends from the left margin beyond the @top-left-corner page region into the top-left page region. What is the best coding strategy for achieving this, including adding an icon and a slanted border?
Thank you!
  1. example.png‎ 11.8 kB
howcome
You can use negative margins for this:

<html>
<style>
@page {
  size: 10cm;
  margin: 1cm;
}

h2 {
  margin-left: -1cm;
  padding-left: 1cm;
  background: LightGreen;
}
</style>
<p>some text
<h2>A banner suddenly appears!</h2>
<p>some more text
</html>
markb
Thanks @howcome for your reply. What I need to do is create the running header as a property of the page which is outside the flow of the content. The running header pulls in the title of the major section that the current page lies within and is duplicated on all pages in that section.

I've made some progress in figuring it out as the new screenshot shows. The @top-left-corner box has an icon in it. The @top-left box has the running-header section title in it. Interestingly I can use 'width: 250pt;' to extend the width of the @top-left box into the @top box, which I show with a dashed line.

I'm still working on it, but it's looking promising.
  1. running-header.png‎ 35.4 kB
howcome
Right, if you don't need content to cross between the top-left-corner and the top-left margin boxes, your approach should work.

I attach a sample file which uses page floats to achieve the effect of running headers.
  1. foo.html‎ 0.7 kB