Grow your CSS skills. Land your dream job.

How to get a header and footer on HTML?

  • # May 27, 2009 at 7:43 am

    Hi,
    I have an assignment in which I generate an Application Form for Print purposes. The information(thus number of pages) on the Application Form varies from user to user. So sometimes, the Application print is 1 page long, sometimes 2 pages and sometimes even more.

    Now my client is asking me to put a standard header and footer on the page, which should get printed with each page. For example, if the print of the Application Form is coming 1 page long, there would be 1 header and 1 footer.
    If it is coming out to be more that 1 page long, then there should be 1 header and 1 footer on each page which is printed.

    I tried few approaches (using simple HTML), but failed.

    Please let me know if there is any way to accomplish this task.

    Pawan Pillai
    India

    # May 28, 2009 at 3:09 am

    I have not personally done this or tested it, but I imagine with some testing you could work this out:

    If you have an image that is the height of the printed page, you can repeat-y that as a background image

    Code:
    body {background: url(‘image/location.gif’) repeat-y top center}

    That should repeat on the vertical access and be at the top of every page… as a background image.

    (What is the height of a page to a printer?… yea that’s what needs to be figured out… is there a set height for all browsers?… more testing or maybe Google?)

    That’s what I would try.

    # May 28, 2009 at 6:34 am

    Could this be used with the tags page-break-before and page-break-after perhaps? I’ve not worked with print type CSS before so haven’t really looked at those elements…

    # May 28, 2009 at 3:33 pm
    "AshtonSanders" wrote:
    I have not personally done this or tested it, but I imagine with some testing you could work this out:

    If you have an image that is the height of the printed page, you can repeat-y that as a background image

    Code:
    body {background: url(‘image/location.gif’) repeat-y top center}

    That should repeat on the vertical access and be at the top of every page… as a background image.

    (What is the height of a page to a printer?… yea that’s what needs to be figured out… is there a set height for all browsers?… more testing or maybe Google?)

    That’s what I would try.

    Thanks Ashton,
    Looks like a logical solution. I will try this.
    Only problem could be the print page length.

    Thanks
    Pawan Pillai

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".