Results 1 to 3 of 3

Thread: Print CSS

  1. #1
    Join Date
    Jan 2012
    Location
    Bent, BelgiŽ
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Print CSS

    Hi,

    I have a website that have a script for blinking. When I print that site the blink must also be printed, but it's not.
    I fond info on this site thats it's better to use 2 stylesheets on normal and 1 for printing

    My RSS on the screen is well hidden on the printer but the flashing text keeps hidden

    This is the test site: http://users.telenet.be/janr/pink.html

    The HTML
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    	 <HEAD>
    			<TITLE>Volgende ronde</TITLE>  
    			<LINK HREF="style.css" rel="stylesheet" type="text/css" >
    			<LINK HREF="printstyle.css" rel="stylesheet" type="text/css" media="print">
    			<script src="pinken.js" type="text/javascript"></script>
    	 </HEAD>
    	 
    	 
    	 <Body onLoad = "show('knipper1',750);"><br>
    		 <div class=rss>
    			  <a class="rss" href="rss.xml" target="_blank">
    					<img src="rss.gif" alt="rss">
    			  </a>
    		 </div>
    		<table>
    			 <tr>
    				  <td>
    					<h1> 
    						dinsdag 18 januari 2011
    					</h1>
    				</td>
    				  <td>
    					<h1>dinsdag 25 januari 2011<br>
    						<div class="blinkprint" id='knipper1' >
    							Uitgestelde partijen
    						</div>
    					</h1>
    				  </td>
    				  <td><h1> dinsdag 1 februari 2011</h1></td>
    			 </tr>
    		</table>
    	 </BODY>
    </HTML>
    The styles
    normal:
    HTML Code:
    .vert 		{WRITING-MODE: tb-rl;FILTER:fliph flipv;
    -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
    }
    .copyright 	{WRITING-MODE: tb-rl; FILTER:fliph flipv; width:10px;RIGHT: 0px; POSITION: absolute; bottom: 0px;
    -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
    }
                                /*Menu Links*/
    
    /*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
    may be inherited in some browsers from other 'a' element styles (if any) on the page*/
    
    #menu1 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu1 a:active	{color:blue;text-decoration:none;}
    #menu1 a:visited {color:blue;text-decoration:none;}
    #menu1 a:hover {color:navy;background-color:Yellow}
    
    #menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu2 a:active	{color:blue;text-decoration:none;}
    #menu2 a:visited {color:blue;text-decoration:none;}
    #menu2 a:hover {color:navy;background-color:yellow}
    
    #menu3 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu3 a:active	{color:blue;text-decoration:none;}
    #menu3 a:visited {color:blue;text-decoration:none;}
    #menu3 a:hover {color:navy;background-color:Yellow}
    
    #menu4 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu4 a:active	{color:blue;text-decoration:none;}
    #menu4 a:visited {color:blue;text-decoration:none;}
    #menu4 a:hover {color:navy;background-color:yellow}
    
    #menu5 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu5 a:active	{color:blue;text-decoration:none;}
    #menu5 a:visited {color:blue;text-decoration:none;}
    #menu5 a:hover {color:navy;background-color:Yellow}
    
    #menu6 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu6 a:active	{color:blue;text-decoration:none;}
    #menu6 a:visited {color:blue;text-decoration:none;}
    #menu6 a:hover {color:navy;background-color:yellow}
    
    #menu7 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu7 a:active	{color:blue;text-decoration:none;}
    #menu7 a:visited {color:blue;text-decoration:none;}
    #menu7 a:hover {color:navy;background-color:yellow}
    
    
                               /*End Menu Links*/
    
    body{	margin-top:10px;
    	text-align:center;
    	scrollbar-arrow-color: #FFFF00;
    	scrollbar-face-color: #FF0000;
    	scrollbar-highlight-color: #0000FF;
    	scrollbar-3dlight-color: #008000;
    	scrollbar-shadow-color: #00FFFF;
    	scrollbar-darkshadow-color: #008080;
    	scrollbar-track-color: Yellow;
    	background-color: lightcyan;
    	background-image: url(logo.jpg);
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-position: 100% 00%;
    	font-family: Garamond;
    }
    
    .gekleurdetextarea{
    	scrollbar-arrow-color: #FF7700;
    	scrollbar-face-color: #FF0000;
    	scrollbar-highlight-color: #0000FF;
    	scrollbar-3dlight-color: #008000;
    	scrollbar-shadow-color: #00FFFF;
    	scrollbar-darkshadow-color: #008080;
    	scrollbar-track-color: Blue;
    }
    
    h1{	color:red;
    	margin-top:10px;
    	font-family: Garamond;}
    h2.ok{	color:Green;
    	margin-top:10px
    }
    h2.NOK{	color:red;
    	margin-top:10px
    }
    h2{	color:green;
    	margin-top:10px;
    	font-family: Garamond;}
    h3{}
    h4{}
    h5{}
    h6{}
    h7{}
    p{
    	font-family: Garamond;
    }
    table.noborder{
      border: 0px}
    
    table{	margin-left: auto;
    	margin-right: auto;
    	text-align:center;
    	empty-cells:show;
    	border: 1px solid #000;
    	border-color:DarkBlue;
    	font-size: 16px;
    	font-family: Garamond;
    }
    tr.split{
    	background-color:yellow;
    	height:05;
    }
    td{
    	vertical-align:top;
    	text-align :center;
    	border:1px solid darkblue;
    	valign:top;
    }
    tr.title{font-weight:bold;text-decoration:underline;}
    td.playername{text-align:Left;}
    td.NotYet{border-color:Red;background-color:Red;font-weight:bold;color:White;}
    td.center{text-align:center;
    	font-weight:normal;}
    td.Round{text-align:center;
    	font-weight: bold;
    	}
    td.Date{text-align:center;
    font-weight: bold;
    color:red;
    	}
    td.HeadL{text-align:left;
    font-weight: bold;
    	}
    td.HeadR{text-align:right;
    font-weight: bold;
    	}
    td.left{text-align:Left;
    	font-weight:normal;}
    td.right{text-align:right;
    	font-weight:normal;}
    td.split{
    	background-color:yellow;
    	width:20;
    	font-weight:normal;
    }
    
    td.nextround1 {background-color:Orange;}
    td.nextround2 {background-color:Yellow;}
    td.nextround3 {background-color:Green;}
    td.nextround4 {background-color:LightBlue;}
    td.nextround5 {background-color:Violet;}
    td.nextround6 {background-color:Tomato;}
    td.nextround7 {background-color:yellowgreen;}
    td.nextround8 {background-color:DimGray;}
    td.nextround9 {background-color:Lime;}
    td.nextround10{background-color:DarkGoldenrod;}
    
    tr.Bye{color:Red;font-weight:bold;}
    tr.split{height:1;}
    td.sameplayer{background-color:Tomato;}
    a.rss{text-align:center;
    	color:yellow;
    	background-color:Red}
    
    div.rss {text-align:left;}
    div.blink {background-color:Yellow; text-align:center; color:red; font-weight:bold; font-size:150%;}
    div.blinkprint {background-color:Yellow; text-align:center; color:red; font-weight:bold; font-size:150%;}
    div.uitgesteld {background-color:Yellow; text-align:center; color:red; font-weight:bold; font-size:150%;}
    td.uitgesteld {background-color:Yellow; text-align:center; color:green; font-weight:bold;  }
    
    #logochess {
       position:absolute;
       bottom:0;
       width:100%;
       height:60px;   /* Height of the footer */
    }
    .pagebreak {page-break-before:always}
    Print
    HTML Code:
    	#menu1 { display:none;visibility: hidden; }
    	#menu2 { display:none;visibility: hidden; }
    	#menu3 { display:none;visibility: hidden; }
    	#menu4 { display:none;visibility: hidden; }
    	#menu5 { display:none;visibility: hidden; }
    	#menu5 { display:none;visibility: hidden; }
    	#menu6 { display:none;visibility: hidden; }
    	#menu7 { display:none;visibility: hidden; }
    	#menu8 { display:none;visibility: hidden; }
    	#datum { display:none;visibility: hidden; }
    	#knipper1 {display: block; visibility: visible; }
    	#knipper2 {display:none;visibility: hidden; }
    	div.blink 		{visibility: hidden;}
    	div.blinkprint 	{ visibility: visible; }
    	div.rss{ visibility: hidden; }

    And the script code
    Code:
    var ns4 = (document.layers);
    var ie4 = (document.all && !document.getElementById);
    var ie5 = (document.all && document.getElementById);
    var ns6 = (!document.all && document.getElementById);
    
    
    function show(id,Tijd){
    	// Netscape 4
    	if(ns4){
    		document.layers[id].visibility = "show";
    	}
    	// Explorer 4
    	else if(ie4){
    		document.all[id].style.visibility = "visible";
    	}
    	// W3C - Explorer 5+ and Netscape 6+
    	else if(ie5 || ns6){
    		document.getElementById(id).style.visibility = "visible";
    	}
    	var s = "hide(\"" + id + "\"" +", " + Tijd +")";
    	
    	setTimeout(s, Tijd);
    }
    
    function hide(id,Tijd){
    	// Netscape 4
    	if(ns4){
    		document.layers[id].visibility = "hide";
    	}
    	// Explorer 4
    	else if(ie4){
    		document.all[id].style.visibility = "hidden";
    	}
    	// W3C - Explorer 5+ and Netscape 6+
    	else if(ie5 || ns6){
    		document.getElementById(id).style.visibility = "hidden";
    	}
    	var s = "show(\"" + id + "\"" +", " + Tijd +")";
    	setTimeout(s, Tijd);
    }

    Can someone help please

    Jan

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    691
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there jr212,

    and a warm welcome to these forums.

    Change this...
    Code:
    
    <h1>dinsdag 25 januari 2011<br>
    <div class="blinkprint" id='knipper1'>
    Uitgestelde partijen
    </div>
    </h1>
    
    ...to this...
    Code:
    
    <h1>dinsdag 25 januari 2011<br>
    <div class="blinkprint" id='knipper1'>
    Uitgestelde partijen
    </div>
    <div  class="blinkprint" id="hide">
    Uitgestelde partijen
    </div>
    </h1>
    
    Then add this to your style.css file...
    Code:
    
    #hide {
        display:none;
     }
    
    ...and this to your printstyle.css file....
    Code:
    
    #knipper1{
        display:none;
     }
    #hide {
        display:block;
     }
    
    coothead

  3. #3
    Join Date
    Jan 2012
    Location
    Bent, BelgiŽ
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanx

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •