homepage Welcome to WebmasterWorld Guest from 54.226.213.228
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Linking to a print, screen, etc style sheet?
ewwatson




msg:3603887
 11:48 am on Mar 18, 2008 (gmt 0)

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

Hi y'all, I got another one for you. Above is what is in my head of my html - in this order. Obviously I want to link to a print style sheet as well. My question is not so much the print one (thats pretty strait forward), but the other. Am I assuming correct that the top one will give css styles to all media? This how I have always had it so I know it works , but know I am adding the print one so I want to be sure it is correct. Is there anything else that I should be adding to the top css link now that I have the print one as well - like media="screen"? Thanks!

There are currently ten defined media types:

* all
* aural
* braille
* embossed
* handheld
* print
* projection
* screen
* tty
* tv

Also here is my print.css - how does it look to you? Anything obvious I should add or take away?

body {
background: white;
font-size: 100%;
}
#wrapper, #content {
color: black;
border: 0;
width: auto;
margin: 0 5%;
background: transparent none;
}
h1 {
margin: 0 0 25px;
font-size: 130%;
}
#nav {
display: none;
}
#footer li {
display: none;
}
#footer p {
margin: 40px 0 0;
}
a:link, a:visited {
color: black;
text-decoration: underline;
}

 

jelle76




msg:3603893
 12:01 pm on Mar 18, 2008 (gmt 0)

Hi,

[note: I am by no means a css guru..]

CSS includes look good. It should work as you have it. However: Keep in mind that if you do not specify the display type in the include that it will be included in all displays. So any formatting specified there, will be included in the print too.

I would use 'em' instead of pixel sizes. This means that if a person uses a larger font, or a printer with a higher resolution etcetc, that the header margins are adjusted.

In your print file you might want to add some display: none items for things like menus etc; this will provide the user with a very clean look and feel of the site. Suggestion: Instead of your normal header and footer, why not make one specific for printing, and hide the normal page header and footers?

J.

lavazza




msg:3604367
 6:54 pm on Mar 18, 2008 (gmt 0)

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

Am I assuming correct that the top one will give css styles to all media?

It quite possibly will...

To turn 'quite possibly' into 'probably', you might try adding media="all"

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

swa66




msg:3604519
 9:29 pm on Mar 18, 2008 (gmt 0)

You can include in your one and only CSS file lines such as:
@media print {
h1.title {padding: 0;}
.caption, .navbuttons, .buttons, .interactive, #menu, #crum {display:none;}
}

That way you reduce a HTTP request, and speed up things overall.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved