Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I disable all styles for printing 1

Status
Not open for further replies.

okpeery

Instructor
Dec 29, 2005
102
US
I think I've worked out most of the problems with my code. I think the easiest way for me to make the lesson plans printable is just to disable all styles. I've looked around and cannot find exactly disabling all styles for print.

Also I only have access to Safari and Firefox here. Can someone tell me what it looks like in IE, older versions not needed? I just wanted to create a simple lesson plan template that looks good on a site but prints well for teacher records.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Your Name and Lesson Plans</title>
<style type="text/css">

body
	{
	background-color:#CCCCCC;
	margin:0px;
	padding:0px;
	text-align:center;
	font-size:16px;
	font:Trebuchet MS, Arial, Helvetica, sans-serif;
	}

h1
	{
	padding-bottom:0px;
	margin-bottom:0px;
	margin-left:10px;
	}

h2
	{
	padding-top:0px;
	padding-bottom:0px;
	margin:0px 0px 0px 22px;
	}

img
	{
	float:right;
	padding:10px;
	}

ul
	{
	padding-top:0px;
	margin-top:0px;
	}

div#container
	{
	width: 905px;
	text-align:left;
	margin:10px;
	padding:20px;
	border:1px solid black;
	}

div#header
	{
	width: 900px;
	border:2px dashed black;
	background-color:#FFFF00;
	}

.content
	{
	float:left;
	width: 451px;
	height: 200px;
	background-color:#FFFF66;
	border-right: 1px solid #FFFF66;
	}

div#content6
	{
	width: 900px;
	border:2px dashed black;
	clear:both;
	background-color:#FFFF00;
	}

	
</style>
</head>

<body>
<div id="container">
	
  <div id="header">
		<img src="images/brlogo06.jpg" width="139" height="127" />

		<h1>Lesson Plans</h1>
		<ul>
			<li>Mr. Peery</li>
			<li>Tech Lab / Computer Science </li>
			<li>Hill Freedman Middle School</li>
			<li>Weeks of 10/30/2006 and 11/6/2006</li>
		</ul>
		
	</div>					
			
	<div class="content">
		<h1>Objectives</h1>
			<ul>
				<li>Students will </li>
				<li>Students will</li>
				<li>Students will</li>
			</ul>
	</div>			
				
	<div class="content">
		<h1>Areas of Interaction</h1>
			<ul>
				<li>Approaches to Learning</li>
		    </ul>
	</div>					
						
	<div class="content">
		<h1>Essential Questions</h1>
			<ul>
				<li>EQ #1</li>
			</ul>
	</div>
									
	<div class="content">
		<h1>Everyday Materials</h1>
			<ul>
				<li>paper and pencils</li>
				<li>textbooks</li>
			</ul>
	</div>
											
	<div id="content6">
		<h1>Learning Activities</h1>
			<h2>Monday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Tuesday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Wednesday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Thursday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Friday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Monday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Tuesday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Wednesday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Thursday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
			<h2>Friday</h2>
				<ul>
					<li>activity 1</li>
					<li>activity 2</li>
					<li>Homework</li>
				</ul>
		
		<h1>Assessments</h1>
			<ul>
				<li>Assessment 1 and date</li>
				<li>Assessment 2 and date</li>
			</ul>
	</div>
																											
</div>
</body>
</html>
 
A quick and easy way to make the styles unavailable for printing is to specify the media type for your style tags:
Code:
<style type="text/css" [!]media="screen"[/!]>

-kaht

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]
 
Thanks that did just the trick.

One small other problem. If I do overflow scroll to allow some teachers who write a lot in their lessons plans both horizontal and vertical scrollbars appear, even when the content is not sufficient to warrant scrollbars. Is there a way to have them only if the content goes beyond the size of the div?
 
Use overflow:auto; instead, that way the browser will place the scrollbars only if they are needed.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
That was so simple. Thanks to everyone.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top