|
CSS - How To Have Certain Areas Sent To Printer
what 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>
Similar TutorialsOk, I've read over and over my CSS and everything seems perfect. In my HTML editor, the CSS is working, but when it gets the the internet, the content goes berserk. Here are the parts of the code that are not responding: CSS #content { width:610px; margin-left:0px; position:absolute; left:128px; top:156px; padding:25px; height: 838px; } HTML <div id="content"> (too long for post, please veiw source at website) </div> And the link to the website I'm creating an area that will have code snippets in it, I want it to scroll horizontally (wrapping may make the code inaccurate in some languages), but vertically I want the height of the area to grow dynamically. An example can be seen on this page: http://scratchprojects.com/2006/02/sample_article_tic_tac_toe_p02.php The problem is, in IE, if there is a horizontal scroll bar, it doesn't make quite enough room, so you have to scroll vertically as well. Shrink your browser window so the code snippet at the bottom of the page doesn't fit and you'll see the two scrollbars appear. In Firefox and Opera, just the horizontal scrollbar shows up. Here's the basics of the code: Code: <div class="code">
<pre class="codeblock">Private Sub menuAboutTTT_Click(ByVal sender _
As System.Object, ByVal e As System.EventArgs) Handles menuAboutTTT.Click
MessageBox.Show("Tic-Tac-Toe v1.0" & vbCrLf & _
"See how this and other programs work at" & _
vbCrLf & "http://www.scratchprojects.com")
End Sub ' menuAboutTTT_Click</pre>
</div>
Here's the style sheet: Code: .code {
text-align: center;
margin: 15px;
}
.codeblock {
text-align: left;
background: #fff;
border: 1px;
border-style: inset;
width: 99%;
height: auto;
overflow: auto;
}
Any help would be appreciated. Thanks. Image example here. Text different behavior Why is is that the text drops down in different area of the div. The div is set a specific size but the text drops down where ever it wants. I have not added ant <br> tags just srtaight text and it still drops down where ever. Why does the text not go all the way to the end of the div anyway? 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? Hi I've got 4 divs that are of the exact same size. I need them to all occupy the same real estate on a page. three of them will always be hidden and only one is visible at a time, this is controled by javascript. My question is what kind of positioning tricks do I have to do in order to make these 4 identical sized divs occupy the same space. I tried relative positioning like this div1{ position:relative; top:0; left:0; height:200px;} div2{ position:relative; top:-200; left:0;height:200px;} div3{ position:relative; top:-400; left:0;height:200px;} div4{ position:relative; top:-600; left:0;height:200px;} This only moved the contents of each div up to the desired location, however, it did not move the actual div itself, so I'm left with the reserved 600px high worth of empty space Please help I'm having trouble getting the height to be the same for two divs. One is a big content area (left) and the other is a vertical menu (right) that is created dynamically with PHP. I need the bottom of both divs to line up UNLESS there is a lot of content in the left div that makes the left side taller. (So, if there's not much text in the left content area, it should go ahead and line up with the bottom of the menu.) Is this possible? I'm stumped. Any help would be greatly appreciated! Thank you. Code: #content {width: 750px;height: 100%;position: relative;margin: 10px 25px 0 25px;}
/*BEGIN LOCATION PAGES MINIMUM HEIGHT STYLES*/
/* for Mozilla/Safari/Opera */
*>.boxContent {padding-top: 900px;min-height: 1px;}
*>#locDoctors, .locInfoMap {margin-top: -900px;}
/* for IE, with IE5/Mac backslash filter \*/
* html .boxContent {height: 900px;}
/* end filter */
/*END LOCATION PAGES MINIMUM HEIGHT STYLES*/
/*BEGIN LOCATION BOX*/
#locationBox {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 614px;height:810px;position: relative;background-position: bottom;background-color: #DDF0F2;}
#locationBox .boxTop {background-image: url(../images/location/pgTopLocation.gif);background-repeat: no-repeat;width: 100%;height: 20px;}
#locationBox .locInfoMap {width: 100%;height: 408px;background-image: url(../images/location/mapLarge.gif);background-repeat: no-repeat;background-position: top right;}
#locationBox .boxBot {background-image: url(../images/location/pgBotLocation.gif);background-repeat: no-repeat;width: 100%;height: 15px;}
/*END LOCATION BOX*/
/*LOCATION MENU START*/
#locationMenu {width: 136px;position: absolute;z-index: 10;right: 0px;}
#locMenuList {margin: 0;padding: 0;font-size: 9px;list-style: none;}
#locMenuList li {margin: 0;padding: 0;display: inline;}
#locMenuList li.main {height: 30px;height /**/: 30px;/* for IE5/Win only */ }
#locMenuList li.sub {height: 20px;height /**/: 20px;/* for IE5/Win only */ }
#locMenuList li a {text-decoration: none;color: #FFFFFF;}
#locMenuList li.locHead {display: block;margin: 0;padding: 10px 9px 9px;font-weight: 900;color: #FFFFFF;}
...
/*LOCATION MENU END*/
Code: <div id="content"><!--CONTENT SECTION START-->
PHP MENU IS CREATED HERE...
<div id="locationBox"><!--OPEN BOX-->
<div class="boxTop"></div>
<div class="boxContent">
<div class="locInfoMap">
MAIN CONTENT GOES HERE...
</div>
</div>
</div><!--CLOSE BOX-->
</div><!--CONTENT SECTION END-->
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 Nevermind 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! 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 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 |
|||||||