Due a large stream of requests for the horizontal, drop-down version of the Vertical CSS menu tutorial, I will write a tutorial covering all the basic points of building a horizontal drop-down CSS menu!

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+. By the end of this tutorial, you will be able to make this example CSS menu.

Structure

Before we can start building an awesome design, we need to have structure. We will use HTML for that. The structure of our menu is based on a simple un-ordered list.

HTML

<ul id="nav">
	<li><a href="#">Home</a></li>
	<li><a href="#">Services</a>
<ul>
	<li><a href="#">Webdesign</a></li>
	<li><a href="#">Development</a></li>
	<li><a href="#">Illustration</a></li>
	<li><a href="#">Search engine</a></li>
	<li><a href="#">WordPress</a></li>
</ul>
</li>
	<li><a href="#">Blog</a>
<ul>
	<li><a href="#">Themes</a></li>
	<li><a href="#">Plugins</a></li>
</ul>
</li>
	<li><a href="#">Contact</a></li>
</ul>

The ul element is the begin and end of the un-ordered list, and the li elements are the menu-items In some of the li elements, you see another un-ordered list and these will be our drop-down submenu’s.

Make the menu Accessible

Accessibility is important. Not everyone is on the same computer with that same settings as you. Maybe they’ve disabled CSS, or any other thing that makes this menu not work.

We will add some titles to our menu items, so that when people roll over an item or visit the menu in a screenreader, they see the title popping up telling them what that item is about. Here is our more accessible structure.

HTML

<ul id="nav">
	<li><a title="Home" href="#">Home</a></li>
	<li><a title="Services" href="#">Services</a>
<ul>
	<li><a title="Services > Webdesign" href="#">Webdesign</a></li>
	<li><a title="Services > Developement" href="#">Development</a></li>
	<li><a title="Services > Illustration" href="#">Illustration</a></li>
	<li><a title="Services > Search Engine" href="#">Search engine</a></li>
	<li><a title="Services > WordPress" href="#">WordPress</a></li>
</ul>
</li>
	<li><a title="Blog" href="#">Blog</a>
<ul>
	<li><a title="Blog > Themes" href="#">Themes</a></li>
	<li><a title="Blog > Plugins" href="#">Plugins</a></li>
</ul>
</li>
	<li><a title="Contact" href="#">Contact</a></li>
</ul>

To learn more about accessibility in a CSS menu, you should read my past tips regarding accessibility here.

This part of the menu should be clear. If not, you should consider learning the basics of HTML first, before you start on a CSS menu like this.

CSS for your menu

The style language CSS will add functionality to the menu and we will combine that later on with the bahavior file I mentioned earlier. I will start to give you the elements we need to style. If we forget one part of these, our menu might not have the functionality we require. More explanation follows below when we add the ‘core’ codes.

CSS

ul#nav {}    /* the structure of our head-menu */
li {} /* the structure of the first items */
ul#nav li a {} /* the links inside our first items */
ul#nav li a:hover {} /* the roll-over styles for the links in our first items */
ul#nav li ul {} /* first items > submenu structure */
ul li  {} /* the structure of our submenu items */
li > ul } /* extra styles for Internet Explorer (behavior file) */
li:hover ul, li.over ul {} /* to make things work in Internet Explorer (call for the behavior file) */

Stripped Version

The codes that I will provide below are really necessary for the menu, it is the core of our menu. Delete any of these codes and your menu might not work. Here’s the demo; Stripped Version.

CSS

ul#nav {
list-style: none;
padding: 0;
margin: 0;
}

Everything clear here. List-style should be none if you would like to have no bullets or arrows in front of every item on the list. Padding and margin to zero: we can change that later and now we have full control of spacing.

CSS

li {
float: left;
position: relative;
width: 100px;
}

Next in line are the list items. Float all our items to the left, position set to relative to make sure the submenu is displayed relatively to the first items.

CSS

ul#nav li a {
display: block;
}

