HTML/CSS Service

Printing the Web CSS Techniques and Tips

Category: CSS, CSS Examples, CSS Tutorials    |    1,015 views    |    Add a Comment  |   

There are many options and techniques you can use developing print layouts. Here is a quickoverview of some interesting solutions you can use to generate print layouts “on the fly”

  • Footnote Links: Improving Link Display for Print
    Aaron Gustafson presents a CSS+JavaScript-based method, which replaces all links on a page with corresponding footnotes. Elegant and extremely (!) useful solution.
  • 10 Minutes to Printer-Friendly Page
    Print-layouts can be generated with PHP. Marko Dugonjic shows, how.
  • Five Simple Steps to Typesetting on the web: Printing the web
    Mike Boulton gives an example on how to design a nice print layout, which looks like print layout in traditional magazines.
  • From Screen to Print: Creating a Print CSS in Dreamweaver
    This article will examine how our layout displays one set of elements on the screen, yet when printed, prints a different layout using elements that do not display on screen.You’ll learn about media types and how to take advantage of them and using the cascade to create lightweight, compact pages for print. Since Community MX constantly tweaks its site, some things may be slightly different if you read this article a few months from its publishing date.
  • Read more…

    Share/Save/Bookmark

     

    CSS Principles For Keeping Your Code Clean

    Category: CSS Examples, CSS Tutorials    |    898 views    |    1 Comment  |   

    1. Strict DOCTYPE

    If we are going to do this, let’s just do it right. No need for a discussion about whether to use HTML 4.01 or XHTML 1.0: both of them offer a strict version that will keep us nice and honest as we write our code.

    Our code doesn’t use any tables for layout anyway (nice!), so there really is no need for a transitional DOCTYPE.

    Resources:

    2. Character set & encoding characters

    In our <head> section, the very first thing should be the declaration of our character set. We’re using UTF-8 here, which is swell, but it’s listed after our <title>. Let’s go ahead and move it up so that the browser knows what character set it’s dealing with before it starts reading any content at all.

    While we’re talking about characters, let’s go ahead and make sure any funny characters we are using are properly encoded. We have an ampersand in our title. To avoid any possible misinterpretation of that, we’ll convert it to &amp; instead.

    Resources:

    Read more…

    Share/Save/Bookmark