css & printing pages

L

Leslie

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
 
T

Toby A Inkster

Leslie said:
<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!

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,
 
L

Leslie

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!


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.
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:


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:


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.
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
 
J

jake

In message <[email protected]>, Leslie
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.
 
L

Leslie

In message <[email protected]>, Leslie


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
 
E

Eric Bohlman

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.
 
A

Adrienne

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 */
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top