SitePoint.com

Paul O'B · Feb 6, 2009, 07: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, 07:26

aaaaaa

i win!

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

ro0bear · Feb 6, 2009, 07:43

This one looks interesting

ornette · Feb 6, 2009, 08:08

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

YuriKolovsky · Feb 6, 2009, 08: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?

Quote:

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, 08:24

Quote:

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, 08:54

Quote:

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, 08:59

hahahaha, so its a yes.

ill see what i can do...

RyanReese · Feb 6, 2009, 10:02

Hmm...I'm in.

Edit: Doubt I can do it but...

AutisticCuckoo · Feb 6, 2009, 11: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, 11:23

Oh noes, a trick!

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

YuriKolovsky · Feb 6, 2009, 11:23

ohhhhhhh

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

RyanReese · Feb 6, 2009, 11: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, 11:45

Code:

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

just out of curiosity, but is this semantically correct?

Stomme poes · Feb 6, 2009, 11: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, 11:56

that programming is going up your head.

Paul O'B · Feb 6, 2009, 13: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, 14: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, 14: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, 15: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, 16:33

Got it working in IE7 now

@markbrown4 I missed the picture

was it funny?

markbrown4 · Feb 6, 2009, 17:20

Quote:

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, 21:07

Quote:

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, 22: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, 22: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

Feb 6, 2009, 11:20	#10
AutisticCuckoo SitePoint Author Join Date: Nov 2004 Location: Ankh-Morpork Posts: 12,259	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'. __________________ Birnam wood is come to Dunsinane

Feb 6, 2009, 11:36	#13
RyanReese CSS Consultant/Ninja-I'm fast Join Date: Oct 2008 Location: Whiteford, MD Posts: 11,805	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. __________________ I'm here to help you with any CSS problems you have My fastest 3x3x3 Rubiks cube time-9.84 NonLucky Age doesn't matter-I'm 18 Always looking for work (HTML/CSS) I do NOT answer PMs for help .

Feb 6, 2009, 11:45	#14
Fre420 SitePoint Addict Join Date: Nov 2005 Location: Leuven, Belgium Posts: 209	Code: <dt>Employees</dt> <dd>89</dd> just out of curiosity, but is this semantically correct?

Feb 6, 2009, 13:26	#17
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 29,757	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 __________________ www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles Ultimate CSS Reference

Feb 6, 2009, 14:01	#18
YuriKolovsky Hibernator Join Date: Nov 2007 Location: Malaga, Spain Posts: 935	: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... Last edited by YuriKolovsky; Feb 6, 2009 at 15:04..

Feb 6, 2009, 07:26	#2
YuriKolovsky Hibernator Join Date: Nov 2007 Location: Malaga, Spain Posts: 935	aaaaaa i win! edit: i will try and do it later. planning a trip to a mountain right now.

Feb 6, 2009, 07:43	#3
ro0bear ? Join Date: Oct 2007 Location: United Kingdom Posts: 592	This one looks interesting

Feb 6, 2009, 08:08	#4
ornette SitePoint Addict Join Date: Mar 2005 Location: Tenerife, Canary Isles Posts: 222	Still got my head wrapped around no 12. But I'll take a deep breath and .....

Feb 6, 2009, 08:59	#8
YuriKolovsky Hibernator Join Date: Nov 2007 Location: Malaga, Spain Posts: 935	hahahaha, so its a yes. ill see what i can do...

Feb 6, 2009, 10:02	#9
RyanReese CSS Consultant/Ninja-I'm fast Join Date: Oct 2008 Location: Whiteford, MD Posts: 11,805	Hmm...I'm in. Edit: Doubt I can do it but... __________________ I'm here to help you with any CSS problems you have My fastest 3x3x3 Rubiks cube time-9.84 NonLucky Age doesn't matter-I'm 18 Always looking for work (HTML/CSS) I do NOT answer PMs for help .

Feb 6, 2009, 11:23	#11
Stomme poes Site Point Member Join Date: Aug 2007 Location: Netherlands Posts: 6,027	Oh noes, a trick! If I get time in the weekend, I'll give it a try.

Feb 6, 2009, 11:49	#15
Stomme poes Site Point Member Join Date: Aug 2007 Location: Netherlands Posts: 6,027	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.

Feb 6, 2009, 11:56	#16
YuriKolovsky Hibernator Join Date: Nov 2007 Location: Malaga, Spain Posts: 935	that programming is going up your head.

Feb 6, 2009, 14:36	#19
markbrown4 padawan Join Date: Jul 2006 Location: Victoria, Australia Posts: 3,225	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.. __________________ -- twitter \| yellowshoe \| acne.org Regimen works! Last edited by markbrown4; Feb 6, 2009 at 15:08..

Feb 6, 2009, 15:00	#20
YuriKolovsky Hibernator Join Date: Nov 2007 Location: Malaga, Spain Posts: 935	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.

Feb 6, 2009, 16:33	#21
ro0bear ? Join Date: Oct 2007 Location: United Kingdom Posts: 592	Got it working in IE7 now @markbrown4 I missed the picture was it funny?

Feb 6, 2009, 22:21	#24
Centauri SitePoint Wizard Join Date: May 2007 Location: Newcastle, Australia Posts: 3,718	Got my entry in. This would be so much easier (and IE6 compatible) if a few extra class names were allowed .. __________________ Centauri Web Design

Feb 6, 2009, 22:44	#25
Vim.F SitePoint Member Join Date: Aug 2007 Posts: 8	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 __________________ edit signature

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode