@Media Print CSS 7

[1DMF]

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.

 

[Foamcow]

aren't you SUPPOSED to walk before you run?

err... yes, you have a point there

oh for an edit button

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[1DMF]

lol - typo's gotta love em.

so basically i'm trying to implement something, that requires the underlying parts to be based on a certain structure.

until i get the underlying structure correct i cannot build upon it with the content i am trying to acheive.

i need to rewrite the the basic HTML, before i can sucessfully implement the CSS print function.

rather than trying to bolt it on (which is what i'm presently attempting), i need to make it suitable for this functionality.





"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

Well kind of.
You may or may not be able to achieve what you want using your current markup and CSS.
However, by getting the basics right and really understanding WHY things are done a particular way will really help you in situations such as these.

Give a man a fish etc...

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[1DMF]

ah that's the hard part, understanding WHY things are done a certain way, because that's subjective to personal tastes.

many ways to skin a cat etc....

and not necessarily one way is better than the other, just different.

I've come to the conclusion though over what each "language" is used for and hope by sticking to that principle my code will improve, although I'm having a hard time understanding how I can achieve some of this with PERL as my backend processing language, but thats another story / thread.

basically, my synopsis is this...

PERL (language of choice) is for processing /dynamic content.
HTML is for structure
CSS is for layout & formating

and although you can mix and match all three, really you shouldn't.

however, how you can use static HTML & CSS to produce dynamic content, is beyond me, once I get over this hurdle, then the rest should be plain sailing (I hope).

I also need to break from tables, by the sounds of it, but i don't know how, a comment in hear talked about tables should only be used for tabular data, sorry but anything can be conciderd tabular data.

My current statement i'm having all this print CSS trouble with is made up of a table a 2 x 2 table that column 2 spans 2 rows making 3 cells in total.

I guess i need to look at them as being 3 sections, rather than cells in a table and go from there, is that the right approach?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

Re. the dynamic issue... Saying (about Perl, HTML, CSS):

although you can mix and match all three, really you shouldn't.

and then saying:

how you can use static HTML & CSS to produce dynamic content, is beyond me,

seems strange to me. You've ruled out using server-side coding (quote 1), and then marvelled at how client-side coding isn't able to produce dynamic-enough results.

There is nothing wrong with mixing server and client-side. Nothing at all.

Re. the table issue:

tables should only be used for tabular data, sorry but anything can be conciderd tabular data.

Insofar as beauty is in the eye of the beholder, yes. I suppose what I'm saying is that while anything could be considered tabular to some extent, not everything should be considered to be tabular data. If the answer to the question "am I putting this content in a table purely to make it easier to lay out" is "yes", then chances are you should not be using a table for it.

My current statement i'm having all this print CSS trouble with is made up of a table a 2 x 2 table that column 2 spans 2 rows making 3 cells in total.

I guess i need to look at them as being 3 sections, rather than cells in a table and go from there, is that the right approach?

Well - taking into account what I've just said, how about giving some more information about what the data is, as well as any relevant contextual information. It may well be that you should use a table for it, or it may be that you probably should not. Without knowing more about the data, it would be hard to say.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

morning Dan, welcome to monday,a new week and a new set of questions from me ;-)

There is nothing wrong with mixing server and client-side. Nothing at all.

Sorry I think you missed where i'm coming from regarding mixing the three and the server side of things, yes of course you need all three to make a dynamic website, but to the best possible extent, the PERL forum will tell you you shouldn't hardcode HTML/CSS directly in your PERL scripts, that was the point i was making, about having the 3 seperate, I can't grasp how you would create dynamic content without something in the PERL generating the dynamic HTML, i'm discussing this in the PERL forum, so don't worry to much about that side of things.

regarding the layout and content of this current statement project.

the content is as follows, top left cell has a menu created via nested lists and then drawn via javascript & CSS, rememebr you & jeff helped me with the whitespace and other issues on that one.

the "cell" below the menu has the print button, the cell below that (oh it's a 3 x 2 and col 2 spans 3 rows - do'h) has a bit of text explaining how to navigate the statements etc.. the spannned 2nd column is the statement (currently an iframe in the 'Live' version)

and yes they all have there content within additional nested tables, purley for layout, so i think many of them can and SHOULD go.

that way I will end up with 4 divs, 3 on top of each other and the main one to the right of all three.

The first step I think is to understand how you can create 4 divs and arrange them via CSS in the layout i want.

to acheive this normally i'd use nested tables, as you all know, but once i have the 4 divs, In the place i want, then I can look at changing the content of each to remove the unnecessary nested tables.

hopefully what I would end up with is correctly structured and valid HTML, no nested tables, within nested tables, and then harness the power of CSS, to manipulate screen & print formats.

can you give us some pointers please.

regards,
1DMF






"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

One way, and not necessarily the best way would be like so

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">

<head>
<title>Untitled page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Generator" content="EditPlus" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />

<style>
		html * {
			margin:0;
			padding:0;
		}

		div, ul { 
			border:1px solid #ccc; 
			margin:6px;
			padding:3px;
		}

		ul {
			list-style:none;
		}

		#wrapper {
			float:left;
			width:95%;
		}

		#menus {
			float:left;
			width:150px;
		}

		#content {
			margin-left:170px;
		}


</style>
</head>

