Faux Absolute Positioning
Another advantage of the technique is that it mitigates much of the fragility of floats. When the content of a floated box is wider than the box itself, it pushes the next box to the right (and by consequence, the box often drops down). With faux absolute positioning, the box to the right stays in place, no matter what.
Sign Up Forms Must Die
When planning a customer’s initial experience for your web service, think about how you can avoid sign-up forms in favor of gradual engagement. Show potential customers how they can use your service and why they should care.
Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
Two key factors, working in concert, have made the DOCTYPE unsustainable as a switch for standards mode.
How to Size Text in CSS
In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.
Multi-Column Layouts Climb Out of the Box
Create an elastic multi-column layout of equal height.
Automatic Magazine Layout
“Finding an attractive way of displaying any two, three, or four images together (regardless of shape and size) has always been difficult without manual resizing or cropping.â€
Improving Link Display for Print
It seemed my zeal for linkage had come into conflict with my desire to improve print usability.
High-Resolution Image Printing
Your client looks up and says, “Why does our logo look funny when we print the pages?†Do you sigh dramatically, or learn about Ross Howard’s technique for printing high-resolution images via CSS? We vote for option B.
Complex Dynamic Lists: Your Order Please
Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder.
Hybrid CSS Dropdowns
Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it.
Pocket-Sized Design: Taking Your Website to the Small Screen
Creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px.
Drop-Down Menus, Horizontal Style
Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks
Thinking Outside the Grid
“There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’â€
Printing a Book with CSS: Boom!
“HTML is the dominant document format on the web and CSS is used to style most HTML pages. But, are they suitable for off-screen use? Can CSS be used for serious print jobs?â€
CSS Swag: Multi-Column Lists
If you want to present a list in multiple columns you’ll need to compromise. Choose your poison…
Introducing the CSS3 Multi-Column Module
The module’s intent is to allow content to flow into multiple columns inside an element. It offers new CSS properties that let the designers specify in how many columns an element should be rendered. The browser takes care of formatting the text so that the columns are balanced.
Improving Link Display for Print
It seemed my zeal for linkage had come into conflict with my desire to improve print usability.
High-Resolution Image Printing
Your client looks up and says, “Why does our logo look funny when we print the pages?†Do you sigh dramatically, or learn about Ross Howard’s technique for printing high-resolution images via CSS? We vote for option B.
Complex Dynamic Lists: Your Order Please
Help your site’s visitors reach their goals quickly with a dynamic menu that takes its cue from the Mac OS X Finder.
Spruced-Up Site Maps
The clean-n-simple site map gets a nice haircut and and a shoe-shine as Kim Siever shows us how to hook custom bullet styles to troublesome nested lists.
Hybrid CSS Dropdowns
Yup. It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it.
Bulleted Lists: Multi-Layered Fudge
A passion for web standards can become a broken heart when effects that are easy to achieve with table layouts seem to defy the earnest CSS- and markup-conscious designer. Fortunately, new ALA author Nandini Doreswamy loves a challenge. Here she shows how to create two columns of bulleted lists in the flow of text.
The Way It’s Supposed to Work
Groundbreaking accessibility information. Project management and information architecture theory from old-school experts. Plug-and-play solutions to universal design and development problems. Experimental CSS/DOM hacks that use non-semantic elements to do funky design tricks. One of these things is not like the others…which is why we’re introducing a tiny new feature to the magazine.
Cross-Column Pull-Out Part Two: Custom Silhouettes
The cross-column pull-out gave us a new technique for marking up a layout with a pull-out positioned between columns. Now we examine a variation of the technique for wrapping around the edges of a non-rectangular image positioned between columns.
Big, Stark & Chunky
You’ve designed for the screen and made provision for blind, handheld, and PDA browser users. But what about low-vision people? Powered by CSS, “zoom†layouts convert wide, multicolumn web pages into low-vision-friendly, single column designs. Accessibility maven Joe Clark explores the rationale and methods behind zoom layouts. Board the zoom train now!
Cross-Column Pull-Outs
Print designers like to wrap text around images that sit between columns. Now you can, too. Daniel Frommelt takes us where no web layout has gone before.
Invasion of the Body Switchers
Wouldn’t it be great if we could update the classic ALA style switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher.
Pocket-Sized Design: Taking Your Website to the Small Screen
Creating a handheld-friendly style sheet that works well even on handheld screens no wider than 120px.
Drop-Down Menus, Horizontal Style
Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks.
Creating Liquid Layouts with Negative Margins
Two- and three-column, liquid page designs with header and footer are easy to dash off using old-school HTML table layout methods. Designing them in CSS is trickier, and can sometimes even require you to structure your page’s content elements in a specific (and undesirable) order. Negative margins to the rescue! Ryan Brill whips up two quick CSS layouts to demonstrate the power of negative thinking.
Dynamically Conjuring Drop-Down Navigation
Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.
Dynamic Text Replacement
Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.
Mountaintop Corners
Most of us have experience creating “rounded†corners by erasing pixels. It’s a rudimentary web design technique — or so we always thought. But in the hands of Dan Cederholm, author of Web Standards Solutions, this seemingly simple technique paves the way for boxes and borders that can change sizes and colors at your whim.
CSS and Email, Kissing in a Tree
Despite prevailing wisdom to the contrary, you can safely deploy HTML emails styled with good old-fashioned CSS. If you’re not content to roll over and use font tags in your HTML emails, read on.
CSS Design: Custom Underlines
While web designers generally have a great deal of control over how a document should be presented, basic CSS doesn’t provide many options for the style of underlines below the links on a page. But with a few nips and tucks, you can take back creative control of the way your links look. Frequent ALA contributor Stuart Robertson shows how.