80 hits1234

1. CSS Design: Going to Print

A List Apart, Tutorials, 23 KB, 2843 words

You've seen them before: links that say "click here for printer-friendly version" or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that's more suitable for print output. Maybe that somebody was even you.

Print style sheets to the rescue

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We're pretty used to styling...

continue reading ...

2. High-Resolution Image Printing

A List Apart, Tutorials, 19 KB, 1345 words

You probably already know how to use media-specific CSS to provide a suitable layout for the printed page.

But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print? Awesome? Here's how.

HTML image sizing

HTML and CSS allow us to force images to display in a different size than their native dimensions. I recently began wondering whether higher resolution devices like printers might be able to use the pixels omitted by the relatively low resolutions intended for screen viewing

So I began an experiment to compare the way resized images look on screen to their appearance in...

continue reading ...

3. Designing for Context with CSS

A List Apart, Tutorials, 11 KB, 1070 words

Web standards promised us improved multimedia delivery: the ability to optimize content for computer screens, handhelds, printers, projection devices, and other media.

The CSS required to accomplish this is simple. All you have to do is import a separate style sheet for each media type to override the style selectors for the primary medium. Check out Eric A. Meyer's fantastic and influential article " Going to Print" for an in-depth example of how to do this. (Warning: some media aren't fully supported.)

Most of the discussion thus far in the design community has focused on styling content for varying media. Specifically, designers have tried to improve the...

continue reading ...

4. Print It Your Way

A List Apart, Tutorials, 13 KB, 1317 words

Web developers have various methods for creating print friendly versions of their websites. By using a server side routine or print stylesheets, the print version may strip out images and navigation that lose their meaning on the printed page, and perhaps display the page in a single column using a different font with a different size.

But what happens when there is no printable version, or the printable version includes ads or other settings that don't suit you, the user? That's where user stylesheets come in. Armed with a little CSS knowledge and some web development tools, you can easily create your own print versions formatted exactly the way you want them....

continue reading ...

5. CSS: Copyrightable?

MezzoBlue, Tutorials, 17 KB, 1411 words

Yesterday's post began with a soliloquy on the relative ease of theft that comes along with standards-based design. This is an issue I'm deeply concerned about, for obvious reasons. I've had to tackle some hard questions head on when it comes to CSS theft. I still don't have any answers, only opinions.

Some excellent discussion ensued on both topics yesterday, but there was some confusion between them. Let's free this topic from the specific case, and move along to the more general issue at hand.

CSS is a design language. It's the foundation of a site layout, just as much as PostScript is the foundation of a poster or brochure. Can the code...

continue reading ...

6. Invasion of the Body Switchers

A List Apart, Tutorials, 13 KB, 1039 words

Since it was first released in 2001, Paul Sowden's Style Sheet Switcher has been downloaded and used by thousands of designers and developers and has spawned many client-side and server-side adaptations.

Having used Paul's script on numerous projects, I began to wonder how style-sheet switching could be extended to give users even more choices or accessibility enhancements, so I turned to my good friend Brothercake to make my ideas a reality and Invasion of the Body Switchers was born.

Looking back at the original Style Sheet Switcher

Fantastically simple in its implementation, Paul's original script was not without its woes.

Anchors which trigger the switching functions are...

continue reading ...

7. From Table Hacks to CSS Layout: A Web Designer’s Journey

A List Apart, Tutorials, 32 KB, 4130 words

This is a journey from six years of conventional web design practice to the way we'll build sites in the future. Only it's not set in the future. You're soaking in it.

From the beginning, we've done whatever we had to do to make our sites work in every browser. In the world of non-standard HTML Design, we bolt every word, every image into place by manipulating table cells.

And we solve problems by replacing them with new ones. Netscape 4 ignores the CSS {margin: 0;} declaration? Extend the BODY tag with the Four Horsemen of Non-Validation: LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT. IE4 doesn't fully support the CSS border property? Fake it by...

continue reading ...

8. A Backward Compatible Style Switcher

A List Apart, Tutorials, 18 KB, 1895 words

