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.

And here’s how the result will look like:

The German version of the Microprojects Feed Box

You will find the images that are required for this tutorial later in this post. I am quire aware of the fact that you could do it in CSS3 without the images but I will write that tutorial in a year or so. Let’s do something that will look the same in all the current browsers.

1. The XHTML structure

In the following we will have a quick look at the XHTML structure. It’s quite simple, we have a div for the box, some paragraphs and headlines and only few classes, since the enclosing div gets an id. Here’s how it looks like (only the specific code, I left out the document details for a better overview):

<div id="mpfeed">
  <h1>Mikroprojekte Feed<img src="rssfeed_box.gif" alt="RSS Feed Icon" /></h1>
  <div class="feedentry">
    <div class="feedpubdate">10. Mär 2010</div>
    <h2><a href="#">Mind Maps mit Bubbl.us gestalten</a></h2>
    <p>Das kleine Web-Tool Bubbl.us hilft dabei Mind Maps schnell und einfach zu erstellen.... <span><a href="#">mehr</a></span></p>
  </div>
  <div class="feedentry">
    <div class="feedpubdate">01. Mär 2010</div>
    <h2><a href="#">Texte mit Wordle visualisieren</a></h2>
    <p>Erstellen Sie in kurzer Zeit ansprechende Visualisierungen von beliebigen Texten. Der... <span><a href="#">mehr</a></span></p>
  </div>
  <p><a href="#">Feed abonnieren</a><img src="feed-icon-14x14.png" alt="Feed Icon" /></p>
  <p><a href="#">Hilfe zum Mikroprojekte Feed</a></p>
</div>

That was easy enough, wasn’t it? We need the nested elements to define specific styles for them. You could leave out the classes and still get the same result, but I would like to use the classes to make it a bit clearer.

2. The images we need for the deed

Here are the images we need for backgrounds, I will explain why they look like how they look like in a minute. Right click and download the images.

• boxes_back_bottom.gif
• boxes_back_top.gif
• feedentry_bg.gif
• feed-icon-14×14.png
• rssfeed_box.gif

The box around the whole thing gets two images. The bottom image will be the background for the div that has the id mpfeed. The top image will be the background of the h1 in the box and will thus cover the div’s background image. That’s a derivation of the ever so nifty sliding doors technique, which means that the box can be adjustable in height. That’s why the bottom image is rather high, just in case that you have a rather high box.

The feed entry div gets a separate background image. You can see that it is larger as the box as well and it also misses the gray lines at the left side and the top. We’ll do that with CSS.

3. Setting the box

Here’s the CSS bit that we need to make the box look like the box in the image above.

#mpfeed {
    background: url(boxes_back_bottom.gif) left bottom no-repeat;
}
#mpfeed h1 {
    background: url(boxes_back_top.gif) left top no-repeat;
    font-size: 12pt;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 10px;
}

As I wrote, this is just for the surrounding box. It also defines the h1, h2 and p tags that we have in the box. The following definitions will make everything else look good.

#mpfeed .feedentry {
    background: url(feedentry_bg.gif) right bottom no-repeat;
    margin: 0 8px 10px;
    padding: 0 0 10px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    position: relative;
}
#mpfeed .feedentry h2 {
    margin: 3px 0 5px;
    padding: 0 3px;
    white-space: normal;
    font-size: 10pt;
}
#mpfeed .feedentry p {
    margin: 0 0 5px;
    padding: 0 3px;
    font-size: 8pt;
}
#mpfeed .feedentry .feedpubdate {
    text-align: center;
    width: 30px;
    float: right;
    margin: 3px;
    font-size: 8pt;
    border: 1px dotted #ccc;
}
#mpfeed .feedentry p span {
    float: right;
    margin-right: 2px;
}

Now, let’s explain this a bit. Each feed entry gets a background which makes it look like a flipping page. It also get a date box and aligns the more to the right. That’s fairly easy to do and if you will be in the Presenting Content or the Web Technologies courses in summer semester, I will explain to you in details, what it is all about.

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

Tested in: 

The XHTML code…

… basically remains the same. In the case of the external link you will have to add class="external", in the case of an e-mail link we use class="mailto" and for the specific link we can use a so-called attribute selector. We’ll come to that later.

