http://tc.eserver.org/authors/Glazebrook,_Rob_L A bibliography of works by Glazebrook, Rob L in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Glazebrook,_Rob_L http://tc.eserver.org/35364.html http://tc.eserver.org/35364.html Without HTML, CSS is useless. Without JavaScript, CSS can’t realize its full potential. This means these skills are just as important as the CSS my site’s name suggests you’ll learn. http://tc.eserver.org/35365.html http://tc.eserver.org/35365.html I’m all about efficiency when I’m writing web code. Any time I find myself writing the same functionality more than once or twice, I try to consider whether my repeated code could be wrapped into a function of some sort. Navigation is often one of those areas where I try to improve my efficiency. http://tc.eserver.org/34267.html http://tc.eserver.org/34267.html There are lots of reasons you might want to offer your users more than one CSS file for your website. But whatever the reason, it’s amazingly easy to create a function that swaps between multiple stylesheets using a few lines of jQuery. http://tc.eserver.org/34268.html http://tc.eserver.org/34268.html But as silly as it may seem, some of the biggest CSS blunders stem from the simplest of errors. Knowing what some of those errors are and remembering to look for them can save you hours of wasted labor. Here are fifteen ways I’ve found to break my CSS for sure — and fifteen things I always look for whenever I have a problem in my code. http://tc.eserver.org/34269.html http://tc.eserver.org/34269.html Generally speaking, I consider full-fledged CSS frameworks to be overkill on all but the most absolutely complex projects or, on the other end of the spectrum, rapid proof-of-concept prototyping. Most people only use a few of the classes that any one CSS framework provides, but then still require their users to download the entire, and largely unused, stylesheet. However, I still think that the foundation on which CSS frameworks are built — the concept of using classes to simplify layout and standardize design across similar elements — is very much worth investigation. http://tc.eserver.org/33170.html http://tc.eserver.org/33170.html Internet Explorer does not respect the height and width properties of block-level, absolutely positioned anchor tags if they contain no content (or if that content has been moved or removed). So what’s the workaround? Well, there are several. http://tc.eserver.org/32387.html http://tc.eserver.org/32387.html Our mission is to help the beginning to intermediate web designer master the subtleties of CSS by offering CSS tutorials, tips, and techniques. http://tc.eserver.org/32390.html http://tc.eserver.org/32390.html Today I’d like to start an article series of three parts, the result of which will be a popout-style, jQuery-based box like the one pictured above, which I think strikes a nice balance on the obtrusion-scale. http://tc.eserver.org/32391.html http://tc.eserver.org/32391.html We're going to take the ad we built last week and animate it, as well as provide the user with a means to open and close the ad. We’ll be using jQuery for most of what we do, so you’ll need to include the jQuery library script at the top of your document for this to work (see the source of the example page to see how this is done). http://tc.eserver.org/32392.html http://tc.eserver.org/32392.html Generating footnotes for HTML documents in the past was always a slow, painful task — and every time I did it, I wondered why there wasn’t a better, easier way. Today, I’m happy to announce that I’ve come up with a better solution to web footnotes using the jQuery JavaScript framework and a few tags and attributes that already exist in XHTML. http://tc.eserver.org/32393.html http://tc.eserver.org/32393.html The display property is a bit of an unheralded workhorse in the CSS world. Even though the list of theoretical display property values is quite long, only three of them ever see any use (primarily due to poor browser support on the others): inline, block, and none. http://tc.eserver.org/32394.html http://tc.eserver.org/32394.html I’ve been doing a bit of research lately on creating RSS-only content for my website – that is, content that shows up in my RSS feed and nowhere else. http://tc.eserver.org/32395.html http://tc.eserver.org/32395.html Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS. http://tc.eserver.org/32396.html http://tc.eserver.org/32396.html I first came up with the idea for a list-based calendar at my 8-5 job as I was leafing through my appointments in Outlook. I thought about how useful it was to be able to switch between the month view, to the 7-day, to the 5-day, and so on as necessity dictated. http://tc.eserver.org/32398.html http://tc.eserver.org/32398.html Unordered lists are one of the most pervasive elements on the web, probably just behind paragraphs and hyperlinks in terms of their bunny-like abundance. And for good reason: bulleted (i.e., unordered) lists are a great way to convey a bunch of related information in a rather small space, which is often the preferred way to read on (and thus, write for) the internet. http://tc.eserver.org/32399.html http://tc.eserver.org/32399.html A fundamental understanding of the CSS box model is essential to gaining a basic understanding of CSS in general. The good news is, if you can pack a box in real life, you can understand the CSS box model. And if you can’t pack a box in real life due to some traumatic physical injury, you shouldn’t have much of a problem, either. Also, I’m sorry about bringing up the whole box thing. http://tc.eserver.org/32400.html http://tc.eserver.org/32400.html By using attribute selectors in your CSS, you’re able to target elements with specific attributes, or even specific values within those attributes. When using attribute selectors, the attribute is contained within [brackets], just like how .classes have a leading period, or #ids have a leading pound sign. http://tc.eserver.org/32401.html http://tc.eserver.org/32401.html Writing Cascading Style Sheets saves you time and bandwidth in the long run by removing all of the presentational elements and attributes from your web pages and moving them into a separate document. But sometimes that CSS document itself can get pretty long as well. So what do you do then? http://tc.eserver.org/32402.html http://tc.eserver.org/32402.html Even the most complex style sheet starts out with a single rule. But when you’re working on a particularly massive and complex website, over time your style sheet will inevitably start to reflect the site’s size and complexity. And even if you employ every trick of organizing your CSS in the book, you might find that the sheer size of the file is simply overwhelming. At that point, you might want to consider splitting your style sheet up into several smaller CSS files. That’s when the @import rule can come in quite handy. http://tc.eserver.org/32403.html http://tc.eserver.org/32403.html One of the nice things about languages like CSS is that you don’t have to write them in any specific way. For example, you could place all the CSS rules for your entire website on a single line of text, and assuming you had some brackets and semicolons stuck in there at appropriate intervals, your website would render without a hitch. http://tc.eserver.org/32404.html http://tc.eserver.org/32404.html CSS doesn’t apply exclusively to the Realm of the Screen. You can also write style sheets that apply to the medium that first spawned them – print. This can be a very useful trick, since people read on the screen very differently than they read print documents. So here are a few tips for creating a print style sheet that will ensure your website is user-friendly, regardless of the medium it ends up in. http://tc.eserver.org/32405.html http://tc.eserver.org/32405.html Today’s tutorial will show you how easy it is to create book-style chapter (article, whatever) introductions using nothing but pure CSS — no XHTML was harmed in the making of this tutorial. We’ll use two types of selectors which I haven’t talked about yet here: adjacent sibling selectors and pseudo-element selectors. I’ll explain each type briefly before we get started. http://tc.eserver.org/32406.html http://tc.eserver.org/32406.html The syntax of CSS is extremely simple to understand. A CSS file is essentially a list of rules. And each of those rules is comprised of two basic parts: a selector and one or more declarations. Each declaration also consists of two parts: a property and a value. http://tc.eserver.org/32407.html http://tc.eserver.org/32407.html So you’ve been hanging around the web gurus long enough to know that 'CSS' is something big and important in the web design world. You might even know that it has something to do with making pages pretty, or more Web 2.0, or something like that. And that’s true (to an extent). But what does CSS really mean? http://tc.eserver.org/32408.html http://tc.eserver.org/32408.html Replacing font tags with semantic code and CSS isn’t as terribly difficult as it might seem at the outset. To help you along your way, here are a few tips on how to tackle the project. http://tc.eserver.org/32409.html http://tc.eserver.org/32409.html There is a disease out there in the CSS world. It can afflict anything from the meanest weblog (or the nicest ones too, I suppose) to the greatest of corporate websites. It’s called Classitis, and I’ve encountered it far too often in my professional work. Perhaps you’ve seen it too. http://tc.eserver.org/32410.html http://tc.eserver.org/32410.html One quick and easy way to keep your CSS clean and well-structured is to remember (what I’m going to title) the four CSS Rules of Multiplicity. They are: Multiple declarations can live in a single rule. Multiple selectors can preface the same rule set. Multiple rules can be applied to the same selector. Multiple classes can be set on a single element. http://tc.eserver.org/32411.html http://tc.eserver.org/32411.html There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class. http://tc.eserver.org/32412.html http://tc.eserver.org/32412.html In certain instances, not everyone views every portion of your website online: eventually, someone is going to print parts of it. In many cases, this is perfectly fine: if you have a print style sheet that takes care of your worst sins, your website should look okay. But one area where it may still look lackluster is the images. http://tc.eserver.org/32413.html http://tc.eserver.org/32413.html Sometimes just having images isn’t enough. Sometimes we need a little help to make our outstanding images truly stand out. And that’s where CSS can help. Here are five things you can do, using CSS, to make the most of your images. http://tc.eserver.org/32414.html http://tc.eserver.org/32414.html Attractive dropdown menus have long been the realm of Flash developers and advanced JavaScript gurus. But that needn’t be the case. This tutorial will walk you through developing a clean, semantic dropdown menu using XHTML and CSS that works in all modern browsers! http://tc.eserver.org/32415.html http://tc.eserver.org/32415.html Today’s tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn’t require a refresh or navigation to a new page and all your content is still visible to search engine bots that don’t pay any attention to CSS or JavaScript. http://tc.eserver.org/32416.html http://tc.eserver.org/32416.html Earlier this week I talked a bit about message boxes – how to style them and position them on your page to get them noticed. But a message that pops up every single time your website is loaded could get annoying. It’d be useful to give your users the ability to close those messages. For that, we’ll turn to our friend JavaScript. http://tc.eserver.org/32417.html http://tc.eserver.org/32417.html The double-margin float bug -- an Internet Explorer-exclusive bug wherein an element that is floated – and given a margin in the same direction as the float – ends up with twice the specified margin size -- has been a source of irritation for CSS-loving web designers for years. While an easy (if mysterious) fix has been known for quite some time now, it occurs to me that perhaps not everyone knows about it. So I thought it couldn’t hurt to toss another explanation out there. http://tc.eserver.org/32418.html http://tc.eserver.org/32418.html Last week, CSSnewbie reader Andrea Pluhar wrote in with an interesting problem: she wanted to use CSS dropdown menus like the ones we featured last week on a website that she was building, but the design called for the submenu to be arranged horizontally, not vertically. She sent me a mockup of what she was after (excerpted above) and wondered if there was a way to accomplish this effect using CSS. http://tc.eserver.org/32419.html http://tc.eserver.org/32419.html I’ve developed a trick over the years that I’ve used on a number of websites now for making my sites’ navigation bars “intelligent” or “self-aware.” By that, I mean that the navigation bar automatically knows which tab/button/whatever should be considered the currently active link, without having to manually specify a class or ID on either the body tag or on the links themselves. http://tc.eserver.org/32420.html http://tc.eserver.org/32420.html Navigation bars are the signposts of the web world: we take them for granted because of their ubiquity, but we’d all have a much harder time getting around without them. On most websites, nav bars hold a position of honor near the very top of the page, meaning they’re one of the first things your users see upon entering your site. As such, there’s a lot of pressure on navigation bars to look clean, act sophisticated, and ply the client’s wife with small talk and Manhattans while you close the deal. http://tc.eserver.org/32421.html http://tc.eserver.org/32421.html With CSS, links don’t have to be ugly. They can look pretty much however you want. Here are a few of the things you can do to make your links stand out without sticking out. http://tc.eserver.org/32422.html http://tc.eserver.org/32422.html You’ve been working on your brand new, beautifully cascading style sheet for most of the day. You save your work, load it into a browser, and… what the heck?! Nothing’s working right! You know you didn’t make any huge errors in your code, but something is obviously wrong. We’ve all been there before. But instead of wasting endless hours debugging your code, here are a few very simple things you can check in your CSS before you start pulling out your hair. http://tc.eserver.org/26699.html http://tc.eserver.org/26699.html The philosophy behind the Orange Journal requires that the editors take several practical, theoretical, and technical elements into careful consideration in order to provide the best knowledge-building community possible.