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!

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

@Media Print CSS 7

Status
Not open for further replies.
1DMF

1DMF

Programmer
Joined
Jan 18, 2005
Messages
8,795
Location
GB
I'm a litle confused as to what i'm doing to create a print CSS file.

How I make stuff disapear so only part of the page is printed.

i'm concerned this means creating loads of unnecessary div's to surround parts the page, using additional classes not used else where just so i can hide them on print.

is that correct?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Sort by date Sort by votes
...can you explain the change from upper to lower case...
Click to expand...
It's just the difference between <DIV> and <div>. If you choose an HTML doctype (versus an XHTML doctype) then you are free to put your markup in either upper or lower case, but if you define your doctype as XHTML then you need to move all your tags to be lower case.

Them's the rules [smile]

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
Arrrgh, make the pain end...

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<title>Commission Statements</title>
	<link rel="stylesheet" href="style/test.css" media="all" type="text/css" />
	<link rel="stylesheet" href="style/statprint.css" media="print" type="text/css" />
</head>
<body>
	<center>
	<table class="table">
		<tr>
			<td class="titlecell">
				<center>Select Statement</center>
			</td>
		</tr>
		<tr>
			<td class="cell2" valign="top">
				<div id="statement">THIS SHOULD PRINT</div>
			</td>
		</tr>
	</table>
	</center>
</body>
</html>

Code: 
.table{
	width: 160px;
}
.titlecell
    {
    font-family: Arial, Verdana;
    font-size: 15pt;
    color: #ffffff;
	background-color: purple;
    background-image: url('/images/tablebar.jpg');
    background-repeat: no-repeat;
    }
.cell2{
	text-align: center;
	height: 280px;
}
#statement
    {
    overflow:auto;
    border:none;
    width:799px;
    height:540px;
    display: block;
    }

Code: 
/* Hide all td's in the table */
.table td{ display: none; }
/* Show Cell2 */
.table td.cell2{ display: inline; width: 100%; }

I made only minimal changes to the CSS, mostly moving things from the html attributes. I'll let other people point out the changes I mad (most of which were mentioned above).

barcode_1.gif
 
Upvote 0 Downvote
and there was me thinking rules were made to be broken!

and I know i'm being pernickerty but i find this funny....

XHTML means all tags must be ended, and if the tag doesn't have a </tagname> end tag then the start tag must end "/>".

so <img src="blah blah" /> , i think i'm right so far....

well riddle me this batman, i've seen no mention of there being a END DOCTYPE, yet the XHTML line to define it from W3C is
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

isn't there a missing / on the end of that - lol

you see i've learnt, I can't beat em, I can't join em, so i just laugh at em!

:-P

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Until the browser has parsed the DOCTYPE tag, it won't know that you're wanting to use an XHTML DOCTYPE, so it doesn't require one.

I've no idea if that's the real reason or not, but it sounds plausible enough ;-)



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
sorry, it's not just about getting that test to work, more importantly , they have been educating me and giving me valuable lessons.

for example, i never normally put attribute values in quotes height="100", i've never had a problem with it not working in ANY browser.

now i can see i'm getting errors on W3C, i never new what the correct way was, i see so many other people sometimes use them sometimes not, now I know the CORRECT way.

giving me the answer by writing the code is not what i was looking for.

People sometimes missunderstand my posts as being some kind of argument, as Jeff found out ;-), that isn't the case, I appologise if some think I am starting an argument, because i'm not, i'm curious, lacking in knowledge and get frustrated, don't take it personally!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
lol - good answer Dan, i'm glad you appreciate my humour now!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
When was the <CENTER> tag deprecated? and why is putting a height in a <TD> tag wrong ?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
seems a strange thing to do, forcing additional unecessary coding when a simple tag would do, but like you say it's the rules..... anyhow, i've finanlly got it to validate well
Tentatively Valid HTML 4.01 Strict
Click to expand...

it's saying something about charset, but i can't find anything on their site about how you define this in the HTML, only about PERL,PHP, ASP etc..

can you give me a nudge please...

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Try adding these to your head section:

Code: 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">

They should remove that error and give you a valid document.

As for the center element being deprecated... well yes - the newer method is longer (in bytes, to type), but when you look at the grand scheme of things (and the whole separating content from layout thing), it does make sense - honest!

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
>> "well riddle me this batman, i've seen no mention of there being a END DOCTYPE, yet the XHTML line to define it from W3C is ... isn't there a missing / on the end of that - lol "

DOCTYPE is not a tag, it is a declaration.


-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Upvote 0 Downvote
sorry, it's not just about getting that test to work, more importantly , they have been educating me and giving me valuable lessons.
Click to expand...
I actually provided the code so that everyone would be looking at the same working example. I read through a lot of explanations but did not see those examples in use in a practical sense, so I rebuilt your pages with a bunch of the comments so that you could see them in use. Granted I could have implemented all of the suggestions, but I felt it would be better to have a working base.
I don't often get accused of simply pasting code answers all over the place, I just didn't have the energy to fully comment that code with all of the changes that had been mentioned in the previous 50 posts.
I'm glad you have learned a great deal from this thread, but since I was a little unhappy about the implications of your post I probably will stay out of the rest of this thread.

barcode_1.gif
 
Upvote 0 Downvote
are there any other declarations i should know about, where is the list and syntax for these, what language is a declaration?

this gets far to confusing for me at times.

but since I was a little unhappy about the implications of your post I probably will stay out of the rest of this thread.
Click to expand...

implications? what do you mean.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
for crying out loud, the original question is not that difficult:

Code: 
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.0 Strict//EN"
    "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		
		<title>test</title>

		<style type="text/css">
			@media screen {
				#bar {
					display:none;
				}
			}
			@media print {
				#foo {
					display:none;
				}
			}
		</style>
	</head>
	<body>
		<div id="foo">i will show on screen only</div>
		<div id="bar">i will show on print only</div>
		<div>i will show on both</div>
	</body>
</html>

additionally, you can externalize the stylesheets like so
Code: 
@media screen {
	#bar {
		display:none;
	}
}
Code: 
@media print {
	#foo {
		display:none;
	}
}

and simply import them the same way:
Code: 
<style type="text/css">
@import url(styles/screen.css);
@import url(styles/print.css);
</style>

-jeff
try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big
 
Upvote 0 Downvote
nope still can't work out this parent/child thing Jeff, I have correct, valid HTML now, both CSS files valid on w3c also, but I still get a blank page.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<HTML>
<HEAD>
<TITLE>Commission Statements</TITLE>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<LINK href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/test.css"[/URL] media="screen" type="text/css" rel="stylesheet">
<LINK media="print" href="[URL unfurl="true"]http://www.homeloanpartnership.co.uk/style/statprint.css"[/URL] type="text/css" rel="stylesheet">
</HEAD>
<BODY>
      <TABLE border="0">
        <TR>
          <TD class="titlecell" align="center">
Select Statement
	</TD>
	</TR>
        <TR>
          <TD valign="top" align="center">           
            <DIV id="statement">THIS SHOULD PRINT</DIV>
	</TD>
	</TR>
	</TABLE>	
</BODY>
</HTML>

i've added classes to the table with a display:block; in the print but still i get a blank page.

not that i want the table persae to be visible for printing only the content of a TD cell (i.e. the DIV), I take it this method is not posible due to this parent/child thing you explained, is that it?

oh well if nothing else i've learned a whole heap about HTML and validation.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
not in the "test" document no, but there are multiple nested tables and divs / lists etc.. in the actual "Real Document", I wanted to understand what needed to be done to make this work.

what hierachy of nests you have to go to / display to get the content i want out.

although jemminger's post might work "as is" it's not transferable to my working project, 3 divs and no tables or other nested tags, will not help me solve this problem.

if you cannot display elements of nested tags without showing the WHOLE thing (or parent i beleive Jeff was implying) then this is not a workable solution.

from the post labeled "for crying out loud" have nothing but DIV's, put them in a table, it doesn't work, so isn't a solution.

this probably overlaps into that "Tables are dead, why am I using them argument", but if TABLE is a valid HTML tag then it SHOULD be used, else it can be argued the markup isn't symantically correct (remember that one Jeff/Dan - :-) )

i think we concluded many post prior that for this specific application the addition of redundant DIVs will be necessary to explicitly hide them via the print css file.

i'm still unsure if the print will then look right,

lets say you have an image with text to the right, but to print you hide the image, does the text print "hard left" and shift to where on screen the image is, or does it print in exactly the same place as it is in screen leaving a blank space to the left.

any input on that puzzler would be appreciated.

p.s.

to be fair as per Foamcow's commment, I have given everyone who has posted a star, whether I agree with every comment to my posts or even use the supplied code, any reply is always very much appreciated, so thanks to all of you!





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
If you remove the image with "visibility:hidden;" then the text will behave as if it was still there.

If instead you remove it with "display:none;" then the text will behave as if the image wasn't there.

It's apparent (to me at least) that you still don't quite understand the underlying reasons why we do things this way.
Anyone else agree?
Whilst many people are here trying to help it's fruitless at the end of the day as the basic grasp isn't quite right.


I think, if you want to employ the power of CSS and semantic markup you really need to go back to "Web Standards 101".
Take some time out and read "Designing with Web Standards" by Jeffrey Zeldman and Dan Cederholm's "Web Standards Solutions". They will launch you well past these sorts of difficulties in a much more efficient way than what is going on here.

Many comments you make and things you ask bear a direct relation on the fact that you don't seem to "get" the whole semantic markup, separation of style and content, valid markup thing yet. You are getting there and kudos to you for giving it a go.

That's not a criticism particularly, I just think you are maybe trying to walk before you can run. Or perhaps another way to put it, you are trying to build a castle on sand.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question Question
Media query: display = none/inline/block
Replies
1
Views
1K
PeDa
PeDa
jizzer
  • Locked
  • Question Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
2K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip Helpful tip
Solution to CSS Two Level Horizonal Menu
Replies
1
Views
1K
pmonett
pmonett
PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
935
PeDa
PeDa
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top