<body>
<div id="wrapper">   
   <div id="menus">	
		<ul id="navigation">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
		
		<div id="printButton">
			print
		</div>

		<div id="explanation">
			explanation
		</div>
   </div>

	<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum libero sem, auctor at, accumsan vitae, nonummy vel, dui. Nulla bibendum fermentum ligula. Donec auctor nulla quis tortor. Nunc facilisis justo id sem. Morbi eu mauris sed quam vulputate viverra. Integer vitae augue quis metus interdum iaculis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Suspendisse a risus. Mauris vulputate metus vitae nisi. In venenatis. Donec sed justo quis justo fringilla aliquam. Nulla varius, odio ac gravida dapibus, ipsum sapien lobortis libero, eget rhoncus risus quam eu turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> 

		<p>Nullam pretium malesuada arcu. Praesent magna. Sed tempor magna non dolor. Fusce euismod tincidunt nisl. Aliquam et libero a sem malesuada egestas. Nam sollicitudin fringilla massa. Nunc id orci eget enim rhoncus lobortis. Aliquam quis tellus vitae tortor egestas varius. Sed mi nulla, cursus ut, nonummy at, commodo eu, turpis. Vestibulum pulvinar mattis diam. Maecenas vitae libero. Mauris feugiat nunc nec nulla elementum auctor. Donec id dui. Suspendisse imperdiet convallis nulla. Fusce lobortis odio in elit.</p>

		<p>Praesent vel erat. Phasellus at odio nec ante tincidunt ultricies. Fusce vulputate congue dui. Nulla volutpat. Proin bibendum felis id neque. In hac habitasse platea dictumst. Phasellus dui ligula, euismod eu, consequat et, placerat nec, est. Duis fringilla purus. Sed iaculis leo vel nibh. Ut ullamcorper, justo ac semper tincidunt, massa lectus ultrices mi, a fermentum tellus risus a lectus. In facilisis nunc tempus dui. Pellentesque bibendum pede et felis. Integer sollicitudin, ligula vel nonummy mollis, elit sapien accumsan massa, eget cursus erat purus adipiscing neque. Phasellus interdum justo a neque. Vivamus aliquet consectetuer metus. Nulla auctor lorem eu nunc. Vivamus odio lacus, tempus ut, suscipit nec, tincidunt fringilla, leo.</p>
	</div>
</div>
</body>
</html>

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[1DMF]

and not necessarily the best way

why do you say that foamy?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

Because it's right off the top of my head and there is more than one way to skin a cat!

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[1DMF]

yeah but you have a wonderful head and my cats a Sphynx

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[manarth]

Welll....

'foamy' has put the style declarations in the same file as the html, instead of seperating css into a seperate reusable file...plus his XML declaration states he's using UTF-8, whilst his <meta> tag specifies iso-8859-1, and his page title is 'Untitled page'.

By the way, why use "[tt]html *[/tt]"? Surely "[tt]*[/tt]" would do the job?

</nitpicking> ;-)

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

 

[kaht]

yeah but you have a wonderful head

Maybe you 2 should get a room.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[Foamcow]

'foamy' has put the style declarations in the same file as the html

Easier to demo in this case.

plus his XML declaration states he's using UTF-8, whilst his <meta> tag specifies iso-8859-1

Oooh, yeah... I better fix that template

and his page title is 'Untitled page

I'm lazy

By the way, why use "html *"? Surely "*" would do the job

Dunno, habit I guess. It sort of looks neater to me. No real reason though I guess. Does "*" alone work? Never tried it.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[manarth]

'foamy' has put the style declarations in the same file as the html

Easier to demo in this case.

I know...As you say, there's more than one way...

By the way, why use "html *"? Surely "*" would do the job

Dunno, habit I guess. It sort of looks neater to me. No real reason though I guess. Does "*" alone work? Never tried it.

[tt]html *[/tt] means all elements which are descendants of html. It doesn't include the html element.
[tt]*[/tt] means everything, including the html element.
[tt]* html[/tt] is an IE hack (the opposite to the child selector (>) hack), because IE is the only browser that thinks html has a parent.

I'm lazy

Yeah, I can relate to that!

---
Marcus
better questions get better answers - faq581-3339
accessible web design - zioncore.com

 

[1DMF]

Maybe you 2 should get a room.

lol - will the penthouse suite do you foamy? - p.s. I'm a bloke and straight and married!

right, back to reality......

* html is an IE hack

what does I.E hack mean, does it mean it's not valid and correct CSS, is hacking allowed, i thought hackers were bad!

Does this mean you could have 100% "Compliant", Validated code and it still won't work in some browser for some reason.

So am I chasing Nivarna that doesn't exist?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[BillyRayPreachersSon]

In this case, as with most CSS hacks, the markup is perfectly valid CSS.

The things with CSS hacks, is that some browsers parse them differently from others, so you can use known hacks to apply different CSS to different browsers without sniffer scripts, underscore hacks (that don't validate), etc.

There are many, and they are well documented at many places (like quirksmode.org, to name one).

I wouldn't stress about them too much unless you actually find that you need to use one.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[1DMF]

cool, it's the word "Hack", that raised alarm bells, thats all, but if I don't need to worry about it, then I won't.

I always know where to come if I have a specific problem that needs some expert advice.

cheers,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[kaht]

thread215-1162601

-kaht

How much you wanna make a bet I can throw a football over them mountains?

 

[1DMF]

don't kill the thread yet, i haven't implemented all the great help i've got from it.

busy working on the template side of things, once i have a template, away from my PERL, then I can try these print css things, wow I might even get it to work in Opera yet.

though i'm the only person in my idustry I know has a copy

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[cLFlaVA]

i agree with kaht. i've come close to un-checkmarking this thread for the better part of a week.

thread215-1162601

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]