Search

Phrase

Display

 

Category

   

Order

 

Pagesize

Results

100 hits12345

41. Table-less Design

MezzoBlue, Tutorials, 12 KB, 748 words

The bottom line: transitional, table–based layouts work, and will continue to, no matter how ugly a solution they seem. The table tag isn't going anywhere due to the continuing (valid) need for tabular data, and let's face it, we've long worked out the bugs in table–based design. We're only beginning to knock off the bugs of the more popular CSS configurations.

This is an area where standards advocates shoot themselves in the foot. "Code for the future," we say. "Drop the tables, and you'll never look back. Er, no, I'm not sure why IE5 is doing that. Um. What was I saying again?"

Table–less design gets...

continue reading ...

42. The Future of MT-Notifier

Don't Back Down, News, 25 KB, 2263 words

Recently I have received a number of comments about how MT-Notifier appears to be working fine, then suddenly stops functioning. The most often factor in this change is a larger number of subscribers. That is to say, things are working fine with a few subscribers, but as that number increases to hundreds, so to do the apparent failures of the system.

Let me say that I don't know what causes this. I haven't seen the problem personally, and I know of at least one installation that has a very large number of subscriptions that continues to work fine. This would lead me to believe that it's a resource issue. Specifically, I think that much of it may have to do with the use of the...

continue reading ...

43. ExtraFields

Staggernation, Plugins, 29 KB, 3608 words

Many Movable Type users have wished for the ability to define additional custom fields for entries. A future version of MT may include such functionality. This plugin is a stopgap measure until we have a version of Movable Type that allows custom fields. It lets you define custom fields on a per-weblog basis, by creating one or more SQL tables to store the additional data (this plugin has been designed to work only when using MySQL as your MT backend; see below for more on this).

Some users have managed to add custom fields to their copies of Movable Type by modifying the field definitions within MT. See this page and this thread and this thread. However, this approach has several...

continue reading ...

44. Fluid Three Column

Movalog, Tutorials, 31 KB, 1150 words

Learning Movable Type has an article that guides you through the steps of creating a three blog layout. The only problem is that the #container width has ben set to 904 pixels. This means that on a 800x600 layout you're going to get the nasty horizontal scroll.

The best way around this is to create a fluid three column layout ( what are fluid/fixed layouts ?).

1.Change the width of #container to 90%

2.Delete #center and corresponding div tags in all your templates

3.Duplicate your sidebar, find the following/similar code in your stylesheet #right { float: left; width:200px; overflow: hidden; }

And replace it with the following: #right { float: right; width: 20%;...

continue reading ...

45. Big, Stark & Chunky

A List Apart, Tutorials, 32 KB, 2919 words

Research shows that low-vision people need dramatically different web design. CSS lets you give them what they need.

Readers of A List Apart will by now be quite familiar with screen-reader users, the largest group of disabled web surfers whom standards compliance actually helps. In a previous article, for example, I examined how well image-replacement techniques work in screen readers (not very).

But - surprise! - most people with impaired vision can still see something, and a large but unquantified segment of this group sees well enough to use a computer with a magnified or zoomed display. We have not done a good job of catering to...

continue reading ...

46. Too Far

MezzoBlue, Tutorials, 11 KB, 478 words

You know the dogma has gone too far when…

Here's a code sample from someone who obviously misunderstands the fact that "it's okay to use tables for tabular data", and probably spent more time than was necessary coming up with the CSS to make this work: <h3>My Schedule</h3> <ul class="pseudotable"> <li> <span class="event">Event #1</span> <span class="location">(location)>/span> <strong>May 15, 2005</strong> </li> <li> <span class="event">Event #2</span> <span class="location">(location)</span> <strong>May 16,...

continue reading ...

47. Better Living Through XHTML

A List Apart, Tutorials, 31 KB, 3981 words

An unauthorized companion to the Online Style Guide of the Branch Libraries of The New York Public Library

XHTML is the standard markup language for web documents and the successor to HTML 4. A mixture of classic (HTML) and cutting–edge (XML), this hybrid language looks and works much like HTML but is based on XML, the web's "super" markup language, and brings web pages many of XML's benefits, as enumerated by the Online Style Guide of the Branch Libraries of The New York Public Library.

If you want your site to work well in today's browsers and non–traditional devices, and to continue to work well in tomorrow's, it's a good...

continue reading ...

48. Zen Archives++

MezzoBlue, Tutorials, 16 KB, 1492 words

I'm happy to report the Zen Garden archives have (finally) undergone a major re-tooling.

The css Zen Garden has been desperate for some TLC for a while now. Submissions have been increasing steadily (sometimes 6 or 7 per day), but management and archiving has been a frustrating problem for quite some time. So I fixed some of the major problems.

Categorization

Since its launch on this domain over two years ago, the css Zen Garden archives have undergone numerous changes to cope with the growing volume of designs.

It seems hard to believe now, but at one point in time all designs I had received fit on one page. When that page grew too weighty, I chopped it into a handful of...

continue reading ...

49. Displaying an RSS Newsfeed on Your Site

Learning Movable Type, Tutorials, 30 KB, 2079 words

One of the great things about RSS is that you can display, or "feed" in, headlines and content from other people's websites directly onto your own website. In another article, we've already covered what "syndication" is, and RSS, and how you can use a newsfeed reader to efficiently read and browse through the latest content from your favorite weblogs and news sites. The focus of this article will be on the other main use of RSS - feeding external content into your site. An example of this can be found here on my recipe website. Clicking on a sidebar link opens a new page with several feeds from various food and cooking websites. Check the page at a later time, and if there...

continue reading ...

50. Retooling Slashdot with Web Standards Part II

A List Apart, Tutorials, 11 KB, 775 words

{Part II of a two-part series.}

In Part I, we showed how Slashdot could save money and reduce bandwidth requirements by converting to semantic XHTML markup and CSS layout. In Part II, we explore how standards-compliant markup and deft use of CSS could make Slashdot (and your sites) play nicely in print and on handheld devices.

Printer-Friendly Slashdot

The print.css file adds a feature that Slashdot didn't have before, and it is only 10 lines of CSS code. We simply turn off the floating on each <div>, and then do a display:none; on any <div> of information that is useless to a printed documented, such as search, advertisements, etc. {The ALA 3.0 print style sheet takes a similar approach. - ...

continue reading ...

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

52. A List Apart 4.0

A List Apart, Tutorials, 16 KB, 1611 words

From the crown of its cranium to the tips of its Ruby-slippered toes, A List Apart 4.0 is both old and new. Old in its mission to help people who make websites see farther and jump higher. New in its design, structure, publishing system, and brand extensions.

The magazine has long advocated accessibility and web standards, providing deep and sometimes controversial insights into these areas and not infrequently presenting ideas and methods that change the way you think and work. We will never abandon this subject area, but we are once more widening our gaze to encompass disciplines and themes beyond those that have obsessed us for the past five years.

I say "once more"...

continue reading ...

53. Creating a Photo Album

Learning Movable Type, Tutorials, 46 KB, 3769 words

Looking for a way to incorporate a Photo Gallery into your MT blog? Check out Photo Gallery Templates from StopDesign.com.

There are many ways to create a web-based photo album or photoblog in Movable Type. This tutorial addresses just one method for creating a photo album, and is based on the steps I took to create my MT-based photo album. This tutorial is for experienced MT users and assumes familiarity with plugins, CSS, creating a new weblog, category archiving, and uploading images. Although long, the tutorial is easier than it looks, especially if you want a photo album that works just like mine. It's always the customizations that take time. In this tutorial I will give...

continue reading ...

54. Colors - Experimenting With, Using MTSetVar and MTGetVar

Learning Movable Type, Tutorials, 26 KB, 1159 words