<a href="internal.html">Example for an internal link</a>

<a href="http://www.csszengarden.com/">Example for an external link</a>

<a href="http://www.royal.gov.uk/">The British Monarchy (specific external link)</a>

<a href="mailto:blabla@blabla.com">Example for an e-mail link</a>

The internal link is just there to show the difference. We won’t do anything with it.

For the flagging we use three different GIFs, transparent and quite small. Here they are (right-click and save as):

On to the CSS code. First we’ll define the normal link attributes and add the right values for the classes.

a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #006699;
	text-decoration: none;
	font-weight: bold;
}
a.external {
	padding-left: 16px;
	background: url(external.gif) left center no-repeat;
}
a.mailto {
	padding-left: 16px;
	background: url(mailto.gif) left center no-repeat;
}

You may of course also add the definitions for the pseudo classes :visited, :hover etc. but I will leave this out for now. color and text-decoration are of course a matter of personal taste. The padding-left value has to be adjusted according to the image width. Be sure that you leave some space between the image and the text. In this case the image width is 10 pixels and I have added some more 6 pixels between image and text.

Note that I have used the shorthand for background. A useful article on shorthand properties can be found at 456 Berea Street.

The Attribute Selector

The attribute selector is a useful means if you want specific tag with specific attribute to look, uhm, specific. There are four types of attribute selectors.

[attribute] matches all elements that have this attribute, regardless of its value.

[attribute=value] matches all elements that have this attribute and exactly this value.

[attribute~=value] matches all elements that have this attribute and this value among others.

[attribute|=value] matches all elements that have this attribute and starts with this value among others.

So in case of the royal link we wanted to apply above, we could use the following definition:

a[href="http://www.royal.gov.uk/"] {
	padding-left: 15px;
	backgound: url(royal.gif) left center no-repeat;
}

This is how it looks in the end…

Questions/Problems/Disappointments

Now, you may ask, if we have this attribute selector [attribute|=value], couldn’t we just use them on the href value, because it starts with http in case of the external link and with mailto in case of the mail link? No, unfortunately not, because this would have been really nifty. But life isn’t alway like this… You will have to use the whole attribute value.

Another thing is that the image will behave strangely in Internet Explorer 7 Beta if the link continues into the next line. If you are currently using IE7 and want to know how this looks, go back to the XHTML/CSS tutorials homepage and see the Creative Commons link or have a look at the 456 Berea Street link above which is flagged as external. IE7 displays the link as a block of two lines and thinks that it has to use the center of the whole block. In the final release of IE7 the image disappears altogether.

Additional Information

The page Iconize Textlinks with CSS already takes the whole thing some steps further. IE6/7 support is out of the question due to CSS3 attribute selectors. Still, if you work with a descent browser…

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Germany License.

This tutorial will show you how to use DIVs to simulate a frameset. Framesets are often problematic in terms of accessibility, however, they provide a simple way to structure a web document visually. Using DIVs in a specific manner can help to achieve both, a clear visual structure and high accessibility.

See the result of this tutorial.

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

Tested in: 

While working on the VCT portal I thought that the learning windows should be redesigned from a frame structure to a structure using DIVs in order to provide higher accessibility while the visual structure remains the same. Visual structure is a very important element in e-learning, since learners should be distracted as little as possible while working with a learning object. For accessibility problems with frames see the W3.org Accessibility Guideline.

Structuring a page using DIVs is fairly simple and there are a lot of tutorials all over the web. Most of them do not take into account an advantage of framesets for visually enabled users, namely that elements of navigation can be placed in the same spot on a page, so that users do not have to search for them when navigating to a new page.

In this tutorial I will show how to create the following structure (coming from the framesets of a VCT learning window).

Frame Structure

The XHTML code

The code for this is fairly simple. We need three <div> elements and can add some other stuff to fill the page with life. I will not comment a great deal on the code, I guess it’s fairly straight forward:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVs as Frames Final Version</title>
</head>

