SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Hiding Elements For Print With CSS - Ouch!!!

    Okay, I just spent the last 8 hours trying to get this one.

    I'm designing a site and have it in test mode at http://www.monkeywithatypewriter.com...nos2/index.htm.

    I have two stylesheets for this. One for Screen at http://www.monkeywithatypewriter.com...stylesheet.css and one for Printers at http://www.monkeywithatypewriter.com...nos2/print.css.

    My dilema is when it comes to print this. As you can see from your "Print Preview" button (on IE), the navigational bar ends up in the middle of the page. I tried writing an exclude class by doing this:

    #noprint {display:none}

    and can successfully exclude any element on this page from a printer, except for the javascripts that write the navigation bar.

    The scripts are within the comment tags for the javascript menu if you read the source code.

    Any help would be great. I spent way too long on this one already.

    Thanks.

  2. #2
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I just tried to visit the link and Couldn't fin the Server

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fwiw, the prefix # (hash) is not a class, but an id and should be used no more than once on each page (i.e. used on only one element per page).

    I looked at the code and didn't see the #noprint id (w/ display: none used on any item at all, so presumably thee's nothing on or associated with the page to tell the browser not to include the menu when printing.


    Btw, you need to add a background colour to your site.
    Not everyone has their deafult set to white.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Zealot virginiamonkeys's Avatar
    Join Date
    Jun 2003
    Location
    Stafford, Virginia, USA
    Posts
    123
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I first tried
    div id="noprint"
    then
    span id="noprint"
    then
    div name="noprint"

    and a host of combinations of the above. For 8 hours. I only did this one element of this per page. I also tried span class="noprint".

    I could get certain textual elements to disappear in print, so I know I was doing it correctly, but any element in the javascript would not disappear.

    However, if I went the the javascript and modified the actual variables that control the wording of the menu, I could make them disappear in print by adding HTML to the menu items and span classing them into the "noprint" category.

    However, when I did that, the items on the menu would not be centred properly and looked out of place.

    So I either need:
    1. A way to hide this menu during print with CSS (tried this extensively)
    2. A way to hide this menu during print with javascript (tried this a bit)
    3. A way to modify the existing javascript so the menu items hide during print, but still look centered properly (tried this a bit)
    4. Or some other solution. I can't think anymore.


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
  •