A user should be able to click on the whole menu item in order to get to the source. Therefore we need to transform the click-able area of the link the same width/height as the item itself. We do that with display:block;.

CSS

li ul {
display: none;
position: absolute;
width:100px;
top: 0;
left: 0;
margin-left:-1px;
}

Display:none; for the submenu because the submenu shouldn’t display when we aren’t hovering the menu item. The submenu is positioned absolute, 0 pixels from the top, 0 pixels from the left and therefore he’s aligned just below our first-level menu.

CSS

li>ul {
top: auto;
left: auto;
}

To reset the top and left attributes used in the ul#nav li ul{} we use this set of codes. It’s Internet Explorer causing the problem here. In li ul we have set those attributes to zero, but Firefox and other modern browsers need auto to do the job.

CSS

li:hover ul, li.over ul {
display: block;
}

This is the part where the behavior file comes in. When we hover with our mouse over the first-level menu items, the display:block; makes sure the second-level menu pops up.

Next we will go through the behavior part.

Behavior file to add li:hover support

In the modern browsers, we simply add a :hover pseudo selector to a li element because that is supported. Unfortunately, we still have Internet Explorer 6 around and that’s a problem. IE6 doesn’t support :hover selectors on anything other then links. I have found a trick to add the extra functionality.

The work-around is a behavior file called “whatever:hover”. More information about the “whatever:hover” file can be found on the author’s website and you should have the actual file on your disk and in the same directory with your CSS file.

We can add this behavior file to our CSS with the following codes:

CSS

body {   behavior:url(csshover.htc); } 

Current Item

Here is a little extra that might tweak up your CSS menu.

Sometimes it is a nice add-on to a CSS menu to change the style of one item a bit when you are on that source. For example, if you are on the Homepage, the Homepage menu item has a little difference in style and when we are on a Services page, it has a little difference in style. You get the point?

We do this by adding a new class to a menu item. When we want to style our Homepage item differently, here’s how we do that.

Change:

<li><a href="" title="Homepage">Homepage</a></li>

To:

<li class="current"><a href="" title="Homepage">Homepage</a></li>

With the CSS:

ul#nav li.current{  /* your styles */ }

Why don’t we just style the class .current?

