css & printing pages

Discussion in 'HTML' started by Leslie, Nov 22, 2003.

  1. Leslie

    Leslie Guest

    I'm in the process of converting a large site (school district) from
    table based layout to css. Prior to implementing the css pages I
    didn't know that a lot of the pages are being printed within the
    district for demonstration and/or editing/proof reading purposes.

    On the pages that are linked to an external stylesheet I've changed
    that code to read:

    <link rel="stylesheet" href="curriculum_style.css" type="text/css"
    media="screen">
    <link rel="stylesheet" href="curriculum_style.css" type="textcss"
    media="print">

    Prior to adding "screen/print" the pages printed in a long narrow box
    down the center of the page, now they print pretty much the same as
    the page is seen online.

    What I haven't been able to figure out is what code I need to add to
    the pages that aren't linked to an external stylesheet, but have
    inline code. My plan is to eventually have all pages linked to
    external stylesheets, but for now I need to address my problem of the
    proper syntax for inline code.

    One of the pages with the external stylesheet is at:
    http://www.clinton.k12.ia.us/curriculum_pages/curriculum_social_studies.html

    The page with inline code is at:
    http://www.clinton.k12.ia.us/chs.html

    Both pages validate as HTML 4.01 Transitional and CSS, but feel free
    to critique my code if you'd like. Constructive criticism is always
    welcome and appreciated!

    Thank you,

    Leslie
     
    Leslie, Nov 22, 2003
    #1
    1. Advertising

  2. Leslie wrote:

    > <link rel="stylesheet" href="curriculum_style.css" type="text/css"
    > media="screen">
    > <link rel="stylesheet" href="curriculum_style.css" type="textcss"
    > media="print">


    First of all, I hope that that second one is "text/css" and not "textcss"
    and you just made a mistake copying it over from the real site!

    > http://www.clinton.k12.ia.us/curriculum_pages/curriculum_social_studies.html


    Oh no, the mistake is on the real site too.

    > but for now I need to address my problem of the
    > proper syntax for inline code.


    You can't really. Inline style applies to *all* media -- it can't be fine
    tuned for screen, print, handheld, tv, projection, etc, etc...

    You would be better off concentrating your efforts on:

    > My plan is to eventually have all pages linked to
    > external stylesheets


    And better yet, get rid of that "s" from the end -- link all the pages to
    one style sheet. That way, a change of:

    body {
    background: white;
    }

    to:

    body {
    background: aqua;
    }

    will effect the whole site instead of just one page! (Although an aqua
    background is probably a mistake!)

    Getting back to:

    > <link rel="stylesheet" href="curriculum_style.css" type="text/css"
    > media="screen">
    > <link rel="stylesheet" href="curriculum_style.css" type="textcss"
    > media="print">


    One of the best things about CSS (and there are many great things about
    CSS!) is that you can use *different* styles for different media. By using
    something like this:

    <link rel="stylesheet" href="master_style.css" type="text/css"
    media="screen,projection">
    <link rel="stylesheet" href="print_style.css" type="text/css"
    media="print">

    You can make the page look different printed and on screen. For example,
    on print, you might want to hide the site navigation areas using the CSS
    "display:none;" property. Why? Because you can't click links on a piece of
    paper!

    > Both pages validate as HTML 4.01 Transitional and CSS, but feel free
    > to critique my code if you'd like. Constructive criticism is always
    > welcome and appreciated!


    Well, I hope you saw my criticism as constructive -- it was certainly
    meant that way.

    Regards,

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Nov 22, 2003
    #2
    1. Advertising

  3. Leslie

    Leslie Guest

    On Sat, 22 Nov 2003 19:15:03 +0000, Toby A Inkster
    <> wrote:

    >Leslie wrote:
    >
    >> <link rel="stylesheet" href="curriculum_style.css" type="text/css"
    >> media="screen">
    >> <link rel="stylesheet" href="curriculum_style.css" type="textcss"
    >> media="print">

    >
    >First of all, I hope that that second one is "text/css" and not "textcss"
    >and you just made a mistake copying it over from the real site!
    >
    >> http://www.clinton.k12.ia.us/curriculum_pages/curriculum_social_studies.html

    >
    >Oh no, the mistake is on the real site too.


    That was a definite OOPS! Wonder why if validated and print previewed
    correctly?

    Anyway, I've fixed that and now find that it print previews as a
    narrow box down the middle of the page. Could that be because I'm
    using the same stylesheet for screen & print? I know I should be
    using separate sheets for each type of media, but this was meant to be
    a quick fix for a problem I didn't know existed until this week.
    >
    >> but for now I need to address my problem of the
    >> proper syntax for inline code.

    >
    >You can't really. Inline style applies to *all* media -- it can't be fine
    >tuned for screen, print, handheld, tv, projection, etc, etc...
    >
    >You would be better off concentrating your efforts on:
    >
    >> My plan is to eventually have all pages linked to
    >> external stylesheets

    >
    >And better yet, get rid of that "s" from the end -- link all the pages to
    >one style sheet.


    *snip*

    Right now I'm working on each section of the site having its own
    stylesheet. I'm nowhere near proficient with css yet to be
    comfortable with only one stylesheet for the entire site because each
    dept./school has different criteria for the way they want their pages
    laid out. All are very similar and eventually I'll have them all
    conform to the same layout, but right now I'm just trying to keep my
    head above water with the request for updates as they come in. It's
    either feast or famine - a week or two with no requests (that's when I
    work on converting to css) or a few weeks with enough requests to keep
    an army of people busy. :)
    >
    >Getting back to:
    >
    >> <link rel="stylesheet" href="curriculum_style.css" type="text/css"
    >> media="screen">
    >> <link rel="stylesheet" href="curriculum_style.css" type="textcss"
    >> media="print">

    >
    >One of the best things about CSS (and there are many great things about
    >CSS!) is that you can use *different* styles for different media. By using
    >something like this:
    >
    ><link rel="stylesheet" href="master_style.css" type="text/css"
    >media="screen,projection">
    ><link rel="stylesheet" href="print_style.css" type="text/css"
    >media="print">
    >
    >You can make the page look different printed and on screen. For example,
    >on print, you might want to hide the site navigation areas using the CSS
    >"display:none;" property. Why? Because you can't click links on a piece of
    >paper!


    That's definitely my goal, but as mentioned above this different media
    concerns with css is something I just learned about this week. Right
    now using the same stylesheet for screen & print was a quick fix, but
    will change as I learn more about css and its possibilities.

    As green as I still am at css I can't imagine ever going back to using
    tables for layout.
    >
    >> Both pages validate as HTML 4.01 Transitional and CSS, but feel free
    >> to critique my code if you'd like. Constructive criticism is always
    >> welcome and appreciated!

    >
    >Well, I hope you saw my criticism as constructive -- it was certainly
    >meant that way.


    I certainly do, and I'm most appreciative! Thank you!

    Leslie
     
    Leslie, Nov 22, 2003
    #3
  4. Leslie

    jake Guest

    In message <>, Leslie
    <> writes
    [snip]

    >
    >One of the pages with the external stylesheet is at:
    >http://www.clinton.k12.ia.us/curriculum_pages/curriculum_social_studies.html
    >
    >The page with inline code is at:
    >http://www.clinton.k12.ia.us/chs.html
    >
    >Both pages validate as HTML 4.01 Transitional and CSS, but feel free
    >to critique my code if you'd like. Constructive criticism is always
    >welcome and appreciated!


    Putting the school details (phone/fax/address/NAME) in a graphic and
    displaying them as a background makes them invisible to non-visual
    browsers/screen-readers.
    >
    >Thank you,
    >
    >Leslie


    --
    Jake
     
    jake, Nov 22, 2003
    #4
  5. Leslie

    Leslie Guest

    On Sat, 22 Nov 2003 21:05:17 +0000, jake <>
    wrote:

    >In message <>, Leslie
    ><> writes
    >[snip]
    >
    >>
    >>One of the pages with the external stylesheet is at:
    >>http://www.clinton.k12.ia.us/curriculum_pages/curriculum_social_studies.html
    >>
    >>The page with inline code is at:
    >>http://www.clinton.k12.ia.us/chs.html
    >>
    >>Both pages validate as HTML 4.01 Transitional and CSS, but feel free
    >>to critique my code if you'd like. Constructive criticism is always
    >>welcome and appreciated!

    >
    >Putting the school details (phone/fax/address/NAME) in a graphic and
    >displaying them as a background makes them invisible to non-visual
    >browsers/screen-readers.


    Hadn't thought of that. Thank you! With the pages that are table
    based the graphic has minimal contact info in the alt tag, but I can
    see that the contact info should be made accessible to all browsers.

    Thanks for the heads up!

    Leslie
     
    Leslie, Nov 22, 2003
    #5
  6. Leslie

    Eric Bohlman Guest

    Leslie <> wrote in
    news::

    > That was a definite OOPS! Wonder why if validated and print previewed
    > correctly?


    It validated because the HTML DTD just says that the content of a <link>'s
    type attribute must be CDATA, which in SGML terms means pretty much
    anything. A validator can only check that the structure is correct, not
    the content.

    The correct print preview was probably because the browser wasn't applying
    any external stylesheet during printing.
     
    Eric Bohlman, Nov 23, 2003
    #6
  7. Leslie

    Adrienne Guest

    Gazing into my crystal ball I observed Leslie <>
    writing in news::

    > That was a definite OOPS! Wonder why if validated and print previewed
    > correctly?
    >
    > Anyway, I've fixed that and now find that it print previews as a
    > narrow box down the middle of the page. Could that be because I'm
    > using the same stylesheet for screen & print? I know I should be
    > using separate sheets for each type of media, but this was meant to be
    > a quick fix for a problem I didn't know existed until this week.


    Actually, I use the same stylesheet for media and print, but I use @media
    print. Like this:

    /* all except print */
    #footer {border:1px solid #000;}
    /* end all except print */
    /* for printing */
    @media print {
    #footer {display:none}
    }
    /* end printing */


    --
    Adrienne Boswell
    Please respond to the group so others can share
    http://www.arbpen.com
     
    Adrienne, Nov 23, 2003
    #7
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jon B
    Replies:
    7
    Views:
    7,514
    =?Utf-8?B?SmFzb25DaG9p?=
    Jan 30, 2006
  2. JustSomeGuy
    Replies:
    13
    Views:
    514
    msalters
    Dec 9, 2004
  3. iffy agbim
    Replies:
    1
    Views:
    110
    Mark Andrews
    May 24, 2004
  4. iffy agbim
    Replies:
    0
    Views:
    104
    iffy agbim
    May 21, 2004
Loading...

Share This Page