SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 121
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    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
    Last edited by Paul O'B; Feb 13, 2009 at 10:15.

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    aaaaaa

    i win!

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

  3. #3
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This one looks interesting

  4. #4
    SitePoint Addict ornette's Avatar
    Join Date
    Mar 2005
    Location
    Tenerife, Canary Isles
    Posts
    175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still got my head wrapped around no 12. But I'll take a deep breath and .....

  5. #5
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    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.
    Cross browser css bugs

    Dan Schulz you will be missed

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    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

  8. #8
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahahaha, so its a yes.

    ill see what i can do...

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hmm...I'm in.

    Edit: Doubt I can do it but...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Oh noes, a trick!

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

  12. #12
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ohhhhhhh


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

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <dt>Employees</dt>
    <dd>89</dd>
    just out of curiosity, but is this semantically correct?

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,269
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

  16. #16
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    that programming is going up your head.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  18. #18
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    :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 17:04.

  19. #19
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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..
    Last edited by markbrown4; Feb 6, 2009 at 17:08.

  20. #20
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Got it working in IE7 now

    @markbrown4 I missed the picture was it funny?

  22. #22
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ro0bear View Post
    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.

  23. #23
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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
    Cross browser css bugs

    Dan Schulz you will be missed

  24. #24
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got my entry in. This would be so much easier (and IE6 compatible) if a few extra class names were allowed ..

  25. #25
    SitePoint Member Vim.F's Avatar
    Join Date
    Aug 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


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
  •