|
CSS - Printer Formatting
Is there a way to use CSS to format printer output specifically for a sheet of paper such that page breaks can be formatted in at specific points?
Similar Tutorialswhat I am wanting to do is have a reverse of this so that all the areas i contain within a given <div class="printerOnly"></div> is not shown on the screen but is ready to be printed, when the print button is pressed of course. and all the other areas are not printed. is this possible ? Code:
<style type="text/css">
@media all {
.page-break { display: none; }
}
@media print
{
.page-break { display: block; page-break-befo always; }
}
@media print {
div.screenOnly { display: none; }
}
@media print {
div.noborder { border-width: 0px; border-style: none; }
}
</style>
<div class="screenOnly">
this shows on the screen
</div>
<div>this is printed</div>
Nevermind Hi All I hope i have landed in the right forum. its kind of information overload for me. Anyway Here is my question I have a HTML page with large number of text boxes and buttons. I want to print this page but without the text boxes and buttons. Is there any easy way to do it? TIA Hello I am very new to css. Can someone tell me if css is the way to go when making a printer friendly page? or if there are any usefull tutorials on this out there that would be really helpfull. just so i know where to start from. Thanks Hi, I'd like to have each page of my website print out "scaled to fit" on regular letter-sized paper in landscape orientation. The size of the background element that all page content fits on is 950px w x 750px h. So, even if the user scaled one of the web pages onscreen, when they print it out on their inkjet, it should still print the full page, scaled to fit on the letter-sized paper. These are the steps I know to take, but I am missing some info. Can anyone help me fill in the missing steps/info? If you would keep it in bulleted (1,2,3) format that'd be easiest for me to understand (still new at web work). I really appreciate it! 1. Put this code in the head section of each html web page: <link href="print.css" rel="stylesheet" type="text/css" media="print" /> 2. Create a print.css file (What code goes in here?) 3. Link the print.css file to each html web page. 4. Upload all html web pages, and put the print.css file in the same root folder Thank you! Dear all, I want to add a print icon to my pages, which would print an alternate page (a printer friendly version). I have the following code: <link href="print.php?cli_id=2" rel="alternate" media="print" /> This works fine if I use the print icon in my browser, but if I use javascript:window.print(); within the page, it seems to ignore the alternate printer friendly page. My page appears in frames, and I plan to remove the browser toolbar and replace with a custom one in the page once the application is complete. Any ideas anyone? many thanks, Mark Hello, Is it possible to create a CCS stylesheet that will not only produce a printer-friendly HTML page, but create that page in the form of columns like a newsletter? What I don't want are columns like a web page, that simply read straight down to the end of the page, giving little regard to the fact that text in column one extends to the next page before continuing to subsequent columns. I want the text to read down from the left column to the right column, and then continue to each subsequent page, always reading from the left column to the right column--just like a newsletter. I know I can use PDF, but I find those file huge and combersome, and would prefer to create this in HTML & CSS if possible. I searched this board using "printer version" & columns, and when I found nothing I searched just "printer version" and found nothing. I could search just using columns, but wading through several postings about creating columns for a screen doesn't seem productive. Thanks in advance. Angie I am using CSS to generate a printer-friendly webpage for Internet Explorer. The same CSS however is not working with Netscape or FireFox. I am using the following doctype in my html file. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> The contents within the <DIV> and <P> tags I am trying to hide using Print CSS works correctly in Internet Explorer 6.0. However, the contents are getting printed when Netscape 7.1 or FireFox is used. Can someone help? Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery hi all, need one help from you.. i have to format a div tag which is generated dynamically.. if there are only 4-5 lines consists in that div it works fine, but the lines go out of bound it takes scroll bar overflow:auto; overflow-x:hidden; height:200px; in mozzila it works fine as the scroll bar comes inside the div tag... but in internet explorer .. the scroll bar goes out of the div tag.. can anybody help me... I am running amuck! know this should be basic, but Firefox and IE both handle the <h1> tags differently: 1) IE seems to put equal whitespace above and below the element 2) Firefox seems to put less whitespace AFTER the <h1> tag. Anyway to smooth this out so it displays close to similiar? My gratitude ahead of time... Hello all, I'm trying to add digg stories to my site & want to format it with css. Digg says you can use CSS with the class names to customize the display. Havent use css before so I'm lost...if someone could hook me up with this I would sure appeciate it. I would like to be able to format the links and text differently. The code I want to use to add digg is: Code: <script language="JavaScript" src="(URL address blocked: See forum rules)/diggjs/front/tech_news/0" type="text/javascript"></script> I'm going to put it in a frame so just on a blank page. Thanx! Hi, Really new to this css stuff and i'm sure i'll get a beratting for asking such a simple question but here goes... What i need is a cell with a linked word in it. Initial state is white background with blue text. On rollover i would like the whole cell to turn blue with white text. I'm sure this is simple but just need a point in the right direction. Thanks for any help Tom I've run up against a css problem with the homepage on this site under development. In IE8 the right column in the main content area contains an image swapper and the column pushes out beyond the page content area. It displays properly in FF3. I've tried a variety of margin, padding and width changes without success. How do I correct this for all IE and FF browsers? To avoid bloat I have not included the stylesheet here, but it can be viewed in FF. Hi, I have changed my test site so I can display an ad and so that each section is separated into different sections, anyway after changing a few things and fixing a few problems I have found that the problem is happening with my #ContentMain except I have no idea how to fix it. Essentially #ContentMain is appearing before it should be (ignoring the formating and appearing behind everything) when it should be appearing directly after <div id="main1"> everything I have tried, I have had no success with. Also as I have separated the gap I had between the top links and the main picture to add in in ad section (no actual css setting for it as everything I have tried hasn't worked) Where as before my editing the content appeared where it was meant to, so any help would be greatly appreciated and if you need me to explain something in more detail let me know. TorqueSRO - Click Me Hey All, I'm trying to make text float to the right, the challenge part of it all is that i need to try and do this using a class that get asigned to the text so i can't really use a DIV or anything to do this. Really what i want is a bunch of text in a text box aligned to the right with a grey background. Anythoughts or ideas? Really in a binde here. I have a table whose class is "dogs" How do I make all the <tr> elements within the table dogs have a certain style and not all the <tr> elements on the page? Hi, I need help with formatting a calendar using CSS. Here's a list of the goals I'm trying to achieve: The day numbers are positioned in the top right corner of the cell. The event text is centered both vertically and horizontally within each cell. The day number doesn't affect the centering of the event text (i.e., it's as if it has zero width). I need to be able specify a minimum width and height for the cells. I have a png of the effect I am trying to achieve, but unfortunately I can't post it being a brand-new member. If seeing it would help, let me know and I guess I can PM the url to you. Update: Here's the link to the png: Code: http://tapestryfolkdance.org/images/calendar.png Below is what I've tried. However, the event text is not centered vertically within each cell, and the first couple of events are not centered horizontally in the cell. It is fine if the event text overlaps with the day number. Code:
<html><head><style>
table { text-align: center; border-style: solid; border-width: medium; border-spacing: 0px }
td { border-style: solid; border-width: thin; border-color: black; }
.day {
margin: 0px; text-align: center; font-style: bold;
border-style: solid; border-width: thin; border-spacing: 1px;
font-size: large; color: black;
float: right;
}
td {
text-align: center; color: black; font-size: small; min-width: 60px; min-height: 120px;
vertical-align: top;
}
</style>
</head><body>
<table>
<tr>
<td>
<div class=day>2</div>event 1<br></td>
<td>
<div class=day>3</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>4</div>event 1<br></td>
<td>
<div class=day>5</div>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>6</span>event 1<br>event 2<br>event 3<br></td>
<td>
<span class=day>7</span>event 1<br>event 2<br></td>
<td>
<div class=day>8</div>event 1<br></td>
</tr>
<tr>
<td>
<div class=day>9</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>10</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>11</div>event 1<br></td>
<td>
<div class=day>12</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>13</div>event 1<br></td>
<td>
<div class=day>14</div>event 1<br>event 2<br>event 3<br></td>
<td>
<div class=day>15</div>event 1<br>event 2<br></td>
</tr>
</table>
</body>
</html>
Hi, Can anyone please help with formatting a list? In the simple list below, I would like; 1) The main list items should always be positioned at top 0px, left 90px of it's container (done) 2) Nested list items should be hidden (done) 3) The nested item that belongs to the "selected" list item, should be visible (done) 4) The nested item that belongs to the "selected" list item, should always be positioned at top 0, left 0 (I can't do this) 5) The main list items should be on top of the visible sub item (I can't do this, the sub item is always on top) Many thanks for any pointers, Cheers, Mark 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>
<title>Untitled</title>
</head>
<body>
<style type="text/css">
#container{position:relative;height:100px;border:1px solid #000}
#container ul{list-style: none;padding: 0;margin: 0;position:absolute;top:0px;left:90px;width:100px;z-index:20;}
#container ul ul{display:none;}/* hide nested lists */
#container ul li{display:block;width:100px;background:red}
#container li.selected ul{display:block;} /* show nested list for item with selected class */
#container li.selected ul li{width:100px;position:absolute;top:0px;left:0px;background:yellow;z-index:10;}/* style nested item */
</style>
<div id="container"><div style="clear:both"></div>
<ul>
<li class="selected">item 1
<ul>
<li>Nested item 1</li>
</ul>
</li>
<li>item 2
<ul>
<li>Nested item 2</li>
</ul>
</li>
<li>item 3
<ul>
<li>Nested item 3</li>
</ul>
</li>
<div style="clear:both"></div>
</div>
</body>
</html>
|
|||||||