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

**YuriKolovsky** · Feb 6, 2009, 08:26

aaaaaa

i win!

edit:
i will try and do it later.
planning a trip to a mountain right now.

**ro0bear** · Feb 6, 2009, 08:43

This one looks interesting

**ornette** · Feb 6, 2009, 09:08

Still got my head wrapped around no 12. But I'll take a deep breath and .....

**YuriKolovsky** · Feb 6, 2009, 09:23

ohhh, this one is proving to be completely new grounds for me.
even the html looks all weird.

edit:
are we allowed to make the html more readable?
by removing spaces?

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

test 12A, i have already used it in real life.
on a website, because its much better than using images, and you can give hover states.

**SoulScratch** · Feb 6, 2009, 09:24

Originally Posted by YuriKolovsky

ohhh, this one is proving to be completely new grounds for me.
even the html looks all weird.

i admit.. this one is very challenging.

**Paul O'B** · Feb 6, 2009, 09:54

Originally Posted by YuriKolovsky

even the html looks all weird.

edit:
are we allowed to make the html more readable?
by removing spaces?

I have reformatted the html to look nicer as the formatting got lost between copying and pasting

**YuriKolovsky** · Feb 6, 2009, 09:59

hahahaha, so its a yes.

ill see what i can do...

**RyanReese** · Feb 6, 2009, 11:02

Hmm...I'm in.

Edit: Doubt I can do it but...

**AutisticCuckoo** · Feb 6, 2009, 12:20

Just as information: this exercise is based on a real-life situation where I needed to do the very same thing for our office intranet. The old version, which I made a few years ago, used a number of empty spans to create the connecting lines between the boxes. I thought it would be an interesting challenge to see if I could make it without any extra markup at all. It turned out to be surprisingly simple, once I figured out the crucial 'trick'.

**Stomme poes** · Feb 6, 2009, 12:23

Oh noes, a trick!

If I get time in the weekend, I'll give it a try.

**YuriKolovsky** · Feb 6, 2009, 12:23

ohhhhhhh

edit: its always about tricks, now i need to know that trick.

**RyanReese** · Feb 6, 2009, 12:36

I hate "tricks" because I always feel dumb when I can't figure out the trick, and when they tell me what it is I feel dumber

haha.

**Fre420** · Feb 6, 2009, 12:45

Code:

<dt>Employees</dt>
<dd>89</dd>

just out of curiosity, but is this semantically correct?

**Stomme poes** · Feb 6, 2009, 12:49

I tend to think so, I use dl's for this sort of thing a lot.

The dl makes us make the assumption that the stuff in the dt has something to do with the stuff in the dd. Unlike any other list, where there's no real relationship between individual list items other than, they all belong to that list.

<dt>Name:</dt>
<dd>Pino</dd>
<dt>Type:</dt>
<dd>Bird</dd>

Pino isn't a random list item, but like in a hash (in programming) it's key is "Name". The key "Type" then has "Bird" as a value.
Name=>Pino
Type=>Bird

This is assuming you don't believe dl's are soley for terms and definitions (like in a dictionary). Most people stretch it to, if there are key-value pairs, and it's not a table, then it's a dl.

**YuriKolovsky** · Feb 6, 2009, 12:56

that programming is going up your head.

**Paul O'B** · Feb 6, 2009, 14:26

Wow - I've already got a very good entry from Ro0bear which just needs tidying up a bit for IE7 but otherwise looks very good.

I'm impressed

**YuriKolovsky** · Feb 6, 2009, 15:01

:O!!!!

all i can say.

i'm still clueless...

can't find this "trick".
i still cant believe how web based Internet search is a huge mess.
it must be fixed!

edit2:
i just got some idea...

**markbrown4** · Feb 6, 2009, 15:36

hmm tricky

Tommy always make me use selectors I don't normally use.
[removed image]
sorry, I didn't think it would give any clues..

**YuriKolovsky** · Feb 6, 2009, 16:00

aha!
i know it one trick now!

its really obvious when i think about it.
(yes everyone, i said OBVIOUS)

reorganizing the markup to look better, plus drawing it on a piece of paper, i had ideas, the same ones as now, but the image above, is just too much a clue.

too bad its too late to make it reality.
ill see what can be done tomorrow.

**ro0bear** · Feb 6, 2009, 17:33

Got it working in IE7 now

@markbrown4 I missed the picture

was it funny?

**markbrown4** · Feb 6, 2009, 18:20

Originally Posted by ro0bear

Got it working in IE7 now

@markbrown4 I missed the picture

was it funny?

I thought so

It was just a complete mess but it had a bit of charm.

**SoulScratch** · Feb 6, 2009, 22:07

Originally Posted by AutisticCuckoo

Just as information: this exercise is based on a real-life situation where I needed to do the very same thing for our office intranet. The old version, which I made a few years ago, used a number of empty spans to create the connecting lines between the boxes. I thought it would be an interesting challenge to see if I could make it without any extra markup at all. It turned out to be surprisingly simple, once I figured out the crucial 'trick'.

I think I have the trick and solution down, but aghh this'll be a lot of grunt work ;p

**Centauri** · Feb 6, 2009, 23:21

Got my entry in. This would be so much easier (and IE6 compatible) if a few extra class names were allowed ..

**Vim.F** · Feb 6, 2009, 23:44

Does this need to be scalable?...

I haven't done it all the way but it seems the 'trick' is a little too easy to figure out

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 13 :

Thread Tools

Display

CSS - Test Your CSS Skills Number 13 :

Bookmarks

Bookmarks

Posting Permissions