Topic: @Page and Media Pages that link to <a href="https://ozoneasylum.com/backlink?for=10742" title="Pages that link to Topic: @Page and Media" rel="nofollow" >Topic: @Page and Media\
 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 05-23-2002 20:31 Edit Quote

Hello,
I'm messing around with the *media*, trying to set margins and such of the printed document (printing from IE6).
I have @Page defined at the top of my stylesheet, and it is doing nothing (has no effect) to the printed material.
Errr... what to do?

Here is what my @page deff looks like:
@page { size 8.5in 11in landscape; margin: 5cm }

Thanks,
Karl
kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

 IP logged posted posted 05-23-2002 20:35 Edit Quote

I don't know what to do, but I do know where to look: www.alistapart.com

kuckus (cell #282)
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 05-23-2002 20:52 Edit Quote

Wow... very complex stuf over there! Say, what does the # "pound" symbol represent (here is an example):

#menu a:active {
color: #ffe;
text-decoration: underline overline;
background: transparent;
font-weight: bold;
}

And what is a "menu" class?

Karl
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 05-23-2002 20:58 Edit Quote

By the way, this is where I'm at:

[a]http://www.w3.org/TR/REC-CSS2/page.html[/a]
( trying to figure out how to control the printed output )

I'm trying to do something as simple as controlling the page-margins... I don't get it.

Karl
kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

 IP logged posted posted 05-23-2002 21:23 Edit Quote

I think the easiest way is having two seperate files which contain the style sheets: One for the screen and one for printing.

Add these two lines between the <head> and </head> tags of your main HTML document to load the two files:

<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="printer-styles.css" media="print" />

Note that because you set media to all in the first line, all the normal styles from the first file appear on the printer, too, unless you overwrite them in the second one. So if you only wanted different margins for the printer, the only line in printer-styles.css would be "body { margin: whatever; }".

Read the CSS tutorials over at the GurusNetwork to get answers to all your other questions: http://www.gurusnetwork.com/tutorials/coding.html

And: Have a look at our new FAQ!

Hope that helps a bit,

kuckus (cell #282)

[This message has been edited by kuckus (edited 05-23-2002).]
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 IP logged posted posted 05-23-2002 21:39 Edit Quote
quote:
Wow... very complex stuf over there! Say, what does the # "pound" symbol represent (here is an example):

#menu a:active {
color: #ffe;
text-decoration: underline overline;
background: transparent;
font-weight: bold;
}

And what is a "menu" class?



If you have an HTML element somewhere in your page with an ID set, such as:

<div id="menu">blah blah blah</div>

Then the style sheet with #menu as its selector will apply only to that <div> tag and its contents.

There is no menu "class" predefined. They're just saying to apply that style sheet to all active <a> tags within the html element that has "menu" as its ID.

Note that an ID is only allowed to be set on one HTML element. For instance, this is illegal:

<div id="something"></div><p id="something></p>

but this is fine:
<div id="something"></div><p id="somethingdifferent"></p>
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 05-23-2002 21:59 Edit Quote

Wow, thanks for the great response!

If assigning page margins is as easy as described, then what is all the information pertaining to Paged Media [13]? Here is that link:
http://www.w3.org/TRREC-CSS2/page.html

...and - is it possible to remove the footer (change the footer) of the printed document?

Karl
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

 IP logged posted posted 05-23-2002 22:01 Edit Quote

My last *post* sounded a little snooty... not meant at all, sorry.
brucew
Paranoid (IV) Inmate

From: North Coast of America
Insane since: Dec 2001

 IP logged posted posted 05-24-2002 01:47 Edit Quote

I don't have direct experince here, so this is could be wrong. It's my understanding of the theory.

"Paged" media does not necessarily mean "printed paper" media. It's my understanding that PDAs and wireless browsing devices refer to one screenful of content as a "page", no matter what the size of the file being displayed. (And that long files are managed as a stack of pages, like a deck of cards.)

That's why the media="print" works. It's for printed paper pages, not logical display pages. @page is for logical displays, not paper, so it doesn't work for what you wanted.

(edit: typos)

"the most incredible feats are often accomplished by
those who have had the most incredible challenges"

[This message has been edited by brucew (edited 05-24-2002).]
brucew
Paranoid (IV) Inmate

From: North Coast of America
Insane since: Dec 2001

 IP logged posted posted 05-24-2002 01:52 Edit Quote

Missed part of your last message.

quote:
...and - is it possible to remove the footer (change the footer) of the printed document?



Yes. Put your footer in its own DIV. Format it the way you like for the screen display. In your second stylesheet (media="print") redefine that DIV as:
{
display: none;
}

Now you see it, print it and you don't.

"the most incredible feats are often accomplished by
those who have had the most incredible challenges"


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Hint: Press ALT+[1-9] to quickly quote one of the previous posts in whole.
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu