Are you confused about how absolute and relative positioning work in CSS? If so, I’ve written a short article and tutorial for CreativePro.com, which explains what the two positioning methods are, and how to use them together to create some interesting web design effects:
You can check it out at http://www.creativepro.com/story/howto/26137.html
Have you every wanted a favicon for your web site? (A favicon is the custom icon that appears in bookmarks, favorite lists, and the location bar of most Web browsers. On this site it’s a round circle with SM in it–yeah, I know it’s hard to read.)
Now you can take any PNG, JPEG or GIF file and have it converted automatically into a favicon thanks to GenFavicon, a site which lets you upload and crop an image. The site then converts the image into the proper .ico format. At that point you, upload the file (favicon.ico) to the root folder of your site and add <link rel=”shortcut icon” href=”/favicon.ico” /> to the <head> area of your home page.
Couldn’t be simpler…and it’s free.
Designing Web sites can be a real drag. If you’re using CSS and any of the current techniques for building CSS layouts, you know that what looks good in Firefox doesn’t always look good (at least immediately) in Internet Explorer. Building and testing Web sites that work consistently across browser and operating systems is always a chore. And the best testing setup includes both Mac and Windows, Internet Explorer, Firefox and Safari. This usually means having a couple of computers you can switch between for testing Web designs. A waste of office space, money and time.
Fortunately, for me, I just got a new Mac Book Pro laptop. Its Intel chip is a real boon to Web designers, since it actually lets you run Windows on your Mac and test a Web site using Internet Explorer. Apple’s BootCamp software makes it easy to install Windows on the Mac, but it requires that you reboot each time you want to switch between OS X and Windows—kind of a pain.
But with a couple pieces of software it’s very easy to not only have OS X and Windows running side-by-side, but to easily switch between the two with a simple keyboard shortcut. Parallels Desktop lets you run Windows, and VirtueDesktops makes it easy to switch between the two operating systems. With Parallels you can even have multiple versions of Windows running side-by-side—the perfect way to test both Internet Explorer 6 and Internet Explorer 7.
I’ve written an article on the topic for an upcoming issue of Macworld magazine. It’s scheduled for the November issue (meaning it’ll be on the newstands early October.) In the meantime, check out the video of this setup in action.
The <label> tag is a useful addition to your web-form toolkit. It’s intended to provide a text label for a form element—for example, “First Name” next to a text field used to collect a visitor’s name. The <label> tag associates the text with a form field, thus providing a clear description of the field’s purpose. This makes the form more accessible as well.
But as an added benefit, many Web browsers treat the <label> tag as an extension of the clickable area for checkboxes and radio buttons. In other words, you can click the label to select a radio button or checkbox. See for yourself:
(Sorry Safari users, this neat feature hasn’t been added to that browser, yet. Try it in Firefox.)
In addition, other types of fields are given “focus” when their labels are clicked. For example, clicking a label for a text field, places the cursor into the text field—just as if you’d clicked in the field itself. Try it here:
Best of all adding labels, is a piece of cake. Dreamweaver 8, for example, can help with the process (you just need to make sure the “Form Objects” box is checked in the “Accessibility” category of the Preferences window.)
Adding the code by hand isn’t any trouble either. You can either wrap a <label> around a form element like this:
<label>Name:
<input type="text" name="textfield" />
</label>
Unfortunately, only Firefox reliably treats the label text as clickable using this method. A better approach is to use the <label> tag’s “for” attribute to associate the label with the form field. For this to work, you need to add an ID attribute to the form field, and then use that ID as the value of the label tag’s “for” attribute like this:
<input name="opt-in" id="optBox" type="checkbox" value="check" />
<label for="optBox">This whole label is clickable!</label>
Buy them today!
