http://tc.eserver.org/dir/Design/Web-Design/CSS/DHTML A listing of the most recently indexed works about Design and Web Design and CSS and DHTML 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/Design/Web-Design/CSS/DHTML 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/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/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/32141.html http://tc.eserver.org/32141.html In 2004, Dave Shea took the CSS rollover where it had never gone before. Now he takes it further still—with a little help from jQuery. Say hello to hover animations that respond to a user’s behavior in ways standards-based sites never could before. http://tc.eserver.org/28444.html http://tc.eserver.org/28444.html The three main technologies used to create modern web pages (HTML, CSS and JavaScript) each do different jobs. HTML should be used only for structuring content. Cascading Style Sheets should be used for applying all visual styles. JavaScript should be used for (almost) all interactive functionality, and should always be referenced in separate files, never written into HTML. http://tc.eserver.org/27623.html http://tc.eserver.org/27623.html Many sites that present tabular data use alternating background colors to increase the readability of that data. And as I developed a site, I realised I wanted to do that, too. The problem? In my case the table was not generated by a server side application or script of which you can find numerous examples on the Web. http://tc.eserver.org/27629.html http://tc.eserver.org/27629.html In two parts, this series introduces the Document Object Model, explaining its benefits, and exploring its implementation. http://tc.eserver.org/27292.html http://tc.eserver.org/27292.html Dynamic HTML (DHTML) provides a new range of ways to animate a page. DHTML can animate both text and images and animations can move throughout the browser window, instead of being anchored in one spot. Unfortunately, DHTML can be tricky because of differences between browsers. This article will cover the basics of cross-browser animation. You’ll learn how to animate text and images. Plus you’ll see how to move HTML elements around the screen. After you’ve finished reading this article, you should be able to add cross-browser compatible DHTML animations to your web pages. http://tc.eserver.org/27307.html http://tc.eserver.org/27307.html With the release of W3 compliant browsers however, we now have the ability to change styles on the fly from JavaScript, using the W3C DOM. Unfortunately, due to a distinction between the way that embedded and remote stylesheet properties are exposed as opposed to the way that inline STYLE properties are exposed, this can be tricky. http://tc.eserver.org/25501.html http://tc.eserver.org/25501.html Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! http://tc.eserver.org/25451.html http://tc.eserver.org/25451.html 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. http://tc.eserver.org/25408.html http://tc.eserver.org/25408.html So you've built a beautiful, standards-compliant site utilizing the latest and greatest CSS techniques. You've mastered control of styling every element, but in the back of your mind, a little voice is nagging you about how ugly your SELECTs are. Well, today we're going to explore a way to silence that little voice and truly complete our designs. With a little DOM scripting and some creative CSS, you too can make your SELECTs beautiful… and you won't have to sacrifice accessibility, usability or graceful degradation. http://tc.eserver.org/25360.html http://tc.eserver.org/25360.html There are many different button-rollover tutorials available on the web, some JavaScript and some CSS, but none of the ones I have seen yet match that of the Trifecta button. Let's start with what makes the CSS rollover Trifecta button different from the many other rollovers you may have already seen. Alternative sites are locatable with the key phrase: "Trifecta Button" in any search engine. http://tc.eserver.org/20368.html http://tc.eserver.org/20368.html Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too! http://tc.eserver.org/20288.html http://tc.eserver.org/20288.html Have you been frustrated by the limitations of HTML as you have struggled to present information attractively on a Web page? Have you used common work-around methods such as setting up complex tables for text layout and creating special text effects with a graphics package? Cascading Style Sheets offers a way to produce desired layout effects through HTML. If we are programmatically inclined, we can use Dynamic HTML to increase interactivity. We will demonstrate methods for using Cascading Style Sheets and Dynamic HTML to design Web pages and point out design limitations we still need to be aware of. http://tc.eserver.org/20225.html http://tc.eserver.org/20225.html You asked for it, you’ve got it: an Open Source alternate Style Sheet switcher that even works in Netscape Navigator 4. http://tc.eserver.org/13546.html http://tc.eserver.org/13546.html For years we’ve been preloading our on–state images to assist the browser in its rollover presentation. Preloading increases the weight of the initial download, but adds to usability by decreasing the wait time for an on–state image to appear. Decreases, but may not eliminate. Even when preloaded, some browsers present momentary pauses prior to rendering the image. Besides being annoying, this momentary pause can cause problems when a visitor mouses over an element in passing or too rapidly. If the mouse movement is too fast, the browser does not have time to render the image and, worst–case scenario, can present you with a broken image icon.