Because the CSS specificity of the normal list item (ul#nav li ) rules over .current and your ‘current’ item will not change. ul#nav li.current on the other hand will work. CSS specificity is one of the most hard parts of CSS and you can read a detailed article regarding CSS specificity here.

Time to hop in

We have worked our way into a horizontal CSS menu that works in both Internet Explorer 6, Firefox and all other modern browsers. It’s time to let your fantasy go and create a beautiful drop-down CSS menu yourself!

Download & Demo

Of course, I couldn’t resist and gave it a shot as well and put it in the download too. You should visit the demos and download the sources. Enjoy!

DEMO: Stripped Version
DEMO: My Version
DOWNLOAD: horizontal-css-menu.rar

Some time back I discovered some of the so-called CheatSheets. These CheatSheets are PDF files packed full of information on a specific topic. In this article I will give you a couple of those CheatSheets, with a explanation and download link.

CSS related

CSS CheatSheet by IloveJackDaniels.com – This Cheat Sheet is the first one I ever saw and is very advanced. If you have forgotten a small thing or if you aren’t sure things are possible, this CheatSheet is here for the resque. All CSS developers should have this one available and printed on their desk.

Leslie Franke’s CSS CheatSheet – A less advanced CheatSheet as Dave Child’s one but it’s very easy to understand and the look is great. I really like the cleanness and organization of the design.

HTML Related

HTML CheatSheet by IloveJackDaniels.com – Yes, yet again IloveJackDaniels.com, because I think Dave Child really created some great Sheets. This is the only one I have used, but I don’t need it anymore.

ASCII Character Codes Table – Use this one all the time because I don’t remember all them signs and marks and their HTML entities. This is simply a great reference.

WordPress related

Wp-Loop by bueltge.de – Very simple CheatSheet with exactly the information you need if you are working on a WordPress theme. The loop is always a bit hard, and really important to do that right.

WordPress Help Sheet by WPcandy – WPcandy has developed a Sheet that includes the general WordPress theme knowledge. It is very handy when you are just starting out developing themes.

Miscellaneous CheatSheets

Web safe color color chart – Handy if you need a couple HEX color codes and you need to know if those are web-safe. I don’t use it myself, because I have a great Firefox plugin called ColorZilla installed, but it could be handy in some cases.

Google’s CheatSheet – Get all the Google commands in one place with this great CheatSheet. Take a look yourself and find out what you can do with Google. Many things, I guess.

Htaccess CheatSheet – Htaccess isn’t as expanded as it could be, but with this CheatSheet it is easy to find everything you need.

Photoshop Shortcuts – Great reference to learn the shortcuts you could use in Photoshop CS2. I didn’t know Photoshop had that many!

I hope that help.

HTML has many properties. There are a couple of them we don’t use that often and we will discuss one today. It is called the ABBR property and is used to explain and mark-up abbreviations. We bloggers write for the web and we shouldn’t forget the text should be understandable for everyone.

You might have seen news sites and information websites use this property. In the text, an abbreviation is underlined with a little gray and dashed line. When your mouse rolls over that link-look-alike, you come to the conclusion it is something else. An explanation about the abbreviation shows up. You might have seen this property more than you think.

Ok. But what is the point of using ABBR in your website? These arguments should convince you:

1. Better for Accessibility – Using ABBR properties in your website will only optimize the accessibility of your website. Some visitors might don’t know terms like “SQL”, “AI” or “NASA”. Look at yourself, do you know them all? You should try as hard as possible to make your content as accessible as possible.

2. Educate your visitors – Many websites and blogs are here to teach people with their knowledge. Those have different subjects and different visitors. When they are reading an article, everything should be clear about the topic. When acronyms or abbreviations aren’t clear enough, the visitor might do not understand the whole article.

3. Multiple purposes – Not only are you educating your visitors, you will make it easier for spell checkers, translators and speech synthesizers to understand the meaning of an abbreviation and therefore the meaning of a sentence.

4. Search engine optimizing – Another advantage is the search engine (yes, they are everywhere!). When you are using an abbreviation instead of a couple keywords, the SE isn’t totally clear what you mean and therefore they couldn’t display the most accurate data to their users.

When you are using the ABBR function in HTML, it will explain the abbreviation to the search engine as well and you have yourself an extra keyword. Always great, right?

How to use ABBR?

ABBR is not hard to use. It only uses the “title” tag to explain the abbreviation. As always, CSS is around the corner to style your ABBR tag in a way you prefer.

<abbr title="Structured Query Language">SQL</abbr>

When you add ABBR to an other “SQL” abbreviation elsewhere in the page, around it is everything you need to do.

When ABBR, and when Acronym?

Some abbreviations like “URL” and “SQL” are pronounced letter by letter by some, and as a normal word by others. The ABBR property should be used in these cases. Other abbreviations are just normal ‘words’ like “NAVO” or “ASAP”. Those should be surrounded by the acronym property.

<abbr title="Structured Query Language">SQL</abbr>
<acronym title="Naval Oceanographic Office">NAVO</acronym>

Disadvantages?

Everything has its disadvantages. The use on a blog or website has a major problem. Internet Explorer will not play along as it simply doesn’t recognize the property.

But there is a solution for Internet Explorer. We can add something extra HTML to the original codes:

<abbr title="Structured Query Language"><span class="abbr" title="Structured Query Language">SQL</span></abbr>

In Internet Explorer, ABBR isn’t recognized and therefore not styled. The extra span is there to get this done in another way. Below are the style declarations you should use if you want your visitors to think they are dealing with the original ABBR property:

abbr, acronym, .abbr {
  cursor: help;
  border-bottom: 1px dashed #ccc;
}

Conclusion

Internet Explorer is always bugging a webdesigner. All we can do is waiting until all IE users switch to a better browser. This is hard to achieve and in the meantime… We have to live with it.

I think the advantages of this property really are great, and the Internet Explorer problem is not that big. Thanks for your time.

This guide will tell you exactly what HTML emails are, how to make them and how to design your HTML emails.

What are HTML emails?

HTML emails are emails send with mark-up. Most of the time, an email just contains letters and words to bring over a message to the recipient. It doesn’t need any fancy colors or tables. HTML emails can be used to make the user experience more entertaining and can be used to focus the visitors’ attention to the most important parts.

Why should you use HTML emails?

When you are in the blogging or publishing industry you might want to send a newsletter to inform your regular visitors of new articles, updates and/or news. Most of the time, to keep your subscribers entertained, a more professional look is required. Or you want to point visitors in the direction of a great headline. This all can be achieved by using HTML emails with CSS in a proper way.

Do HTML emails always look good?

To give your HTML email a proper look, we should watch out for a couple points. As you might know, HTML and CSS are rendered slightly different by different browsers. Email clients have this problem as well. All Web-based (Gmail, Hotmail) and standalone clients (Outlook, Thunderbird) will react different.

When you have designed a website, you have to check for browser-compability by simple checking your webpage in different browsers. What we are going to with HTML has the same principle. We will test the email in different clients.

Designing HTML emails

Designing emails has the same principles as designing websites. You should grab the users’ attention, without loosing accessibility and usability out of sight.

To make sure your email looks as good as possible in as many clients as possible, it is advised to use the simplest elements. Validating your email is a good step in the right position!

Simple elements

Some elements are used for a longer time, and usually an email client will have a better support for those elements. For example, Div’s will not get supported by most clients, but tables are supported much better. The reason is simple; div’s are relative new compared to tables.

<table border="0">
<tbody>
<tr>
<td></td>
</tr>
</tbody></table>

Stylesheets

Because we are using CSS to style our HTML elements, we have to add style declarations. Strangely, his is not possible in the regular way. Extern stylesheets are ignored by most of the email clients. Extern stylesheets are stylesheets called for via a tag in the HTML, or via the @import attribute. We have to use inline CSS to style our elements.

Styles can be declared as <style> in the <head></head> area as well. Some email clients doesn’t read those, so it is advised to use inline styles.

<a style="color: #333; text-decoration: none;"></a>

Images

Images aren’t something that you should use to show important information in your email. Spammers abuse images to bring over the spam message and as a result, email clients usually give the recipient the choice to show images. Therefore, always add an ALT tag so people can recognize what the image is about, and so does the email client. Otherwise your email might get flagged as spam and will not get to your receiver.

The fold

The fold in websites is the area of that website you can view without scrolling. In email messages, a fold area is important as well, and you have to make sure the most important information and headlines are above the fold. Remember an email client (especially web-based) has a lot of buttons above your email, which makes the fold higher as a website. Remember to place the most important information as high as possible in your email to make sure people sees the important parts first by using contrast!

All points in a list

You should…

1. Validate your email
2. Use inline styles
3. Use tables
4. Test your email in different email clients (Web-based + Standalone)
5. Place the most important information as high as possible.

You should not…

1. Use external or embedded stylesheets
2. Use to many images (Don’t display your whole email in images)
3. Make your email to hard to read (contrast should be alright)
4. Use div’s with style declaration ‘float’.
5. Put headlines and important information under the fold.

Questions?

If you have any questions regarding this article or if you don’t understand a tip I gave, please let me know. I will answer your questions and help you out! Please post a comment or contact me

Via this guide, you will learn what a Z-Index is and how to use this property to overlap HTML elements with CSS.

What is a Z-Index

Z-index is an property in CSS and has been included in CSS because people asked for an property with the possibility to make HTML elements overlap. Overlapping HTML elements can have a lot of advantages. You can make the important parts of your website fall out from the background some more.

How to use Z-Index?

Z-index uses values to identify which element is more important then the other. The default value is 0. Usually, I give the item that should be on top value 20, the less important 10 and the least important item 1.

It doesn’t really matter which numbers you give to the Z-index. The only thing you should remember is that your top item should have to highest value. But adding Z-index to items isn’t enough to make things work.

For our example, we will use the following HTML structure. Those boxes should get ‘Z-indexed’ later on!

<div class="box1">Blue = Div #1 </div>
<div class="box2">Pink = Div #2 </div>
<div class="box3">Yellow = Div #3 </div>

Click here to take a look at an example I made. The item that should be on top (because of the Z-index value) is not on top: the boxes are displayed under each other instead of on top of each other. It looks like the Z-index is not working in this example, right?

The codes I have used in this example. It should work was my first guess as well.

div.box1 {
height: 250px;
width: 250px;
background-color: blue;
z-index: 1;
}
div.box2 {
height: 100px;
width: 300px;
background-color: pink;
z-index: 20;
}
div.box3 {
height: 125px;
width: 125px;
background-color: yellow;
z-index: 10;
}

What’s up?

The Z-index requires an other property to style the elements that should get ‘Z-indexed’. Our element requires the position property is set to absolute to make things works. Otherwise our Z-index won’t work, as can be seen in the example above.

It’s now time for an example that works. The boxes has been styled with the right properties and is ready to be used. A working Z-index example can be found here.

These are the codes I used here. I simply added an position:absolute; and a couple placement values (top, left) to the boxes. It works!

div.box1 {
	position: absolute;
 	top: 20px; left: 20px;
 	height: 250px; width: 250px;
 	color: white;
 	background-color: blue;
 	z-index: 1;
}
div.box2 {
	position: absolute;
 	top: 150px; left: 10px;
 	height: 100px; width: 300px;
 	background-color: pink;
 	z-index: 20;
}
div.box3 {
	position: absolute;
	 top: 15px; left: 175px;
 	height: 125px; width: 125px;
 	background-color: yellow;
 	z-index: 10;
}

We are done

I hope you now have fully understood the Z-index principle. You should always remember to add a position:absolute; property, or your Z-index will not work! If you have any questions regarding this subject, contact me or leave a comment.

This guide has all the information, examples and explanation you need about Robots.txt files.

What is a Robots.txt file

As the name already tells you, Robots.txt is a text file. A text file telling search engine ‘robots’ what to do with certain pages in your website. That is all a Robots.txt file does. For example, if you have a private weblog for your colleagues, which people outside your work group, should not be reading or if you have a site displaying time tables for a high school, the use of Robots.txt is an option.

Content in a Robots.txt file

The Robots.txt isn’t as expanded as it could be. This means there are disadvantages to the use of this file and of course the lack of features. Let’s start to go through them.

If you would like to include any of these features to your website, simply open up Notepad and save that file as Robots.txt. You should upload this file always in the root of your website.

Block all robots on all files

User-agent: *
Disallow:

Block all robots

User-agent: *
Disallow: /

Block all robots on specific directories

User-agent: *
Disallow: /admin/
Disallow: /private/

Block a Bad Crawler

User-agent: Bad Crawler
Disallow: /
# In a Robots.txt file, you can add comments. Add a '#' and type your comment.

What you should know about Robots.txt

As I mentioned earlier: there are some shortcomings and disadvantages to the use of these files. In this part of the guide I will add a couple tips.

1. Always place your Robots.txt file in the root of your website. Example: http://divitodesign.com and http://blog.divitodesign.com both fit the criteria.

2. Usually, blocking bad robots will not work. Those bad robots are usually spam bots and they will not even look for a Robots.txt file. They just ignore them.

3. The Robots.txt file is a public file. Everyone can look and find via the Robots.txt file which parts of the site is blocked. The part is blocked for the robots, but they aren’t for the users! Do not forget this.

4. As we aren’t perfect, typo’s and syntax errors are possible. Fortunately, there are some Robots.txt syntax checkers out there.

5. When you use Google’s Webmaster Tools, you could use Google’s Robots.txt generator to generate your Robots.txt file.

6. WordPress blogs could get a penalty for duplicating content (For example: same content on the “Categories and Archives” pages.) and you can use a Robots.txt file to exclude those archives and categories pages from the search results.

7. To block specific robots you need the right name. Here is a database of those robots with description per robot.

Do you need more information?

If you have any questions, please post a comment or contact me. You could check out the following sites if you need even more info; Robotstxt.org and the Wikipedia page.

This article is a beginners guide to heading tags in HTML and their search engine purpose.

This time we are going to talk about the heading tags you can use in HTML. To give you an example: h1, h2, h3, h4, h5, h6. These tags are used in HTML to define a heading or title.

The advantages of using heading tags?

Heading tags are used to create split content in parts to make things easier to read. It gets easier for the visitor to scan the document for the more important points of the article. A article with great use of heading tags could keep users reading on.

But there is more. Another great advantage of headings is the power it has in search engine optimizing. The search engines have accepted the use of headings and will give more value to this text in an article. A keyword-rich heading will significant improve your search engine visibility.

Which heading tag to choose from when looking from the SEO-aspect?

You have the choice between h1, h2 and all the way up to h6. The standard font-sizes vary between large and very small. h1 is the largest, and h6 is the smallest. The largest is the most important one and should be used only once in a single article or website. Using only one keyword-rich h1 tag will tell the search engine what your article or page is about.

The h2 tags should be used for sub-headings. To give you an example, this tag should be used to redivide the content described in the h1 tag. The content split by the h2 tag should be redivided by the h3 tag and so all the way down to h6.

Of course, a h1 is more important than h2 or h6. But a proper use of h2 and h3 tags will definitely improve the search engine visibility of your web page as well as a using h1.

A real example, please?

I have created an example which explains where to use what heading tag. And I’ve added some information behind it, to make sure you understand the meaning of each tags and what their purpose is in websites and articles.

In my opinion, it is the best to use the tags in the way of the example, when you want to make your website a bit search engine friendly.

Questions?

Shoot your questions at me via the contact page or drop your comment below.

When a browser scans your website, the first thing it looks for is its DOCTYPE. It helps render your website the proper way. Ever realized that a browser isn’t a real life guy that can guess in what language and type it is written? Well, a browser is just a tool for people to view your website and if it doesn’t know what and how it has to show a page, there can be some problems in layout. So when there’s a wrong, outdated or no DOCTYPE at all, your HTML, CSS or DOM codes are rendered as they where designed in the late 90’s. That’s not something a web developer like you want, right?

Most new, major browsers render the page the way the DOCTYPE says them to do. With major browsers I mean Internet Explorer 5.0 and up and of course Mozilla’s Firefox 1.0 and up. It is very logical new upcoming browsers will be using DOCTYPES as well. Only Opera doesn’t use DOCTYPEs, they always render a webpage a standard-compliant way.

So, you know why to use a DOCTYPE, but what is a DOCTYPE really. A DOCTYPE describes a document type definition (DTD). This is a machine-readable document that gives the browser the information it needs to display the right way as defined in the DOCTYPE. Example; if the DOCTYPE refers to XHTML 1.0 transitional, it get the information the XHTML 1.0 transitional DTD provides to proper render the webpage.

I hope you understand now what a DOCTYPE is. As a web developer you have to make choices and you might not know how you can use a DOCTYPE and when. In the next topic, I’ll show you the DOCTYPES you can use. You can also visit the W3C’s site for more information.

Different types of DOCTYPES

Of course, there are differences between HTML 4.01, XHTML 1.0 and XHTML 1.1. The DOCTYPE you have to choose depends on the language you have chosen.

HTML 4.01

Strict

Transitional

Frameset

XHTML 1.0

Strict

Transitional

Frameset

XHTML 1.1

Conclusion

Now, do you understand why you need to add a DOCTYPE? If not, please read my article again or leave a comment on this blog. In my opinion, this is a code everyone should use, especially if you think standards are important for the development of the web!

Thanks for reading this article. Please send me an email or leave a comment.