/    Sign up×
Community /Pin to ProfileBookmark

Hi,

I have just discovered CSS (yes, I’m new to web development!) and it’s brilliant! I have got a page that I have divided into four using the <div> tags. a header, footer, left hand menu section and a main display section.

Now – This looks great on screen. But how do I go about making a printable version? I am happy to put a link in the bottom corner somewhere saying “printable version” or something but I don’t really want it to print the menu. Just some of the header, the main display area and the footer details.

I am aware of the @media functions of CSS. So I guess my question is largely stylistic. Can I use one style sheet which will avoid the need for a printable version of each page? Am I able to use this style sheet to exclude form the printing certain items of the header and footer?

Does any of this make sense?

I have a website – [url]www.p-c-a.co.uk[/url] which my new site will replace. I am in the early stages of producing a new page template which is at [url]www.p-c-a.co.uk/template.htm[/url]
and my stylesheet is [url]www.p-c-a.co.uk/pcastyle.css[/url]

Thanks.

to post a comment
CSS

1 Comments(s)

Copy linkTweet thisAlerts:
@jogolOct 07.2005 — [code=html]<link rel="stylesheet" type="text/css" media="screen" href="/css/screen.css"/>
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"/>[/code]


now in your print.css give elements which you dont want to have printed the property display: none; and make some more custom changes so the whole thing looks good on paper.

a pretty good examply is http://www.simplebits.com/css/print.css
×

Success!

Help @Andrewpca spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...