Using DIVs to Simulate Framesets

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: Firefox Internet Explorer 6 Internet Explorer 7 and 8 Netscape 8 Opera 8 Safari

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

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.

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s