Looking for the lessons? Get started!
Compilation of "how-to" snippets.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
He who knows best knows how little he knows. — Thomas Jefferson
This is a constantly expanding compilation of "bite-size" snippets, all answering the same fundamental question: "How do I …?
Center an Element
This is a simple method for centering using CSS, either an element or the entire body contents.
To center a particular element, first wrap the element in a div. Here's the HTML:
<div class="center-element"> </div>
And here's the CSS for centering the content held inside that div:
.center-element {
width: 960px;
margin: 0 auto;
}
The margin: 0 auto declaration centers the content inside the center-element, if (and this is a big if) there is a specific width attached to it. Your width does not have to be 960 pixels, it can be a different number or a different unit of measurement — a percentage or em value will also work. The 0 value of the margin can also be changed, say to 10px or something else, but it must be conjoined with the auto value.
(You may see some tutorials advocate setting margin-left: 0; and margin-right: 0; instead. This works, also, and might actually work better if you want top and/or bottom margins.)
Many designers center the entire content of their pages, and then later in their stylesheet left-align particular elements such as paragraphs, lists, and blockquotes. To do this, just add this to your body (or your wrapper, or whatever overriding element controls the content of your pages):
width: 960px; margin: 0 auto; }
Same as above.
Web design Jedi Paul O'Brien advises us that IE5 doesn't handle this brand of centering an element properly. If for some reason you have to code for that antiquated browser, check Paul's site for a IE5 workaround.
Some obsolete tutorial sites still advocate the use of the deprecated <center> HTML element. They will tell you to write your code like this:
<center> <p>a paragraph of content</p> </center>
Don't use this. It is invalid and many browsers do not accept it.
Similarly, some obsolete tutorial sites advocate the use of an only slightly less antiquated convention, the div align="center"> HTML element. This is also obsolete and not to be used, for the same reasons as the above <center> element.
Changing the Cursor's Appearance
The browser defaults to particular cursors (mouse pointers) for particular behaviors:
The arrow cursor appears in most areas of a Web page. This is the default; you'll see this unless the browser (or you) style it otherwise.
The I-bar cursor appears in areas of a Web page containing text.
The help cursor appears in areas of a Web page specifically designated by the designer.
Here's an example of how you can restyle a cursor for a hyperlink (though you probably shouldn't do this particular example):
a {
cursor: help;
}
There are 16 different cursors for your use. Here's the list, courtesy of Paul O'Brien:
- auto displays according to viewer/browser settings
- crosshair cross shaped
- default cursor is unchanged
- move indicates something should be moved
- pointer "pointing hand" you see over links
- help a question mark beside an arrow
- text the I-bar that appears when the mouse hovers over text
- wait hourglass shape indicating a wait while something happens
- n-resize arrow- North
- s-resize arrow- South
- e-resize arrow- East
- w-resize arrow- West
- ne-resize arrow- NorthEast
- nw-resize arrow- NorthWest
- se-resize arrow- SouthEast
- sw-resize arrow- SouthWest
It's not always a good idea to restyle cursors unless there's an overriding need to do so. Web conventions have trained us to expect the pointing hand over a link and the I-bar over text, for example; to use a different cursor invites confusion.
Make an Apple Touch Icon
Here's an incredibly easy method of creating an Apple touch icon for your users' iPods, iPads, and other Apple touch-screen devices. It comes from David Walsh.
First, you need to create a PNG graphic 57 pixels wide and 57 pixels in height. Whatever this graphic is, it will represent your site. If you have a logo, you would probably use your logo graphic to make this graphic.
Next, name it apple-touch-icon.png or whatever works for you.
Copy the icon into your root directory.
Lastly, add the following code to your page's head element. I'd put it just below the favicon code in your head (the graphic name and the URL for your site will, of course, differ).
<link rel="apple-touch-icon" href="http://www.example.com/apple-touch-icon.png">
That's pretty much all there is to it. It works in the Safari browser of the iPhone and iPod Touch that lets the user put shortcuts to Web sites on the main screen. If someone makes a shortcut to your site, this graphic will appear, linking the Apple device to your site. The device will automatically round the corners and add the glossy "shine" to the icon when it displays.
Removing the Border from All Images
Many designers remove the border from their images before adding any of those images. (If an image is used as a link, most browsers put 1px blue borders around them by default. Here's a trully horrific example of a site that doesn't bother to remove the blue borders.)
Add this to your stylesheet, perhaps in your reset:
a img {
border:none
}
Don't confuse the text-decoration on an anchor with the border on the image. If you want to remove the text-decoration that is under a linked image then you need to address the anchor element and not the image.
See All the "Boxes" on the Page
You might refresh your memory on "box" elements:
More about block and inline elements.
Okay, now that you're clear on what "box" elements are, here's a nifty method of highlighting ALL the box elements on your page.
Just add this to your stylesheet, right up top:
* {
border: 1px solid red !important;
}
Take a look at your page. It ain't pretty, but it highlights the borders of every box element in your page, allowing you to see how they appear in relation to one another. (It does add 2px of width to your layout, and that might be enough to break it. Watch out.)
Just remember to take that CSS rule out of your stylesheet before releasing it to the public.
Or, if you're feeling spunky, download the Firefox Web Developer add-on, which will display the "boxes" on your site without requiring you to add temporary elements to your CSS.
...More to come...
