CSS - Test Your CSS Skills Number 13 :

**Paul O'B** · Feb 6, 2009, 08:16

CSS - Test Your CSS Skills Number 13 :Quiz now ended -see solution in post #96

After the tricks of previous quizzes we are now going to concentrate on a real world CSS example and create an organisational chart that follows the usual tree structure. This will be created using semantic html kindly supplied by Tommy (AutisticCuckoo).

Look at the attachment (chart.png), which is an actual screenshot from Firefox. Your task is to replicate this structure using CSS only as the html will be supplied for you.

You cannot alter the html at all apart from the CSS of course. You will not touch the html and cannot add classes or any other code to the html apart from CSS between the style tags.

The resulting design is expected to work in IE7, Opera, Firefox and Safari (modern versions). We are not catering for IE6 in this example as it could easily be catered for with a few hacks and alternative code anyway.

Here is the html that you must use.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Organisation Chart</title>
<style type="text/css">
/* enter your css under here */
</style>
</head>
<body>
<h1>Organisation</h1>
<dl>
    <dt>President</dt>
    <dd>A. Andrews</dd>
</dl>
<h2>Support Staff</h2>
<ul>
    <li>
        <dl>
            <dt>Vice President</dt>
            <dd>B. Burns</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Secretaries</dt>
            <dd>C. Colins</dd>
            <dd>D. Dylan</dd>
        </dl>
    </li>
</ul>
<h2>Divisions</h2>
<ul>
    <li>
        <dl>
            <dt>Economy</dt>
            <dd>
                <dl>
                    <dt>Manager</dt>
                    <dd>E. Ericson</dd>
                    <dt>Secretary</dt>
                    <dd>F. Fitzgerald</dd>
                    <dt>Employees</dt>
                    <dd>25</dd>
                </dl>
            </dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Marketing</dt>
            <dd>
                <dl>
                    <dt>Manager</dt>
                    <dd>G. Glockstettner</dd>
                    <dt>Secretary</dt>
                    <dd>H. Holmes</dd>
                    <dt>Employees</dt>
                    <dd>14</dd>
                </dl>
            </dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Products</dt>
            <dd>
                <dl>
                    <dt>Manager</dt>
                    <dd>I. Irkwell</dd>
                    <dt>Secretary</dt>
                    <dd>J. Jones</dd>
                    <dt>Employees</dt>
                    <dd>89</dd>
                    <dt class="sub">Subdivisions</dt>
                    <dd>
                        <ul>
                            <li>Manufacturing</li>
                            <li>Quality Assurance</li>
                        </ul>
                    </dd>
                </dl>
            </dd>
        </dl>
    </li>
</ul>
</body>
</html>

I am not too worried about the exact positioning of the layout but it should be along the lines of the attached image. You should try to maintain the flow of the document and if you feel like making cosmetic improvements then that’s fine also.

General Rules:

No javascript or scripting of any kind
No images or background images.
No expression,conditional comments, behaviours etc.
No Hacks
Do not alter the HTML apart from where specified
Modern Browser support – (Not ie6)

As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive and the criteria may be based on code and looks.

Unlike the other tests this one does have a valid day-to-day use while still being fun at the same time.

Solutions will be posted later next week (or longer) depending on how it goes

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 13 :

Thread Tools

Display

Threaded View

CSS - Test Your CSS Skills Number 13 :

Bookmarks

Bookmarks

Posting Permissions