<body>
	<div id="mainmenu">
		<ul id="menu">
			<li>Home</li>
			<li>Information</li>
			<li>Contact</li>
			<li>Links</li>
		</ul>
	</div>
	<div id="content">
		<h1>Content goes here...</h1>
		<p>A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...
			A lot of valueable content on these pages...</p>
	</div>
	<div id="toolbar">
		<p>This is the toolbar to which you can add
			your toolbar buttons later on.</p>
	</div>
</body>
</html>

Now, if this isn’t straight forward, I don’t know what it is. Anyway, the CSS part is more tricky, let’s do it step by step.

The CSS Code

There are many ways in which you can use framesets. The image above would be coded as a nested frameset, which means that the content and tools frames add up to a frameset which is combined with the menu frame to another frameset. Complicated as this may seem, we can forget about it in an instant, because the CSS will provide a simpler way, placing each “frame” in an absolute position, as you will see.

So let’s position the <div> elements where we want them. You may also have a different structure, I am choosing this one because it’s a bit tricky to let the tools frame stick to the bottom of the page… This is the CSS part after positioning the <div>s:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
body, #mainmenu, #content, #toolbar {
	margin: 0;
	padding: 0;
}
#mainmenu {
	width: 20%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #FFFEE3;
	border-right: 1px solid #999999;
}
#content {
	width: 80%;
	position: absolute;
	top: 0;
	bottom: 10%;
	left: 20%;
}
#toolbar {
	width: 80%;
	height: 10%;
	position: absolute;
	bottom: 0;
	left: 20%;
	top: auto;
	text-align: center;
	background-color: #FFFEE3;
	border-top: 1px solid #999999;
}

Note that I set the position of all <div>s to absolute and used percentages to create a dynamic design. You may also use pixel values for this. You know the pros and cons, I guess. The tricky part is to attach the toolbar to the bottom of the page. This can be done by setting the bottom property to 0 and the top property to auto.

Here’s how this looks like. There are some display differences in the browser due to the fact that we did not define the <ul>, <h1>, and <p> elements. But that shouldn’t be a problem. Rather, the problem is that Internet Explorer 6 (well, yes, I know…) displays the main menu differently in that it ignores the height: 100%; part of the CSS.

The other problem is that the border of the mainmenu does not go through to the bottom of the page as it would were it a frameset we were using. We need to cheat a little in order to hit two birds with one stone, i.e. solve the IE problem and the border problem.

The trick has been published by Trenton Moss in his highly recommended Ten CSS tricks you may not know article for webcredible.co.uk. And it goes a little something like this:

First we kick out the #mainmenu properties background-color and border-right. We just don’t need them where we’re going. Then we prepare a background image, which can download in order to have it ready. The special thing about the background image is that it is divided into two parts according to the division made in the page layout, meaning the yellow part on the right is 20% wide and the white part is 80%. There is a gray pixel at the end of the yellow part which will add up to the line later on. Finally, we need to add the following line to the body selector.

background: url(background.gif) repeat-y 20% 0;

This shorthand property is explained in detail in this article at 456 Berea Street. What is important here is that we set the value of the backgound-position to 20% and 0, which means that it is placed 20% from the center to the right and starts at the top of the page, which further means that it simulates the mainmenu “frame” the way we wanted it… Have a look at the result so far.

Another point with frames is that you can have the content frame scrollable while the other frames remain in place. You can have that with CSS, too. Simply add the following line to the content selector:

overflow: auto;

If the content of the main “frame” exceeds the available space, a scrollbar will added to the #content div.

There you go, with a little adjustments to the overall appearance this is the “frameset”. The CSS is included 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: 

I was looking for a way to represent the hierarchical structure of the portal of the Virtual Linguistics Campus. There will be some discussion about whether the simulation of a directory structure for this purpose is a good way to do so. But you should know that most users of this web site are rather unexperienced in using a computer and are always thankful to see elements that they recognize instantly. Thus, I decided to do exactly that.

The XHTML code

To start with, we are going to write the XHTML code for the unordered nested list, all valid strict XHTML 1.0 code (not to worry, it’s what you probably know anyway):