The default Movable Type styles use color schemes in which certain colors are repeated in different style elements throughout the stylesheet. For example, the Independence style uses the same color red (#B22222) for the banner background color, the link hover color, the content h2, the calendar caption, and the sidebar h2 and border colors. In the comments section of the LMT tutorial Colors - Background, Banner, Headline, and Font, developer Brad Choate remarked that you could easily use the MTSetVar tag to define a color and the top of your stylesheet, and use the MTGetVar tag throughout your stylesheet wherever you wanted that color to be used. This works because the stylesheet is a...

continue reading ...

55. Pull Down Menus

Learning Movable Type, Tutorials, 26 KB, 1304 words

To save space on your sidebar listing of categories or monthly archives, you might want to use a pull-down menu like so: Select Category Beginner Tips Categories Definitions General HTML and Javascript Install Marketing Reference RSS Security Servers Style Weblog Goodies

To do this for your category list, make sure that you have category archiving selected as an archiving option in your weblog config, and add the following code to your sidebar:

<form action="" name="pulldown1"> <select name="mypulldown1" onchange="document.location=pulldown1.mypulldown1.options[selectedIndex].value"> <option value="">Select...

continue reading ...

56. Willison takes on jwz and Winer

MezzoBlue, Tutorials, 10 KB, 401 words

One day soon I will make a post that is non CSS–related. It will happen, I swear it.

On to business. Simon Willison has taken on two of the most vocal critics of CSS in the past few weeks, Dave Winer and Jamie Zawinski. Both of the mentioned debates generated a flurry of controversy, and catalyzed argument on whether to use CSS or not.

Simon's examples are coded well, documented well, and generally make a good point: using nested tables to achieve visual effect is a concept whose time is coming to an end.

The more I see examples like this where existing design techniques are converted to CSS layouts, the more I see two very tense camps forming. There are people who...

continue reading ...

57. Random Entries Using PHP

Learning Movable Type, Tutorials, 39 KB, 3186 words

There are two methods to create a random entry, pulled from your weblog database (if you aren't using dynamic publishing). The easiest is David Raynes' MTRandomEntries plugin. However, MTRandomEntries generates a random entry only when you rebuild the page on which the MTRandomEntry code is located. If you want a random entry to be generated each time the page is refreshed in a browser, you can do that with a PHP script that pulls the data from your MySQL database. For this method to work your blog needs to be PHP enabled and you need to be using a MySQL database.

This tutorial will outline variations of a PHP script you can use to generate random entries, similar to what can be seen...

continue reading ...

58. Image Attributes

MezzoBlue, Tutorials, 13 KB, 957 words

Questioning width and height values for images.

Paraphrased, from the inbox:

height and width attributes no longer apply to images, I suspect. How then do my images render? They seem to automatically size. Is it based strictly on their original size, or should I be defining my attributes in my CSS?

Good question. I still set these particular attributes in my HTML, for both historical and practical reasons.

It used to be, before we were building table-less layouts and offloading all presentation to the CSS, that defining an image included things like turning off the border (darn 2px, blue-bordered linked image default!), specifying ALT text, and defining the width and height...

continue reading ...

59. Simple Changes to the Default MT3 Styles

Learning Movable Type, Tutorials, 33 KB, 2880 words

Here are some simple changes that even a non-CSS expert like me can implement to make some fundamental changes to the default styles of MT3 weblogs.

1. Moving the sidebar from the right to the left side. The default MT3 Stylesheets have the sidebar on the right side of the page. To move the sidebar to the left hand side you don't actually have to change the stylesheet at all. The changes are made to the Main Index template and any other archive template that has a sidebar. In the Main Index template, find the sidebar code section:

<div id="right"> <div class="sidebar">

Your sidebar code

</div> </div>

If your sidebar is currently on...

continue reading ...

60. This HTML Kills: Thoughts on Web Accessibility

A List Apart, Tutorials, 18 KB, 2183 words

When I started out as a web designer, accessibility seemed quite a simple and achievable goal: provide alternative descriptions for all your graphics, and make sure the background colour and text color have good contrast. Accessibility was easy, took little extra work, and the resulting page didn't look different from millions of other first-generation web pages out there, i.e., dull, grey and unattractive.

Time has moved on and accessibility on the web is no longer simple. From being a largely text-based medium that was easily accessible via a variety of high- and low-tech devices, the web has now become a rich multimedia environment.

As a result, much of it is now...

continue reading ...

Comments

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