|
CSS - Print Settings
I need to change some page setup setting for print like orientation, headers and footers
Is it possible to define it in CSS. Similar TutorialsWe're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded Hi guys .... I've been all over google looking for the answer and nothing I've tried works. I'm trying to make a print-friendly css page but my browsers (FF and IE7) both ignore the CSS and apply their own standards to it no matter what I do, it's driving me positively INSANE because it feels like I've done everything according to the instructions I found online for print CSS. Could you please take a look at my code and make some suggestions? You'd be saving my sanity. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)" lang="en" xml:lang="en"> <head> <title>CLOColors3</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="mainstyle.css" type="text/css" /> <link rel="stylesheet" href="mainstyleprint.css" media="print" type="text/css" /> the print css: Code:
@media print {
html{
height:auto;}
body{
background-color:#FFF;}
#header{
display:none;}
#body{
position:relative;
background-color:#FFF;
background-image:none;
height:auto;
width:auto;
left:0px;
top:0px;
z-index:0;
padding-bottom:0px;}
#textbox{
position:relative;
overflow:visible;
float:none;
margin-left: 0px;
top: 0px;
width:auto;
bottom:0px;
background-color:#FFF;
border:hidden;
border-color:#FFF;
z-index:0;
padding:0px;}
#textbox img{
display:none;}
.searchbar{
display:none;}
#linkbar{
display:none;}
.map{
display:none;}
.video{
display:none;}
#linktext{
display:none;}
#clear_both{
display:none;}
#menu{
display:none;}
#footer{
display:none;}
}
Currently the main CSS is being used and none of the elements I set to be "hidden" are hidden. Help!!! UPDATE: Ok, so IE seems to be PARTIALLY responding to the print CSS. It responds to all the "display:none;" commands but refuses to format the #textbox div according to my instructions, a border persists and the div has an overflow scrollbar for some reason. Firefox is still unresponsive. I have pages the when viewed for print in Firefox, show the page going below the page margin and not continuing to the next logical printed page. This image below, shows better than I can explain. Has anyone ever seen this before?...Any ideas how to make it preview and print correctly? Hello Again, My new site design for www.everything.ie is finally coming together mostly due to the great help I've been getting here. The next little problem I need help with is this. Have a look here first: http://www.grahamvard.com/everything.html Look at the headings for the catagories (grey background with red writing). I'm trying to replicate them on my test site but can't quite get it right. Look here to see my attempts: http://www.eveythingfree.buildtolea...fieds/index.php It's basically alright but I want to make the grey headings boxes bigger so they occupy almost the full width of the 3 columns just like in the example page. Because this part of the page is controled by a php script which generates the text and layout, the only thing I can alter is the style sheet in this case the heading font, .cfmaincat Here's the piece of the .css that controls the heading: Code: .cfmaincat {
FONT-SIZE: 11px;
COLOR: #cc0000;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
TEXT-DECORATION: none;
background-color: #e9e9e9;
width: 100%;
height: 100%;
}
I can't work out what I need to change to fix this, I really hope some of you can. I'm sure it's fairly straightforward, I just don't know what to do. I tried increasing the padding but because the length of words of the heading vary, so too do the grey boxes generated this way. I need them to be all the same size, like in the design example. Many Thanks, Robert I've got an image placed inside a div tag where the div is set to a height and width of 100%. The div has a "fixed" position with a "left" value set to "-36px", which ensure's it shows up exactly where I want it to. Everything that I setup in the style sheet works fine with Firefox 1.5x; the problem - big surprise - is that it doesn't work at all in IE6. Basically what's happening in IE is that the scroll bars are still showing up (which I don't want to happen) and it doesn't appear to be recognising the negative-positioning either. I'm just now learning to use div tags so there's probably some trick I haven't figured out yet. Here's the code I'm using. Code:
<style type="text/css">
<!--
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: #566f5f;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
text-align: center;
}
#myTable {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;
left: -36px;
}
-->
</style>
</head>
<body>
<div id="myTable"><img src="images/picture.jpg" width="1071" height="738" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="812,437,828,463,1038,409,1018,390" href="mailto:info@email_address.com" alt="Contact Us" />
</map></div>
As I mentioned, it works great in FF but not in IE. If anyone has any ideas or suggestions it would be a massive help Thanks! Hello all! Is there a way to set a resolution % for a certain type of resolution size and any above that resolution to another specific % For example I want it to be: 1024x 768 : width : 90%; and anything higher than 1024x 768 to be 80% since 90% on a resolution higher than 1024 for my navigation is just too make of a banner. Please help/advice. Regards, Kingofqueens. Hi, I've been struggling for a long time now about how to create a CSS menu with opacity of whatever rating. If anyone can help me out by telling me how or a good code source place please please let me know. I found a software which costs a $139 and i really feel its not worth it. So if someone can please help me out. Thanks. Happy New Year! I'm having issues with my website in progress, http://www.vilardojardim.com/about.html Everything seems to be displaying fine in Firefox, Safari and Explorer 8.0.6, but the IE 'Compatibility View Settings' makes the layout go all wiggy. Is there any way of automatically turning this off? Or, can someone help me out with a way to adjust the CSS to avoid the problem altogether? Thanks in advance for any assistance. I've found out that IE and Firefox both handle CSS page structure differently. I have a CSS container of width: 740px Height: 960px and IE prints the page with extra spaces at the top and bottom while this same setting is a bit short both width and height wise in Firefox. How do I compensate for both two browsers by using the same CSS file? I don't want to create different CSS for each browser. I have FF 2.0 and IE 7. However, I assumed many of my users will still be using IE6. Any help is appreciated. I have done my best to GOOGLE this problem but am not coming up with anything. I'm fairly certain that there is some setting/code that I need to add in CSS that would make this error go away. When I view my site in INTERNET EXPLORER, the main content box is shoved down almost below the sidebar/nav menu. The site works fine in FIREFOX & CHROME. I was hoping someone could help me. I have attached a picture of what it looks like in IE. Hi, I have the definition of the <body> tag in my external CSS file as follows: body { background:URL("fundo5.gif"); scrollbar-arrow-color: yellow; scrollbar-base-color: black; scrollbar-dark-shadow-color: yellow; scrollbar-track-color: green; scrollbar-face-color: blue; scrollbar-shadow-color: white; scrollbar-highlight-color: silver; scrollbar-3d-light-color: black; } However, this settings do get displayed on IE 6.0 Do I have to set any other properties so that I can change the colors of the scrollbar? thanks in advance Daniel I would like to know if anyone has done something like this - I need to have the look and feel of a site totally configurable through a web interface. All data is going to be stored in a database and I would like to know whether I can autogenerate or update a style sheet based on data from a database. Has anyone done this? Or is this the wrong approach to take in such a case? I also have several clients using the same site, each needing to have their own configurations. I would like to avoid having to have a separate style sheet for each client if possible. Can the properties in a stylesheet be set dynamically on a session per session basis? I am using wordpress for my blog/site. I am using Freshnews theme from woothemes as the theme for the blog. Here is the link: demo.woothemes.com/freshnews The font is not that good and it is way too small and the spacing is bad (too congested). How do I change the fonts, size, spacing (line and paragraph) throughout the blog. I know I would have to change it somewhere in the stylesheet. But where exactly and how? And what are the ways to get this done? Should I install a font somewhere? Should I use webfonts (like google webfonts)? What is the advantage in using this? or what are the other ways? i have images, but i have this Code: * a {
text-decoration:none;
font-weight:bold;
color:#665637;
}
* a:hover {
color:#B39760;
border-top-style: double;
border-top-width: 1px;
border-top-color: #665637;
}
and my anchored images take on the hover property. how can i stop them from doing this and just stay as they were? Hi All, I'm new to the forum. My website's Index page is losing all my body font and color settings, though layout is correct. All of the subfolders' index pages and other pages throughout my website remain unaffected. I've sanity checked it all, and it validates OK. I have an email in to the webhost for some input, but I hoped to get some advice from other CSS-ers who might be in the know. My website is: NickiGreenwood.com I am a romance author and sideline-web-design-junkie. Any help, advice, or even a point in the right direction would be a huge, huge help. Thanks, all. Nicki Greenwood - Romance Author Hello all, I have been trying to get my website to comply with googles page speed and yahoo's yslow. I had 2 seperate css files one for print and one for screen and they wanted them combined. I searched and searched for a way to do this and well I am going to post here how I got things to work in hopes it helps someone else. <link href="style.css" rel="stylesheet" type="text/css" media="screen, print" > NOTE if I make it media="all" print does not work here is code for the main css file that combines the 2 into 1. NOTE also the print is NOT loaded until it is needed. @media screen { /* all screen CSS goes in here */ } @media print { /* all print CSS goes in here */ } U ask why a print.css file? simple it lets me force page breaks so images don't get cut in half. it lets me set a legable size font or larger than what is displayed on screen. Ok here is my problem... in the print.css I don't want to print my backround image. I want just a plain white background. I use a "sprite" to call picture frames for screen. These frames use part of my background image... thus they look bad printed. How do I in the print.css file tell it NOT to print this frame.png file? I assume I will use .noprint DISPLAY:none or something to that effect but where and how to impliment this is over my head and I cannot find any examples of how to do it. Thanks in advance for any suggestions or help whonoes Hi, All the content of my web page is in a table which is 760 pixels width. This is fine on the screen, but when printing, the right part is cut. I tried to set a new css print stylesheet <link rel="stylesheet" type="text/css" href="print.css" media="print"> to avoid this problem, but it is not working. I tried to change the margin and padding, but there is no change. I still have the same problem. I tried many different configurations, but none of them worked... I did probably something wrong. I know that the page is properly printed if I change manually the print setting (file -> page setting) margin to 5mm, but how can I do it with the css, in order than everybody who would like to print the page has the complete page printed? Could someone help me? Many thanks I have a print style sheet which has an undesired result. Apparently by default it prints the url (and the page title) at the top of each page. Can I tell it not to do that or is that a browser preference that can't be overridden with CSS? I have a three column layout page which looks fine in IE as well as Firefox. But if I try to print the page, it prints the entire page in one column. Also, backgrounds are not printed. Searching on google, it seems CSS is the cause behind this. I could not find any solution though. Here is my CSS. Code: html {overflow-y:scroll;}
body {
font-family: Arial, Helvetica, sans-serif;
color: #354963;
font-size: 8pt;
font-weight: normal;
padding: 0;
margin: 120px 0px 0 0;
}
#wrapper {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
background:#003333 url(/corporateBanner/corporateBanner.jpg) 0 0px;
width:100%;
height:100px;
font-size:8pt;
}
#bannerWrapper {
position:absolute;
top:0;
left:0;
z-index:2;
}
#bannerTitle {
position:absolute;
top:28px;
left:80px;
color:white;
font-size:26pt;
width:600px;
margin:0;
border:0;
font-weight:normal;
z-index:2;
white-space: nowrap;
}
.hiddenLabel {
display:none;
}
#topmainMenu {
position: absolute;
right: 0;
}
#topmainMenu a:hover {
text-decoration:underline;
}
#mainTabs {
position:absolute;
top: 82px;
left: -6px;
width: 600px;
margin: 0px;
padding: 0px;
}
#mainTabs ul li {
float: left;
padding: 0;
margin: 0px;
list-style-type: none;
}
#mainTabs ul li a, #mainTabs ul li a:visited {
font-size:8pt;
font-weight:bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width:105px;
text-align: center;
height:19px;
display:block;
}
#mainTab1 a:link, #mainTab1 a:visited, #mainTab2 a:link, #mainTab2 a:visited, #mainTab3 a:link, #mainTab3 a:visited, #mainTab4 a:link, #mainTab4 a:visited, #mainTab5 a:link, #mainTab5 a:visited, #mainTab6 a:link, #mainTab6 a:visited, #mainTab7 a:link, #mainTab7 a:visited {
background: transparent url(../images/tabs/primary/tabBG.gif) top left no-repeat;
color: #FFFFFF;
}
#mainTab1 a:hover, #mainTab2 a:hover, #mainTab3 a:hover, #mainTab4 a:hover,#mainTab5 a:hover,#mainTab6 a:hover, #mainTab7 a:hover {
color: #000000;
background-position: left -19px;
text-decoration: none;
}
#T1 #mainTab1 a:link, #T1 #mainTab1 a:visited, #T2 #mainTab2 a:link, #T2 #mainTab2 a:visited, #T3 #mainTab3 a:link, #T3 #mainTab3 a:visited, #T4 #mainTab4 a:link, #T4 #mainTab4 a:visited, #T5 #mainTab5 a:link, #T5 #mainTab5 a:visited, #T6 #mainTab6 a:link, #T6 #mainTab6 a:visited, #T7 #mainTab7 a:link, #T7 #mainTab7 a:visited {
color: #000000;
background-position: left -19px;
}
#subMenu {
position:absolute;
top:100px;
left: 0px;
margin: 0;
padding: 0;
background: #FFF;
height:15px;
width:100%;
}
#subMenu ul {
border: 0;
margin: 0;
padding: 0;
text-align: center;
}
#subMenu ul li {
float: left;
padding: 0;
margin: 0px 10px 0px 7px;
list-style-type: none;
}
#subMenu ul li a {
float: left;
padding: 0;
margin: 2px 1px 0px 0px;
color:#000066;
text-align: center;
display: block;
line-height: 16px;
font-size: 8pt;
font-weight:normal;
text-decoration: none;
width:auto;
height:15px;
letter-spacing: 0px;
}
#subMenu ul li a:hover {
text-decoration:underline;
color:#0A3C91;
}
#subMenu ul li a.current {
text-decoration:underline;
font-weight:bold;
color:#0A3C91;
}
#dateStamp {
position:absolute;
right:5px;
top:83px;
letter-spacing:0px;
font-size: 8pt;
font-weight:bold;
z-index:2;
}
#subContentWrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:100%;
height:auto;
border-top:1px solid #000;
background: #fff;
line-height:normal;
}
/* For the text under column */
#subContentWrapper p {
padding: 0;
margin: 5px;
font-size:8pt;
}
/* IE7 1px rounding error. margin-left:-1px; */
/* 25% + 50% + 25% does not work in IE6. (24.8% + 50% + 24.8% works). Overwrote the code in the Home Page. */
#main3Column {
float: left;
width: 50%;
}
#leftColumn {
float:left;
width:25%;
margin-left:-1px;
}
#rightColumn {
float:right;
width:25%;
}
.columnBoxLeft {
padding: 0px 0px 0px 6px;
margin: 5px 0px 5px 0px;
}
.columnBoxMiddle {
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.columnBoxRight {
padding: 0px 5px 0px 0px;
margin: 5px 0px 5px 0px;
}
/* Clears the column floats so the footer can center directly below them. */
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0;
padding:0;
background:transparent;
margin-top: -1px;
overflow: hidden;
}
#revdate {
padding: 0px;
font-weight: normal;
font-size: 8pt;
height: 17px;
width: 100%;
text-align: center;
color: #354963;
}
/* Footer styles */
#mainFooter {
margin: 0px;
padding: 0px 0px;
background-color: #363459;
color: #fff;
font-weight: bold;
font-size: 7pt;
height: 25px;
border-top: 1px solid #000066;
text-align: center;
float: left;
clear:both;
width: 100%;
}
#mainFooter p {
margin: 0;
padding:0;
background: transparent;
color:#FFFFFF;
font-size:7pt;
font-weight:bold;
width:220px;
}
.rightFloat {
float:right;
text-align:right;
}
.leftFloat {
float:left;
text-align: left;
}
#mainFooter p.leftFloat {
margin:6px 0 0 4px;
}
#mainFooter p.rightFloat {
margin:0px 5px 0;
}
#mainFooter p span {
visibility: hidden;
}
Here is a simple page that I put up using the above CSS (main.css) which has the issue I described above. Use print preview and you will see all the 3 columns one below another. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> </head> <body> <div id="subContentWrapper"> <div id="leftColumn"> <div class="columnBox"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/leftColumn--> <div id="main3Column"> <div class="columnBox"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/main3Column--> <div id="rightColumn"> <div class="columnBox"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/rightColumn--> </div> </body> </html> |
|||||||