<ul id="sitemap">
	<li>Home</li>
	<li>Information
	<ul>
		<li>Personal</li>
		<li>Company Info</li>
	</ul></li>
	<li>Tutorials
	<ul>
		<li>Photoshop</li>
		<li>XHTML</li>
		<li>CSS
		<ul>
			<li>Explorer-like Sitemap</li>
			<li>Simple Horizontal Menu</li>
		</ul></li>
		<li>PHP</li>
	</ul></li>
	<li>Contact</li>
	<li>Links</li>
</ul>

This is pretty straight forward I guess.

Let’s start thinking about the CSS for the directory look. As you may know, we can use the style list-style-image to use any image we like instead of the usual bullets. For our purpose we could create an image with a vertical line running down infront of all list items and a horizontal line guiding the way to each item. Let’s try this with a simple list like the following:

<ul id="sitemap">
	<li>Home</li>
	<li>Information</li>
	<li>Tutorials</li>
	<li>Contact</li>
	<li>Links</li>
</ul>

The CSS for the lines and everything would look like this:

#sitemap {     /*leave this out if you've defined the font*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #000000;
}

#sitemap li {
	list-style-image: url(line_01.gif);
}

As always in web development, there is a problem…

At least I haven’t found a way to work around this phenomenon. If you use an image of a line which should continuously connect to the next line, forget about it what you will get is this (at least it looks the same in IE and Firefox ):

The 2 pixel gap in Firefox 2 and Internet Explorer 7

I call this the gap problem and if you are Eric Meyer and you are reading this, maybe you could drop me a line and tell me how to avoid it (never mind that the rest of the tutorial may be too complicated anyway…). No matter what you do, set every margin and padding to 0, the gap will not disappear. You can of course make the font smaller but not until 5pt will you get a smaller gap between items. I also tried 1pt and there was still a gap between some items. Not all, which makes you wonder once again…

Now, you will say that the problem can be solved by defining the line-height style and you are right… Well, guess what: It only works for Firefox. Good ol’ IE will misbehave again. Or was it Firefox that misbehaves? I’m getting tired of this. Fact is that no matter how you use line-height (number value, length value, or percentage value) both browsers present different results and I will not start thinking about other browsers yet. It would have been so nice… That’s why I left out the line-height altogether.

This is an appeal to the public: If you know a way to make this gap disappear (there is a doh!-solution I am sure) please send an e-mail. Thank you. As I said, there is a doh!-solution to the gap problem, see the end of the page for further info.

My work-around solution for the gap is to utilize it and create a dashed line which keeps in mind the two pixels in between list items. You could of course do it with a dotted line but not with every dotted line, you need to leave two pixels space in between and make sure that the top and bottom pixels are filled with color, just like the following screenshots exemplify:

Dashed

Dotted

Thus, we will use the gap to get a line which is continuous in some sense.

Now let’s try this on our nested list.

For a cool directory list, I want…

If you have a close look, we need a lot of different images to get a perfect look. Let’s make a list with things to avoid and things that we want:

• The first level items (Home, Information, etc.) don’t need lines.
• The lines start too close beneath the ‘mother’ items.
• The last item should be a corner and not continue into ‘nothing’.
• Level three items need two lines to the left to continue the hierarchy structure.
• Level four items… No, that’s something you can figure out for yourself. It’s late, this should suffice.

Let’s count. We need 8 different images for the nested list with three levels and here they are (I’ve added a border to make things less confusing):

Once we have them we can do everything else in CSS. Are you still with me? O.K. on we go.

The CSS part of the whole thing

Let’s think about how the structure of the nested list might help us to use as few classes as possible (maybe none at all). Have a look at the XHTML code again:

<ul id="sitemap">
	<li>Home</li>
	<li>Information
	<ul>
		<li>Personal</li>
		<li>Company Info</li>
	</ul></li>
	<li>Tutorials
	<ul>
		<li>Photoshop</li>
		<li>XHTML</li>
		<li>CSS
		<ul>
			<li>Explorer-like Sitemap</li>
			<li>Simple Horizontal Menu</li>
		</ul></li>
		<li>PHP</li>
	</ul></li>
	<li>Contact</li>
	<li>Links</li>
</ul>