In ALA Issue 126, Paul Sowden famously introduced the joys of alternate Style Sheets per W3C specs. Not content to elucidate theory, Sowden devised a compliant Style Sheet Switcher built with a few lines of JavaScript, and presented it to ALA's readers and the entire design / development community as an Open Source gift.

That was cool – really neat actually – and fit perfectly into the vision of an accessible web. When the article broke, I was building a new site and wanted to include this gadget, but I faced two problems: • I'm incapable of directly copying someone else's code. • I had also had the idea rumbling about in my head of writing my...

continue reading ...

9. CSS Crib Sheet Archive

MezzoBlue, Tutorials, 8 KB, 157 words

The Crib Sheet has moved to a permanent home. I threw it into this site's template for now, but I may choose to do something differently, eventually. Perhaps a PDF or two. The good news is that my print style sheet should allow for a relatively clean printed version for now.

I'm referring the Sheet to this post, and leaving it open for comments indefinitely. Feel free to add more suggestions below. Remember the focus: practical, real-world tips that aren't picked up in the spec, or by the validator. Things that are easy to trip over, and may not make sense without external knowledge.

About This Entry:

You are reading "CSS Crib Sheet Archive", an...

continue reading ...

10. Simple Templating

MezzoBlue, Tutorials, 15 KB, 1144 words

Simple static site templating with a CSS focus.

I use a very lightweight templating system of my own devising on this site that strikes me as something that might be of value to someone, somewhere. No database required, although you could certainly use one in conjunction with this method if you feel so inclined.

This is pretty basic stuff, so feel free to skip this one if you're an old hand at server-side scripting. Then again, it sets up a lot of the CSS tricks I use around here, which may prove interesting even so.

Around 1998 or so, I maintained a semi-large site for a local ISP which grew pretty quickly, so templating was largely a matter of global find and replace. It...

continue reading ...

11. Using Movable Type for slideshows

Six Apart ProNet Weblog, News, 22 KB, 1027 words

Last week, CSS guru Eric Meyer posted his system called S5, a simple and elegant way to publish an XHTML file that can be displayed by any modern browser as a slideshow.

Using his primer and a little bit of custom templating in Movable Type, it's easy to create a template that can show your recent blog posts as a slideshow. (If you just want to jump to a live example, you can view the Professional Network blog as a slideshow.)

The key to making S5-compatible slideshows in Movable Type is to create a template that generates output with the appropriate markup to work with the CSS and Javascript that S5 requires. Here's the simple template we're using on the Professional Network: • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">...

continue reading ...

12. Printer-Friendly Pages

Learning Movable Type, Tutorials, 37 KB, 2673 words

Updated. Originally posted March 29, 2004. Providing printer-friendly versions of your weblog entries can be useful to your weblog readers. For example, my cooking weblog has printer-friendly versions of the recipes like this. Learning Movable Type links to printer-friendly versions at the end of each entry. There are several ways to create printer-friendly versions. I've outlined two methods in this tutorial. The first method is a simple header tag and CSS trick that automatically generates printer-friendly pages whenever someone goes to print a page from your blog. The second method is a bit more involved, creating a printer-friendly archive template with associated...

continue reading ...

13. Dynamically Conjuring Drop-Down Navigation

A List Apart, Tutorials, 13 KB, 1164 words

Wouldn't it be great to allow our users to reach all the pages of our site via a handy drop-down menu - without expending extra effort adding one to each page?

We can, by harnessing the powers of a seemingly forgotten HTML element and adding a tap of our JavaScript wand (or a drop of a less magical PHP potion).

The missing link

The LINK element is part of the HEAD section of an HTML document, and provides links to other documents (including style sheets). Some browsers use its data to show a toolbar - alas, the son of the giant of Redmond does not, and his followers are legion.

Let's teach it what to link

If we want to link to several articles,...

continue reading ...

14. Leadin Macro

Brad Choate, Tutorials, 50 KB, 1273 words

Lead-ins are an eye-catching mechanism usually found in print publications. Recreating that effect for the web is easy to do, but it could be easier. Wouldn't it be nice if there were a 'leadin' tag that you could use to identify the word or phrase you want to style like that? Well...

