Website and photo outsourcing solutions

Do you print website pages? How many times did you press the print button only to get a piece of garbage from the printer? Now, do you want to be one of elite webmasters who produce Web pages far superior to your competition which produce exactly what your visitor wants? Follow these steps and you are on your way:

Use CSS. It's a great and easy way to give your readers a wonderful (and hopefully clean of zealous adverts) layout equipped with any logos, pertinent margins, information etc that you wish. Please check out my online printed version by using your browser print preview button or open up this screenshot.

To accomplish this, you'll have to give a few extra attributes in the sections you want to print and eliminate those which you don't (which is the way I have set my website. I've also included some extra information on the top of my content to remind people where they have received this awesome info.

I have eliminated all (most) page styling to keep things very simple for learning.. you can skip all the previews and just download the sample files here if you like.

 <link href="screen.css" type="text/css" rel="stylesheet" media="screen">
  
  <style type="text/css">
   .printversiononly {display:none;}
   </style>

 <link href="print.css" type="text/css" rel="stylesheet" media="print">
  
  <style type="text/css">
   #advert, #menu, #header, #sidebar {display: none;}
   .printthis {display: inline;}
   </style>

 <div id="advert">
  <p>..here are my ads..</p>
  </div>

 <div id="menu">
  <p>..here is my menu..</p>
  </div>

 <div id="header">
  <p>..here is my header..</p>
  </div>

 <div id="sidebar">
  <p>..here is my sidebar..</p>
  </div>

 <div id="awesomebloginfo" class="printhis">
  <div class="printversiononly printthis">
   This content has been made available to you
   from *Robin-Ann.com* (www.robin-ann.com)
   <br>Website and Photo Outsourcing Solutions
   We Care About Your Image!
   <p>..here is my blog post..</p></div>
   </div>

 <div id="footer" class="printthis">
  <p>..here is my footer..</p>
  </div>

As you can see from the code, there are two css class attributes for the sections we want to print, one called (easy-enough): 'printthis', the other id your own id for the element. There is also the added material which will only show on the printed version which I called: 'printversiononly'. [ During my limited research for this tutorial I did not see anyone 'big' using this 'print-only' markup so as far as I know I am the first to post it :o) -- Now you also have the ability to specifically market yourself in new ways on the printed page!]

A List Apart A List Apart : Going To Print uses wrappers to wrap the content to be printed. My problem with this is that I don't want to wrap up all the things I want printed - to me that is redundant. I feel as though I've simplified that coding with my own method of using display:none on my major id divs. Maybe it's not cross browser? (have not tested) but it does work in IE and Mozilla which is all I really worry about.

Another great implementation of CSS code CSS2 Printing http: and mailto: Samples is the recognition of these attributes with CSS2 and using :before and :after codes which let you print the links. I won't be going into this here because Mozilla seems to like this code just fine where IE does not and I'm not happy with the printed results so I am looking into other ways to manage this.

Labels: CSS, web, Web Development, web-design