Webforumz Newsletter - August 2007

FAQ

How do I add that little icon in the location bar of my browser?

Those are called Favicons (pronounced fav-eye-cons) which is short for "Favorite Icons".

Firstly you need to create your 16x16 icon with an .ico extension. You can do that online for free at FavIcon from Pics. Then, just upload the generated .ico to your server space and add this simple line in your HTML document

<link rel="shortcut icon" type="image/ico" href="favicon.ico" />

How do I center my site horizontally?

The code is a pretty simple one. You need to wrap your whole site in a, what's now called, a wrapper (or container) div.

Here is what you HTML will look like with the added wrapper div

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
    
<head>
    
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        
</head>
<body>
        
<div id="wrapper">
    <div id="content">Some content in here</div>
    <div id="sidebar">Some sidebar stuff in here</div>
</div>
        
</body>
</html>

The CSS that makes the magic happen is apply auto to the margin property

#wrapper {
    margin: 0 auto;
    width: 780px;
    background-color: #900;
}

What's the difference between <div> and <span>

The <div> and <span> elements allows designers to add styling to a page however differently.

The <div> is a block-level element as opposed to the <span> element which not.

You would normally use the <div> element to position other elements on your page. Like having a sidebar on the left and your content on the right. It does what the table element was never intended to be used for: layout.

As for the <span> element, you would normally use this to apply certain styles to text within a paragraph or in a certain area on your page.