A List Apart

Menu

Topic: CSS

  • 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

    ·

    Among the many websites that are out there, few are standards-compliant. Among those few, only a handful sport style sheets adjusted to the needs of handheld devices. Of those which do offer styling for handhelds, not all will fit the smallest, lowest-resolution screens without presenting the user with the ultimate handheld horror: namely, horizontal scrolling. This article presents a set of general suggestions for 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.

  • 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.

  • Print It Your Way

    ·

    Because ALA’s readers are web users as well as designers and developers, we offer this tidbit from Derek Featherstone on creating user stylesheets to print articles to your own specifications.

  • Onion Skinned Drop Shadows

    ·

    Animators use onion skinning to render a snapshot of motion across time. Now, web designers can use this technique to create the truly extensible CSS-based drop shadow.

  • Separation: The Web Designer’s Dilemma

    ·

    Presentation separated from structure. Structure separated from content. The foot bone connected to the ... what were we talking about? Michael Cohen steps in to examine our assumptions and relieve our separation anxiety.

  • 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 Drop Shadows II: Fuzzy Shadows

    ·

    Picking up where Part I left off, in Part II designer Sergio Villarreal takes his standards-compliant drop-shadow to the next level by producing warm and fuzzy shadows.

  • Power To The People: Relative Font Sizes

    ·

    Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.

  • 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.

  • The Table Ruler

    ·

    Make your site easier to use by giving your visitors a virtual “ruler” to guide and track their progress down long data tables. With a pinch of JavaScript and a dash of the DOM, your table rows will light up as your visitors hover over them.