CSS Links and Tips - Print Version

CSS Links and Tips

 

CSS Layouts

Struggling with a table-less CSS layout?

Getting a cross-browser layout working can be difficult. There are several resources that can help. One of the easiest to use is the Inkfish 'Layout-o-matic' tool, which lets you select the type of layout you want and then generates the css for it.

See www.inknoise.com

They also have a tool for creating CSS based rollovers which is useful to explore.


Using CSS to format printed versions of a page.

If you try to print a web page more often than not you get navigation links, large pictures that take up a lot of space (and ink), banner adverts and a host of other things you don't need.

Alternatively you may have the option of a 'Print this page' link that opens another window with a fairly plain version of the page suitable for printing.

There is a better way....

This is done by specifying an '@media print' group of styles within your stylesheet:

@media print{

.noprint {display: none;}
body {font-size: 12pt;}
}

This example specifies that the styles enclosed apply to printing only and contains a class called 'noprint' which lets you define areas of the page as non-printable, perhaps menus, graphics or banners. It also sets the body font-size to 12pt, rather than pixels, em or %'s, which aren't really suitable for printing.

In a similar way you can specify certain areas of a page for printing only, using a '@media screen' group of styles. The example below uses a class 'nodisplay' with 'display: none;' to define area of the page you don't want displayed on the screen. (The classes can use any name you want for easy recognition).


@media screen {

.nodisplay {display: none;}

}
 

To see this in action, print this page or use 'print preview'. You'll see that the top of the page, the footer and the newsfeed at the right hand side of the page are not printed. A title is printed, but it's not the one shown on the screen.

Indenting the second and subsequent lines of a paragraph

It's sometimes useful to indent the second and subsequent lines of a paragraph. For instance where you need decimal lists, something you can't do with a normal UL.

1.1 Il dualismo tipico del catarismo, si fondava sulla lettura del Nuovo Testamento, e più precisamente di passi dei Vangeli di Matteo e di Giacomo nei quali è ricordata in più punti la parola di Gesù, ovviamente interpretata come legittimazione evidente della contrapposizione di due principii: "un albero cattivo produce frutti cattivi, non può un albero buono produrre frutti cattivi, ne un albero cattivo produrne di buoni."

1.2 Fino a pochi decenni orsono l'eresia catara era conosciuta quasi esclusivamente attraverso forme indirette, provenienti da relazioni dei suoi oppositori, tra cui atti dell'Inquisizione e note di polemisti cattolici. Uno dei pochi testi catari noti era il cosiddetto Rituale di Lione, pervenuto in appendice ad una versione occitana del Nuovo Testamento.

Give the <p> tags a style:

.indent {
padding-left:25px;
text-indent:-25px;
}

Protecting Email addresses (not a CSS tip!)

The easiest way to stop email harvesters getting your address off a web page is by not putting it there in the first place!

Instead of an email address give your users a response form to fill in and send. You may have to protect against robot form submitters but that's probably the easier option.

If you MUST have an email address on a page, add it in html in the following format and DON'T make it a clickable link.

me<code>@</code>mysite.com

This shows correctly, allows users to copy and paste it into their email client, but isn't seen by the automatic harvesters.

Hint: You can check whether the spam bots can 'harvest' email addresses from your pages by using the tool at:

http://willmaster.com/possibilities/demo/RetrieveEmails.cgi

Other Links

Ten CSS tricks you may not know from Evolt.org

70 Expert Ideas For Better CSS Coding - Worth reading!

RoundedCornr - Want to create boxes with rounded corners? This tool does it for you, creating the necessary images, html and CSS. Various options available too.

WebsiteTips.com CSS Section - a huge resource of CSS links and tips

 

 


Design and Development News



A List Apart
  • JavaScript Minification Part II Variable naming can be a source of coding angst for humans trying to understand code. Once you’re sure that a human doesn’t need to interpret your JavaScript code, variables simply become generic placeholders for values. Nicholas C. Zakas shows us how to further minify JavaScript by replacing local variable names with the YUI Compressor.
  • SVG with a little help from Raphaël Want to make fancy, interactive, scalable vector graphics (SVGs) that look beautiful at any resolution and degrade with grace? Brian Suda urges you to consider Raphaël for your SVG heavy lifting.
  • Prefix or Posthack Vendor prefixes: Threat or menace? As browser support (including in IE9) encourages more of us to dive into CSS3, vendor prefixes such as -moz-border-radius and -webkit-animation may challenge our consciences, along with our patience. But while nobody particularly enjoys writing the same thing four or five times in a row, prefixes may actually accelerate the advancement and refinement of CSS. King of CSS Eric Meyer explains why.
  • Supersize that Background, Please! Background images that fill the screen thrill marketers but waste bandwidth in devices with small viewports, and suffer from cropping and alignment problems in high-res and widescreen monitors. Instead of using a single fixed background size, a better solution would be to scale the image to make it fit different window sizes. And with CSS3 backgrounds and CSS3 media queries, we can do just that. Bobby van der Sluis shows how.
  • Stop Forking with CSS3 You may remember when JavaScript was a dark art. It earned that reputation because, in order to do anything with even the teensiest bit of cross-browser consistency, you had to fork your code for various versions of Netscape and IE. Today, thanks to web standards advocacy and diligent JavaScript library authors, our code is relatively fork-free. Alas, in our rush to use some of the features available in CSS3, we’ve fallen off the wagon. Enter Aaron Gustafson’s eCSStender, a JavaScript library that lets you use CSS3 properties and selectors while keeping your code fork- and hack-free.
  • Taking Advantage of HTML5 and CSS3 with Modernizr Years ago, CSS browser support was patchy and buggy, and only daring web designers used CSS for layouts. Today, CSS layouts are commonplace and every browser supports them. But the same can't be said for CSS3 and HTML5. That's where Faruk Ateş’s Modernizr comes in. This open-source JavaScript library makes it easy to support different levels of experiences, based on the capabilities of each visitor’s browser. Learn how to take advantage of everything in HTML5 and CSS3 that is implemented in some browsers, without sacrificing control over the user experience in other browsers.
  • Web Fonts at the Crossing Everything you wanted to know about web fonts but were afraid to ask. Richard Fink summarizes the latest news in web fonts, examining formats, rules, licenses, and tools. He creates a checklist for evaluating font hosting and obfuscation services like Typekit; looks at what’s coming down the road (from problems of advanced typography being pursued by the CSS3 Fonts Module group, to the implications of Google-hosted fonts); and wraps it all up with a how-to on making web fonts work today.
  • Quick and Dirty Remote User Testing User research doesn’t have to be expensive and time-consuming. With online applications, you can test your designs, wireframes, and prototypes over the phone and your computer with ease and aplomb. Nate Bolt shows the way.
  • Responsive Web Design Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte advocates we shift our design thinking to appropriate these constraints: using fluid grids, flexible images, and media queries, he shows us how to embrace the “ebb and flow of things” with responsive web design.
  • Habit Fields We have the power to bestow our abilities onto the things around us. By being conscious of our tools, habits, and spaces, and actively conditioning them to help us behave the way we want to behave, maybe we can more efficiently tap into the thousands of hours of creative genius embedded in our everyday objects. Maybe we’ll be able to maximize the capabilities that new technologies afford us without being overwhelmed by the distractions. And, just maybe, we’ll remember what it feels like to be utterly engrossed in our daily work.