Format for Print using MEDIA="print"

M

Maria

I am using Front Page 2002 and have a problem regarding borders:

I have a border on the top of my page which contains an image. When I try to
print the page, the printed version has a blank space where the border would
be in the screen view. I saw in other posts that you can prevent printing
things using CSS MEDIA="print". My question is:
Since the picture in the border does not show when printing anyway, how do I
get rid of the blank space it leaves on the printed version? How do I refert
to the border when FrontPage refers to it as
<meta name="Microsoft Border" content="t">

Thank you for your help!

Maria
 
C

chris leeds

on your print style sheet you would just set a display property of "none"
for the blank area.

I've got my site rigged to print and screen differently. I'm using two
separate style sheets. go to www.nedp.net and hit file print preview and
you'll see what's happening.

if you do view/ source you'll see links to the style sheets and their
arrangement to be called for different media. feel free to follow the links
to the style sheets and download them to your computer.

It's an OK example. I'm by no means a .css virtuoso but the arrangement
works OK.

HTH
 
M

Maria

Hi HTH,

Thank you for the tips. I have never used style sheets before, so forgive me
if I say something silly.

Do you mean that I have to creat one extra page all together (what you
called print style sheet)?
What extension do I save it as? htm? css?

I tried to go to includes/print.css and FrontPage opened on my machine with
a code page with no option to view it as "Normal", "HTML" or "Preview". So,
how do you put content on those pages? Or is it picking up the content (text
only) from the screen ?
If it doesn't pick up he content from the page seen on the screen, what do
you do with pages that you change the content all the time? Do you have to
make changes in 2 pages?

You mentioned that I can download you style sheets to my computer. Is the
print style sheet one that can be used universaly with any page?

Thank you for your help!

ps. You have a very nice site!
 
C

chris leeds

Hi, answers (kind of) inline. ;-)

--
The email address on this posting is a "black hole". I got tired of all the
spam.
Please feel free to contact me here:
http://nedp.net/contact/
--


Maria said:
Hi HTH,

Thank you for the tips. I have never used style sheets before, so forgive me
if I say something silly.
Click to expand...

Everybody starts somewhere!
Do you mean that I have to creat one extra page all together (what you
called print style sheet)?
Click to expand...

Not at all, that's the best part about using style sheets to control this
stuff. your page remains the same. you just link two style sheets to it.
one for print, one for everything else. (you can provide additonal style
sheets for mobile type pocket pc, audible browser, even braille!) but for
this situation just two would do.
What extension do I save it as? htm? css?
Click to expand...

save it as .css
I tried to go to includes/print.css and FrontPage opened on my machine with
a code page with no option to view it as "Normal", "HTML" or "Preview".
Click to expand...

that was probably the "style sheet".

So,
how do you put content on those pages? Or is it picking up the content (text
only) from the screen ?
Click to expand...

the content on the style sheets can be put there with frontpage, notepad, or
virtually any other editor. it's not really "content" it's more like rules
to tell the browser how to display certain elements at certain times.
If it doesn't pick up he content from the page seen on the screen, what do
you do with pages that you change the content all the time?
Click to expand...

once you make a style sheet you can just link it to as many pages (htm or
other) as you like. you will only have to do the style sheet once. (you
will probably revisit it to add new rules or refine things)

Do you have to
make changes in 2 pages?
Click to expand...

Nope, just the htm page. the style sheet's treatment of html will be
automatic.
You mentioned that I can download you style sheets to my computer. Is the
print style sheet one that can be used universaly with any page?
Click to expand...

Not really. I'm using it to not display the top banner are and the side
menus. so i'm adding lines for display: none to the classes .top and .left
etc.
Thank you for your help!
Click to expand...

this is really just scratching the surface. you may want to look at
www.alistapart.com www.csszengarden.com and others. If you don't mind
buying books, the absolute best i've ever seen is html utopia at
www.sitepoint.com I don't use what i learned from it to go "tableless" but i
do use what i learned to "style" my tables and other html elements.

HTH (means: Hope This Helps).
 
M

Maria

It is all starting to make a lot of sense now!
That is a great solution, specialy for the fact that you only have to do
once and there is no worries about having different versions
(printer-friendly) of your web to work with!

I imported your print.css page and am trying to adapt it to use on my web.
However the "blank" spot left behind by the microsoft border is still
showing.
I used

..top { display: none;} and also

..borders {
display: none;
}

#borders {
display: none;
}

but is still shows!

any clues?
I have not uploaded the page with the style sheet yet, but you can see the
problem at www.clinicaldevice.com/Seminars.htm

Thanks!

Maria
 
C

Cheryl Wise

try adding visibility: hidden; or visibility: collapse; to remove the space
taken up by the div you are hiding.

..top{
display: none;
visibility: collapse;
}
 
C

chris leeds

generally visibility: hidden takes up space but doesn't show the content.
display: none doesn't take up space. I think its time for the poster to
show us the url.

the thing is if she's just styling borders she's not catching the content.
she'd need to add a class or ID to the table, cell, etc. itself so that the
style sheet would have a "point of reference".
 
M

Maria

Hello Everyone,

I must have something really wrong with the page I am trying to format for
print, beacuse I tried the visibility: collapse and still id does not work.
I did give the URl on my last post, but as I said, I have not uploaded the
page with the style sheet in the make we are talking about. In any case,
here is the URL again
http://www.clinicaldevice.com/Seminars.htm

By the way, how can you assign an ID to a table?
This might have something to do with my problem, since my border contains a
table and the picture is inserted in one of the cells of the table.

Thanks,

Maria
 
C

Cheryl Wise

Problem is you have inline html code that is overwriting your style
information:

width="80%" height="175"

Inline styles always overwrite any other style settings. That's what the
Cascade in CSS means.

as for as assigning as ID to a table all you do is <.table id-name" >.
 
M

Maria

Finnaly! Sucess!

Cheryl, I tried changing the height from 175 pix. to 100% but it did not
make any differece. I tried not specifying the height and that mede the
border get real thin and the picture behind woul only have the very top
visible.
So I tried assigning an ID to the table ant added this to the print.css
#banner {
display: none;
}

It worked!

Thank you both, Cheryl and Chris for all your help. I feel like a learned a
lot this past 2 days!
 
C

chris leeds

it's a very cool way to work. I recommend you check out some of the links I
gave you, especially csszengarden to see what changing only a style sheet
can do to the presentation of a web page. it's mind-blowing....at least it
is to me. ;-)
 
Top