Welcome to the first episode of a series of HTML/CSS tutorials that deal with the application of CSS techniques in a real life setting. The series is supposed to be used in an upcoming course at the University of Marburg, students will be able to try to figure out how to do this.

And this is what we are going to do in this episode: The Virtual Center for Teacher Training has introduced a so called Microprojects Feed, which in return got a box on its own on the left of the portal. We will design this box.

Read the whole post…

This tutorial will show you how to add a small GIF image to a link depending on whether the link is internal (no image), external, a specific external link, or a mailto link.

Required knowledge: XHTML, CSS, How to create a transparent GIF (or use the ones provided).

Tested in: 

Read the whole post…

Read the whole post…

This tutorial will use a nested unordered list with two levels to create a hierarchical structure where dashed lines will show the dependencies. This could be used as a sitemap or to visualize a directory. The advantage of this technique is that you only need a simple nested list and do not have to add any additional code in the HTML document.

Have a look at the final result.

Required knowledge: XHTML, CSS, How to create a transparent GIF (or use the ones provided).

Tested in: 

Read the whole post…