Level 1 items are the children of the <ul> with the ID ‘sitemap’. We did not want any list style for them. So the CSS code for those list items is the following (let’s make it easy for a start, although this applies to all descendants of #sitemap):

#sitemap li {
	list-style-type: none;
}

Level 2 items are children of the unordered lists that are children of the aforementioned level 1 items (hey, they are grandchildren in other words…), so we could write this in order to get the first basic images:

#sitemap ul li {
	list-style-image: url(l2_normal.gif);
}

Level 3 items are children… and so on… You know how it works:

#sitemap ul ul li {
	list-style-image: url(l3_normal.gif);
}

You will see that we have some things to do. We need to change the image for the first entry on each level. We need to increase the margin between the level 1 items to make it all clearer. And we need to change the image for the last item.

To change the image for the first entry we need to introduce a class for level 2 and one for level three. The same applies for the last entry.

#sitemap ul li.firstfollow {
	list-style-image: url(l2_first_follow.gif);
}

#sitemap ul li.last {
	list-style-image: url(l2_last_item.gif);
}

#sitemap ul ul li.firstfollow {
	list-style-image: url(l3_first_follow.gif);
}

#sitemap ul ul li.last {
	list-style-image: url(l3_last_item.gif);
}

The changed XHTML code look like this:

<ul id="sitemap">
	<li>Home</li>
	<li>Information
	<ul>
		<li>Personal</li>
		<li>Company Info</li>
	</ul></li>
	<li>Tutorials
	<ul>
		<li>Photoshop</li>
		<li>XHTML</li>
		<li>CSS
		<ul>
			<li>Explorer-like Sitemap</li>
			<li>Simple Horizontal Menu</li>
		</ul></li>
		<li>PHP</li>
	</ul></li>
	<li>Contact</li>
	<li>Links</li>
</ul>

You may have seen the firstfollow class and asked yourselves, is there a firstnofollow class? Yes, because if there wasn’t we’d need only 6 images like in the list so far. I’ve added l[x]_first_no_follow.gif to cover the unlikely event that you only have one item.

I have also added a child selector in the stylesheet to increase the margin between level 1 items. This, however, does not work in IE because it does not support child selectors.

O.K., now the final stylesheet looks like this:

#sitemap {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #000000;
}

#sitemap li {
	list-style-type: none;
}

ul#sitemap > li {
	margin-bottom: 10px;
}

#sitemap ul li {
	list-style-image: url(l2_normal.gif);
}

#sitemap ul ul li {
	list-style-image: url(l3_normal.gif);
}

#sitemap ul li.firstfollow {
	list-style-image: url(l2_first_follow.gif);
}

#sitemap ul li.last {
	list-style-image: url(l2_last_item.gif);
}

#sitemap ul ul li.firstfollow {
	list-style-image: url(l3_first_follow.gif);
}

#sitemap ul ul li.last {
	list-style-image: url(l3_last_item.gif);
}

Hope you like it and I’m looking forward to receiving your suggestions.

Questions/Problems/Disappointments

The only problem I can think of, is that users may adjust the font-size and this will break apart the whole structure. If you know that your users will not do this, you don’t have to bother. If you want it more flexible, you’ll have to think of whether this is the right thing for you, I’m afraid…

Suggestions from you, valued readers

27 March, 2006

Blair Miller suggested some easier code for almost the same effect. You might change the border style and the image (you only need one image in his example) to solid in order to make it work in IE. Here’s his CSS:

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}

li {
	margin-bottom: 15px;
}

li li {
	background: transparent url(horizontal-dot.gif) 0 0.5em no-repeat;
	border-left: 1px dotted #000;
	margin: 0 0 0 15px;
	padding-left: 25px;
}

li li ul {
	padding-bottom: 15px;
}

28 March, 2006

Jason Hutchinson suggested to remove the gap by setting the margins to a negative value. A bit dirty but it works in FF and IE. Here are the necessary changes in the CSS:

#sitemap li {
	list-style-type: none;
	margin-bottom:-2px;
}

#sitemap ul {
	margin-top:-2px;
}

26 April, 2006

Robin Parmar suggests a different approach to the problem. He is using more HTML code, fewer images, and comes up with a more flexible solution. Have a look at his suggestion.