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.
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.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>
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
Have fun .
Paul
PS. : In case you missed the other tests you can find them here:
test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
test 5: http://www.sitepoint.com/forums/showthread.php?t=172472
test 6: http://www.sitepoint.com/forums/show...est+css+skills
test 7:http://www.sitepoint.com/forums/show...44#post3216244
test 8:http://www.sitepoint.com/forums/show...64#post3235664
test9:http://www.sitepoint.com/forums/show...45#post4108145
test10:http://www.sitepoint.com/forums/show...63#post4119063
test11:http://www.sitepoint.com/forums/showthread.php?t=595943
Test12: http://www.sitepoint.com/forums/showthread.php?t=597256
Originally Posted by YuriKolovsky
Dan Schulz you will be missed 
haha.
Bookmarks