MT-Macro to the rescue! Actually, the technique described here utilizes 3 of my Movable Type plugins. All functioning...

continue reading ...

15. Let Them Eat Cake

A List Apart, Tutorials, 19 KB, 2014 words

There has been a growing debate lately that pits accessibility against usability, but there's no reason we can't have both. If you can make a page more usable without making it less accessible, by all means do so; do not let your inability to translate certain usability enhancements into accessible functions or features restrict your use of those enhancements. As long as the enhancements do not restrict accessibility, go for it.

As many of you know, with JavaScript and the DOM, we have the ability to control every element on a well-structured web page. It is my feeling that, using the DOM, we can improve the usability of a page without restricting its accessibility....

continue reading ...

16. Dynamic Text Replacement

A List Apart, Tutorials, 22 KB, 2589 words

Text styling is the dull headache of web design. There are only a handful of fonts that are universally available, and sophisticated graphical effects are next to impossible using only standard CSS and HTML. Sticking with the traditional typefaces is smart for body text, but when it comes to our headings - short, attention-grabbing blocks of text - it would be nice to have some choice in the matter. We've become accustomed to this problem and we cope with it either by making the most of the few fonts we have, or by entirely replacing our heading-text with images.

Most sites that replace text with images do so using hand-made images, which isn't so terrible...

continue reading ...

17. Cross-Column Pull-Outs

A List Apart, Tutorials, 17 KB, 1795 words

Editor's Note: The following technique accomplishes its goals by using a few markup elements that lack innate semantic value. For some of you, that may place this means of achieving cross-column pull-outs beyond the pale. For the rest of you, bon appetit.

Print designers have long relied on the ability to wrap text around anything - most commonly around a picture centered between two columns. This design option has not been available for web designers ... until now.

Basic two-column layout

To use this technique, we must first set the stage.


<div id="overall"> <div class="col"> <p>…</p>...

continue reading ...

18. Retooling Slashdot with Web Standards

A List Apart, Tutorials, 14 KB, 1568 words

{Part I of a two-part series.}

Ask an IT person if they know what Slashdot's tagline is and they'll reply, "News for Nerds. Stuff that Matters." Slashdot is a very prominent site, but underneath the hood you will find an old jalopy that could benefit from a web standards mechanic.

In this article we will show how an engine overhaul could take place by converting a single Slashdot page from their current HTML 3.2 code, nested tables, and invalid, nonsemantic markup, to a finely tuned web standards racing engine. The goal is not to change Slashdot, but to rebuild it with web standards and show the benefits of the transition.

Before you panic because...

continue reading ...

19. Site Design, the Easy Way

Movalog, Tutorials, 29 KB, 1025 words

There are several ways to make your life easier whilst having fun with HTML markup and CSS design.

Learning, the fun way

When I first tinkered around with HTML and CSS, I was a bit unsure and un-inspired as to what to do, but I employed a technique that some may frown upon. Using a variety of tools, I took a peek at stylesheets that had produced something I like. I didn't steal them but rather learnt from them on how to do such and such a thing. I would recommend trying this out as it is a hands on way to learn what various bits of CSS code do - and its much nicer to see it in action done the right way.

Sidebar Panels

If you use Mozilla/Firefox as your browser, you are in luck. EditCSS and...

continue reading ...

20. Manage Your Content With PHP

A List Apart, Tutorials, 25 KB, 3042 words

In this article, we'll build a simple, template-driven site that separates style, content, and structure in your website. We'll create a cross-browser stylesheet switcher that remembers the user's preferences, touching on php variables, cookies, if statements, and including pages with require_once.

Separating style, content, and structure

The separation of style from content has become the bugbear of the HTML developer. Traditionally, we've used well-written CSS and XHTML to achieve this separation, and we've seen how much easier it is to update our sites or provide multiple styles when we write our markup this way. By adding some...

continue reading ...


You want to post some comment? Please use the announcement post on the Movable Type Weblog.

If you want to give some feedback concerning a specific query, please use the feedback button that is shown after a search has completed.

mgs | September 27th 2005