SitePoint Sponsor

User Tag List

Results 1 to 25 of 121

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 13 :

    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



    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
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •