|
CSS - Possible To Add Print Styles To An External Style Sheet?
I've been involved in building an intranet site with about 1200 pages. Now that it's been launched we've found problems in printing many of the pages - there are blank pages printing before the content, probably because of floated divs being pushed down when the width is restricted to A4. (That's a guess).
Now I know that what we should have done was create a print style sheet which would have solved this problem easily, but if we do that we'll have to place the link to it in every page, which involves quite a lot of signing-out of 1200 pages etc. I'm prepared to do that if there isn't another way but I wondered if there's any way the existing external style sheet can be amended so it loads (imports) the print styles dependent on some statement or other. I'm doubtful, but if anyone knows of a method that involves editing the one stylesheet rather than the 1200 pages I'd love to hear it! Similar TutorialsCan you have both inline styles AND a linked style sheet? would this cause confusion? Ok, I just started a new website. I have been putting all of the html on every page. So, when I change one small thing on my Nav Bar, I have to go to every single page and change it! There has to be an easier way, right? Isn't it by using external sytle sheets? I tried this code in my homepage, but it isn't working: Code: <head> <STYLE TYPE="text/css" MEDIA="screen, projection"> <!-- @import url(http://www.freewebs.com/ohhdanggggraphics/BASIC.css); --> </STYLE> </head> Basically on my site the only thing I want to change from page to page is the information in the center table. How would I do this? Thanks for your help My Website Hello I'm having trouble with displaying a background image in a div. It worked fine with embedded CSS but when I changed the CSS to external, the text loads but the bg image doesnt. I'll post some code to explain it... This is in the external style sheet: #navbgtop { position:absolute; left:38px; top:185px; width:194px; height:18px; z-index:2; background-image: url(images/navbartop.jpg); } and yes of course I have made the proper link to it in the <head> tag: <link rel="stylesheet" type="text/css" href="css/nav.css" media="all" /> For some reason the background image wont display. Any ideas? One more question also, does it matter if I use media="all" for the whole website? Or do I even need to bother using media=xyz ? I heard most browsers don't even read that as of yet. Hi folks, I am getting this error and it makes little sense to me. I am getting the following warning... Ensure web pages print well. No Print links or CSS print styles were found on the site. Usability.gov 2:9 , Add a CSS style sheet for print media, or include a print media section in the current style sheet. here is my code <link href="style.css" rel="stylesheet" type="text/css" media="screen, print"> Thanks once again in advance for any suggestion or help! whonoes I need to modify an external style sheet so that background images on each page can be changed. Please help Hi All, How can i apply style to following table? Class attribute is not working. following is the code. function links(){ var xmlDoc=new ActiveXObject("Microsoft.xmlDOM") xmlDoc.async="false"; xmlDoc.load("ticker.xml") ; xmlObj=xmlDoc.documentElement; nodes=xmlDoc.documentElement.childNodes; document.write("<table border=1 align=left >"); for( var count = 0; count<nodes.length; count++){ document.write("<tr>"); document.write("<td>"); document.write("<a href='" + (xmlObj.childNodes(count).getAttribute('URL')) + "'>" + (nodes.item(count).text) + "</a><br>"); document.write("</td>"); document.write("</tr>"); } document.write("</table>"); } Please guide me for the same. Thanks in advance Hey, I'm a CSS noob, and I'm having some trouble with centering the content of my page. When I have the coding as an internal style sheet the page is centered, but when I put it in an external style sheet it looks the exact same...except for that it's left aligned. All I do is copy and paste it, but it change the layout around? Any tips? Hi. In my external style sheet i have this: Code:
body
{
margin-left: 100;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
I am completely new at CSS and am only doing it because supposedly my tables are out of fashon! Thanks Matt I hardly ever use css for thimgs like backgrounds, but I have a freelance client that has alot of interesting ideas about how a good website should look so I'm trying to make him happy. When I have: body { background: url('resources/assets/background.jpg') no-repeat bottom left; } in the extranal css it doesn't work. If I put it into the page it works fine. None of the online css resources I've looked at mention why this should be. I've even tried using the complete http://www.server.com/blah/blah/ address and I get the same results. Does this just not work from an external css, or am I missing something? Thanks y'all. I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? I am trying to use the following in my external style sheet for my links: Code: a:link, a:visited{
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
a.big {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.big:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
a.bigger {
color: #006699;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
a.bigger:hover {
color: #006699;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
My problem is that I can't get big & bigger to work properly in Internet explorer. When I hover over the link it goes to its proper size but when not hovering it stays at 11px. Hi, I have a XHTML 4.0 file and CSS in a separate file. The CSS if included within the <head> section of the HTML file works correctly and displays the page with the right formatting. However, when I move the CSS to a separate file and just use the <link> tag within the <head> section of the HTML file to link to this CSS file, the formatting is not applied. I am not sure what to do. Any quick help is greatly appreciated. Thanks xworder Hi... I have a slightly confusing problem. I have an external sheet which all works fine except the colour of links before they are visited, active, etc. (It worked fine but one day stopped without any intervention on my part that I know about!) The active link, visited link and hover link colours work as required and as specified in the external sheet, but it is the original link that does not, defaulting to the, erm, default colour. My external sheet is as follows: body {background-image: url("images/logo.jpg")} type="text/css"; a:link {color: #c0c0c0;} a:visited {color: #FF80FF;} a:hover {color: #FF00FF;} a:active {color: #FF80C0;} h1.c1 { text-align: center; font-size: 46pt; color: #bb8ec8 } h1.c2 { margin-left:130px; font-size: 26pt; color: #bb8ec8 } h4 { text-align: center; color: #b15fb8 } Any idea why is isn't working? Cheers Hi, I have a style sheet which works fine on my mac, but not on my PC in IE7. I know how to substitute stle sheets based on browsers, but here's the issue at hand. I have 2 styles for the <ul> which follow: ul.nav{ clear:both; width:192px; padding: 0px; display: block; background-color:#000000; margin-top:-11px; margin-left:0px; float:left; } and ul.bodyText{ font-color:#000000 font-size:12px; font-family:helvetica, arial, sans-serif; } it appears that "ul.bodyText is taking on the characteristics of "ul.nav" Or, for some reason, the <ul><li>'s in my Mac look fine, but on my PC, they do not have the indent preceeded by the dot. Here's the site http://www.caillouette.com/NewestSelvan/English/aboutUs.php can anyone tell me why? thanks -Sean Hi guys, done a few other pages (such as reports and things e.t.c which are basically white pages with text and i get the rightfloat that is on my normal pages appearing all the time!?!? Anyone give me an idea why? tried it on a blank page and still nothing... black page here >>> http://www.generating-sets.com/showissue.php CSS below! Charlie PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(images/newback.jpg); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: sans-serif; font-size: .7em; } #wrap { background-image:url(images/newback150px.jpg); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} div#navbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#formbox { color: #000000; padding: 2%; border: #000044 solid 1px; } div.displaybox { color: #000000; padding: 2%; margin: 1%; border: #000044 solid 1px; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left; font-size: 1.1em; } div#userbar {padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px} div#topleveladminbar { padding: 0%; text-align: center; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-bottom: 0px; border-bottom: solid #000000 1px } #header { background-color: #000044; background-image:url(images/wel.jpg); width: 100%; background-repeat: repeat; border-bottom: 2px #000000 solid; color: #ffffff; margin:0; padding:0; height:100px; } #left { float:left; width:149px; background-image:url(images/newback.jpg); background-repeat: repeat; color: #ffffff; text-align:center; background-color: #000044; border-right: 1px #000000 solid; } #main { position:relative; margin-left:200px; } #content { text-align:center; padding:4px; margin-right:200px; margin-bottom:150px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000044; border-top: 2px #000000 solid; margin:0; padding:0; background-image:url(images/newback.jpg); background-repeat: repeat; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 0%; text-align: left; height:150px; background-image:url(images/newback.jpg); background-repeat: repeat; background-color: #000044; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -180px; border: 2px #000000 solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } h1 {font-size: 1.4em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h2 {font-size: 1.3em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h3 {font-size: 1.2em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h4 {font-size: 1.1em; font-family: Times, "Times New Roman", serif; font-weight: bold; text-align: left;} h5 {font-size: 1em; font-family: Times, "Times New Roman", serif; font-weight: bold; } a:link {color: #ffffff; text-decoration: underline;} a:visited { color: #ffffff; text-decoration: underline;} a:hover {color: #ffffff; background-color: #0000FF; text-decoration: underline;} .displaybox a:link {color: #0000FF; text-decoration: underline;} .displaybox a:visited { color: #0000FF; text-decoration: underline;} .displaybox a:hover {color: #000044; background-color: #EEEEEE; text-decoration: underline;} .redtext { color: #ff0000; font-weight: bold; } .greentext { color: #00ff00; font-weight: bold; } Hi all! Hope you are well! Anyway, I have the following in my style sheet.... should this work? PHP Code: td { text-align: centre; } or not? Hi there. I have a print style that won't display images when printing.. img {display: none;} I have a certain page where I need the print style sheet but will like the images to print. How can I override the print style for the images? Please can anyone tell me why my style sheet is not applying to this page http://www.on-line-biz.com ? A bit of background. I've just started an IT degree and the first assignment is to create a web page about myself. (I'll post it here once it's up and running). We've got to use a separate as opposed to inline style sheet, and our pages must be validated as part of the assessment. I don't have any trouble validating my XHTML (strict) code but even the simplest style sheet (only a single command) get's rejected. I'm also following the rules set out in the text I've got (The Web Wizards guide to XHTML by Cheryl. M. Hughes). Question. Do I need a DOCTYPE statement in a style sheet? Hello.... As I'm sure many that post to this board are, I'm pretty new to CSS. I've been reading about it for years, studying it for several months, dabbling with it for a few weeks, and writing my first useful, semi-complex CSS page for about 2 days.... My page looks exactly like i want it to (at least with my half dozen little tests so far) in Firefox. i started with no CSS, then added more and more, trial and error, until I got it just how I like it. Then I opened it in IE! OH BOY! It doesn't even look close to what it is in FF!!!!! I've read enough about CSS to assume that Firefox rendered it as it's supposed to be rendered, and IE did whatever was convenient for them. Here's the page: http://www.triptrop.com/main.html My intent: I want a header, footer, and 2 equal columns split right down the middle. Each column will contain any number of blocks one right after the other, and independent of the blocks in the other column. Don't pick on my about the colors, I'm just messin around right now Any help would be helpful (by definition) |
|||||||