SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I need a header and footer when printed... I'm very close but I get overlap... HELP

    Hi,

    I'm a newbie so please be nice.. :-)

    I have some experience with CSS and what I am tring to accomplish is to add a header and footer (UNCLASSIFIED) to all pages when printed. The browser we use is IE 6 and 8.

    Seems to work except that it overlaps my text at the top and bottom of each page. I read about using tables but I'd like to avoid that for a number of reasons.

    Can someone help?


    This is what i have in my html files

    <div class="divHeader">UNCLASSIFIED</div>
    <div class="divFooter">UNCLASSIFIED</div>

    In this CSS:

    .divHeader

    { margin-left:0;
    position: fixed;
    top: 0;
    display: inline;
    color: red;
    }


    .divFooter

    { margin-left:0;
    position: fixed;
    bottom: 0;
    display: inline;
    color: red;
    }
    Last edited by TechnoBear; Apr 3, 2012 at 09:10. Reason: class name corrected

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well in the HTML files you have divFooter as the class both times, and the CSS you posted there is a separate divHeader and divFooter. Could it be something as easy as that?

    Could be a careless mistake, but this might be the issue .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Apr 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Well in the HTML files you have divFooter as the class both times, and the CSS you posted there is a separate divHeader and divFooter. Could it be something as easy as that?

    Could be a careless mistake, but this might be the issue .

    Good catch. I just typed it wrong. It's correct in my files.

    Any other suggestions?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Is there enough information in each div that it would overlap on a smaller screen?

    If this is an intranet site and you ahve control if people have JS on, you could set it so that the header div is top:0 and the height stops at 50%, and the footer starts 50% down and goes to the end of hte page.
    Since the divs start at the top and bottom, if there is enough content, it will overlap. Your best bet would just be to eliminate the position:fixed and just let the document flow normally .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,333
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by ZHPOWER View Post
    Good catch. I just typed it wrong. It's correct in my files.
    I've amended it in your post so it doesn't cause confusion.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •