SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 121

Hybrid 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,545
    Mentioned
    183 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

  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
    622
    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,545
    Mentioned
    183 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,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hmm...I'm in.

    Edit: Doubt I can do it but...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  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
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 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
    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

  13. #13
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    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.
    ...
    An intranet without IE6 must be a dream come true.

    This Quiz I have not been involved in. But I can't participate before thursday at earliest. If it is still open then I absolutely want to give it a try.

    Anyway, I will read through all marvellous entries posted and learn a lot.
    Happy ADD/ADHD with Asperger's

  14. #14
    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.

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    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?

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 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.

  18. #18
    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.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 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

  20. #20
    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.

  21. #21
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    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.

  22. #22
    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.

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

    @markbrown4 I missed the picture was it funny?

  24. #24
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,117
    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.

  25. #25
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    622
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    I thought so

    It was just a complete mess but it had a bit of charm.
    can you PM it to me please?


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
  •