|
CSS - Help With Printing (css2)
Similar TutorialsIm deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? hello all, have a small problem with CSS when viewing the site with Firefox ... please help you are my last hope. Here is what Firefox doesnt like Code: background: url("images/tiler.gif") top y-repeat;
in IE everything looks fine but Firefox misses the image ... when i put a background color of the table ... the color is displayed but picture is not ... anybody has a solution ? I see Firefox doesnt like alot of css styles ... does anyone know a knowledge base with replacements or something like that ... ??? Thanks in advance guys ! Hi. I like to know what're the differences. I know that css3 has more properties. It can do rounded corner border easily and also some new ways to write css. Is this css3? input[type="submit"] Also I remember seeing websites mentioned css3 can be written in module or something like that? What other differences? Thanks. What is the Difference between CSS2 and CSS3 ??? So, I'm looking for a tool that will crawl and suck down my website (just html, not images) and then examine my stylesheet and compare the rendered page output with css and help me eliminate unused styles definitions, styles for identical properties with different names, unfound class attribute names and that sort of thing. The reason I need a spider is that my site runs on ATG and rql queries are pain to write when looking for styles in the repositories, and so I'd like to check the the final rendered page output, and not have to comb through my jhtml and my repositories separately. I've downloaded a couple tools. Style Studio and Style Master and neither will crawl my live site and check css, and the one that was supposed to go through my local resources didn't search for unused styles, just invalid css2 (which i can do at w3c anytime!) Ok, if that made sense to anybody and anybody knows the answer please let me know. Even a css2 seeker or something that will work on my site once i've crawled it with another spider tool would be cool too. I have 4000 lines of css and doing this by hand is driving me insane. thanks everyone. d Link: http://www.vairlinecms.com/template.html I cannot for the life of me figure out why Testting is not aligning vertically with About Us (To have the same space between top of Testting and menu bar as there is for About Us.) Any ideas? CSS: Code: /*
Author: Matt
File: default.css
Desc: contiains all of the CSS styles.
Legal: This code is not to be used without the written consent of the author.
*/
/* ===== Defaults ===== */
body {
background: #CCC;
font-family: verdana, tahoma, serif;
}
a {
}
h1, h2, h3 {
}
p {
}
/* ===== Wrapper ===== */
div#wrapper {
position: relative;
width: 976px;
height: 600px;
margin: 0 auto;
padding: 0;
background: #FFF;
border: 10px solid #FFF;
}
/* ===== Header ===== */
div#header {
position: absolute;
top: 0;
left: 0;
width: 976px;
height: 197px;
margin: 0;
padding: 0;
background: url(images/header.jpg) no-repeat;
}
/* ===== Navigation ===== */
ul#navigation {
position: absolute;
top: 154px;
left: 0;
float: left;
width: 976px;
margin: 0;
padding: 0;
list-style-type: none;
background-color: blue;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
display: block;
float:left;
margin: 0;
padding: 0 .5em 0 .5em;
font-weight: bold;
line-height: 25px;
text-decoration: none;
color: #FFF;
border-right: 1px solid #FFF;
}
ul#navigation a:hover {
color: #FFF;
background: red;
}
/* ===== Content ===== */
div#content {
position: absolute;
top: 185px;
left: 0;
margin: 0;
padding: 0;
}
div#content #leftSide {
float: left;
width: 700px;
margin: 0;
padding: 0;
}
div#content #leftSide h1 {
color: blue;
margin: 0;
padding: 0;
}
div#content #leftSide p {
color: #000;
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 13px;
}
div#content #rightSide {
float:left;
width: 200px;
margin: 0;
padding: 0;
}
div#content #rightSide h1 {
}
div#content #rightSide p {
}
/* ===== Content Boxes ===== */
div#content #clientLoginBox {
}
div#content #clientLoginBox h1 {
}
div#content #clientLoginBox p {
}
/* ===== Footer ===== */
div#footer {
}
HTML: Code: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>vAirlineCMS.com | Virtual Airline Support Center</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="default.css" rel="stylesheet" type="text/css" /> <head> <body> <div id="wrapper"> <div id="header"> <ul id="navigation"> <li><a href="#">Home</a></li> <li><a href="#">Demo</a></li> <li><a href="#">Sign-Up</a></li> <li><a href="#">Support & Contact</a></li> </ul> </div> <div id="content"> <div id="leftSide"> <h1>About Us</h1> <p>This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. This is just a test. </p> <h1>Features</h1> <p>Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test. Just another test, this is. Simply a test.</p> </div> <div id="rightSide"> <h1>Testting</h1> </div> </div> </div> </body> </html> Hello, I have attached my zip file and this is my first attempt on CSS2 (plenty of comments in the code), if some could look at it and recommend any suggestion and why that would be TERRIFIC. My main question is, what happens if the is say...4-5 paragraphs of text on the home page, under "Company Overview", the page then looks stupid, how do i extend the containers around the #middleContainer so that it looks intact. If you want to see the page it is also accessible at http://awo.loadedtechnologies.com/ Thanks you for your Help Greetings, I posted this question in the HTML forum, too, but I realize that maybe the answer to this question would better be provided by CSS2, rather than using HTML tables, as the latter may be deprecated in the future--it seems--as a layout tool. I used to be able to position an image, or anything basically, in a table cell that is in the "absolute middle" of a web page, i.e. centered horizontally and vertically, using Dreamweaver MX. But, for some weird reason, I cannot do it anymore using Dreamweaver MX 2004. No matter what I try, the image or contents of the cell or table are always at the top of the page, centered horizontally, yes, but not vertically. I tried nesting a table within a table, and I tried using a percentage-based 3x3 table, but nothing works. I noticed that the "height" attribute of a table is deprecated now, thus, you should not give a table a "height" of 100%. Is that the reason? And if so, then what is another way to do this now? I mean putting an image or so in the absolute middle or center of a page? Better yet... What I really want to do is to place an image in the vertical center of a page, yet a bit to the side, but within proportion to the page of the visitor. Meaning, I'd like the center of the image, for example, to always have 50% of the page over it and 50% below it, exactly; and I'd like it to have 33% of the page to its right side, for instance, and 66% to its left side, always, regardless to the visitor's resolution. Now how can I do this, especially using Dreamweaver MX 2004? Thanks for anyone taking the time to help. I'll try to attach an image to demonstrate what I mean visually. http://forums.devshed.com/attachmen...tachmentid=4599 Hi! I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property. Thank you! Hello, I was wondering how to link to print a single ID without printing anything else... thanx=) Hiya, This page http://www.magikwebs.co.uk/ranch/indian.html wasn't printing too good so I've set up a stylesheet for print only, and it has improved, but it still doesn't quite look right. It leaves a big gap on page 2 and misses a line out. It looks 100% fine in Firefox. I guess it's an IE bug. Anyone know what it is and how to avoid it? Thanks, John Hi ! I've read that it's possible with CSS to adapt the visual style of a web page on the output medium. If I didn't understand that completely wrong, it means that with CSS I can format a String like "Hello World" to give him font size 10 in my browser and font size 20 if i print the page. Is this correct ? Does someone of you habe any kind of coding example therefore ? That would be great TIA Gawan I have a page that displays text of an article. It's all contained in a <DIV>, of course. I'd like the "Print" option the allow the user to print out just the article, and not the rest of the crap on the page (ads, navigation, so on.) I know vaguely that you can have alternate style sheets for printing and other types of display, but how to include just the text in the output? I made a form that I wanted to print. It is a page with a table with most of it formated with CSS. When I print however all that shows is the text, nothing that is defined with CSS is acknowledge, not the font-family, table borders, etc. I tried it with Safari and Firefox, both look the same. What is the deal? On our new test site for our colleges online catalog I've been charged with trying to fix an issue we are having with some versions of Netscape on some PC's(not mac) where our CSS printing style isn't working....We can't pin point what causes the problem and some pages have the error and others do not, some pages print fine in 7.1 and not 7.2 or 8.1 (in 7.2/8.1 almost everything longer than one page in depth does not print properly) and its really nerve racking. If anyone has experienced a similar problem or knows of a possible solution I would be eternally in thier debt. The link is http://www.ramapo.edu/test/catalog_06_07/ and the pages that have print problems in netscape are generally longer than a page in depth are mostly major requirements pages like. http://www.ramapo.edu/test/catalog_06_07/academicPrograms/TAS/iss_req_major.html When the problem occurs the printer will usually print a blank page with just the url and date (header/footer) or will print nothing but 1 or 2 blank pages with the url/date and this can be seen in preview (no need to waste paper). Here is what it looks like when it properly prints: http://phobos.ramapo.edu/~chdonnel/properprinting.jpg Here is what it looks like when netscape masacres it: http://phobos.ramapo.edu/~chdonnel/badprinting.jpg Thanks in advance, Chris I am working on a printer friendly version of web pages. Generally when you print something from web, it prints, title, url, page number, etc. I know that you can configure your browser's settings to not print that, but is there a way through css or any other way to write your style sheet in such a way that those things are not printed? Thanks, I have decided to develop CSS to style my web pages for printing. So far I am getting the results I desire from Firefox 2.0. However I am having an issue with IE 6. If your open the following page in IE: cambridgema.gov/cdd/test/faq_test.html Go to print preview, move to the second print page and scroll to the bottom you will see that the page break splits a single line of text between two printed pages. Any suggestions about how to stop this? Thanks Cliff Is there a way to forcefully print the background of a table cell? I am generating an attendance list, and it would be kinda nice if it would print the backgrounds, just a simple grey shading to seperate the lines. Hey guys, I'm working on a website and I have been notified by the client that the page does not print correctly in IE. Prints just fine in Mozilla however. I tested this and sure enough it cuts off the rightmost 100 or so pixels. The entire page exists in a table that is centered and set to be 729 pixels wide. I tried attaching an extra stylesheet: Code: <link rel="stylesheet" type="text/css" media="print" href="dummy.css"> but that has no effect. Even when I use the other stylesheet to move the content to the top left corner of the page with no borders, it still prints the page centered and lops off the rightmost 100 or so pixels. Any ideas? (telling them to print in another browser is not an option unfortunately) |
|||||||