I have a sticky header on my page by setting CSS to relative and z-index.

When I go to print, the first page prints fine (header, with page content starting just below header). The following pages has header on top of content.

How can I force content below header on every page that is printed, or unstick the header so it only prints on first page?

Thank you!

Recommended Answers

All 3 Replies

body { bla bla bla }
.header { bla bla bla fixed }
.footer{ bla bla bla fixed }
a{ bla bla bla }
div{ bla bla bla }

@media print { body { blaa blaa blaa }
.header { blaa blaa blaa }
.footer { blaa blaa blaa } 
.menu { display:none; } // menu not neede3d on print page
a { blaa blaa blaa }
div { blaa blaa blaa }

using the media type print you can give different style .footer to the printed page from the screen page, add copyright notices to priinted pages, hide nav menus from printing, print addresses & all sorts of fun stuff, set appropriate print fonts and make your printed page as individual as the screen page
@media types for screen all handheld print text-to-speach allow flexible styling,
not setting a mediatype == @media all
so it s only neccessary to define in @media print those elements that are to be hidden or different to the screen page

Setting the z-index of the header = 0 will make the body flow around it,
setting the z-index < zero makes the text run over, setting the z-index > 0 makes the text run under, both these look the same when printing (bad, oveerstrike)

.header { top:0; bottom:auto; z-index:0; position:fixed; left:0; width:100%;}

has my header working on pages 1-5 of screen and print

I guess that is why I couldn't figure it out...I tried all that and thought it should work, but it is not. Seems like something crazy with LANSA. I'm able to set header to display: none in Print media and it hides it, but everything else leaves it on top of every page, covering content except on page 1.

Thanks though...hopefully will help someone!

position:absolute !important ;

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.