SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 79
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 19

    CSS - Test Your CSS Skills Number 19 : Quiz ended - see solution in post #59

    Time to roll out a new quiz and although this may seem similar to recent quizzes it has in fact got nothing in common with them

    Your task this week is to imitate a drop down menu that works when you click the top level menu to reveal the sub menu items. That sounds easy enough but you are not allowed to use any javascript or scripting of any kind and this layout must work in IE6. (I'm not interested in other browsers but my example works in all except Opera.)

    First take a look at the attached image clickdrop.png which shows several screenshots of the menu in different states.

    Each sub menu is made visible by clicking the top level menu and each is revealed in turn as you click along the row. The previous submenu should disappear when you click a new menu item on the top level. The submenu is persistent in that it is not a hover effect and you can move the mouse away and the menu still stays in place (neither is it an :active or :focus effect).

    To clear the last viewed menu from the screen a close menu button is placed at the end which returns the menu to its original collapsed position when clicked. (A close button is needed because the menu will not disappear if you click the same menu item again.)

    All the submenu links should be clickable and send you to the correct location should they be clicked.

    Just study the screenshots to see the exact positions but it is a pretty straight forward example.

    Rules:

    No Hacks
    No Conditional Comments
    No Scripting of any kind
    No Nested anchors (or object, ins, del)
    No Images or background images
    Valid CSS 2.1
    Valid HTML

    ** Most importantly it Must work in IE6 **


    Use your own HTML and CSS but it must be valid. If you can improve on my version and give it better functionality then by all means do.

    Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

    Any questions just ask and remember this is just for fun

    Solutions to the quiz will be posted later in the 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: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
    test13: test 14: test 15: test 16: test 17:test18:
    Attached Images Attached Images
    Last edited by Paul O'B; Apr 5, 2009 at 11:31.

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

    awww dropdowns!!!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Have you solved it already

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    me posting something

    awww dropdowns!!!
    Don't be put off the fact that it's a dropdown as the technique is useful for many other things. Besides there is no other dropdown that works like this in the world.

  5. #5
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    no haven't even started
    i will do it though

    i have "some" ideas

  6. #6
    Non-Member
    Join Date
    Mar 2009
    Location
    Maryland, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The clicking part is what is giving me trouble...Its definately not CSS3 for IE6..and no javascript...

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes the clicking on the link is the important part and this is not a hover effect and neither is it an :active or :focus effect.

    There's no CSS3 and there's no javascript or any hacks of any kind.
    W3C CSS Validator results for file://localhost/TextArea (CSS level 2.1)

    Congratulations! No Error Found.

    This document validates as CSS level 2.1 !
    It's straight forward html/css but does need some lateral thought.

    The quiz is aimed at IE6 but the technique will work in all other browsers except Opera for some strange reason.

  8. #8
    Non-Member
    Join Date
    Mar 2009
    Location
    Maryland, USA
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gah Just saw the part of no CC's. That now makes me fail in ie6..clicking...

  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)
    Interesting quiz..
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    SitePoint Addict
    Join Date
    May 2006
    Location
    Amsterdam
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm ... I've got something but it's definitely not what I'd call ideal ... shall I post it here or via PM until the contest is over?

  11. #11
    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)
    You can PM paul but make sure it adheres the the rules-aka work in IE6 also.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

    Just had a very close entry from DanNL that very nearly fits the bill (visually at least) so well done

    You are on the right track with the method but no need to have duplicate content.

  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)
    No :active/:focus...? I can't do it..Let me look at other pseudo classes...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL I think I know how you did it.

    Now I just wonder why it wouldn't work in Opera...
    Simon Pieters

  15. #15
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ok now im officially stumped xD

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Ok here's a little clue but don't look if you want to work it out for yourselves.


    What method allows you to click an anchor and still stay on the same page but reach other content.

  17. #17
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i read the clue because i am completely out of ideas, and after reading the clue, im still stumped!! hahahaha, i really have no idea, maybe after a couple of hours of thinking ill think up something.

    edit:
    wait a minute, i think i know how to do this, but honestly, is it as complex and non-real life as i think it is???

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    but honestly, is it as complex and non-real life as i think it is???
    No the idea is the most basic html that you ever learned (probably in your first lesson about using anchors).

    The css is only needed to create the visual effect.

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahahah just got my prototype working (but only in firefox) its a very clean version
    very tricky business

    edit:
    just got it working in all browsers except opera xD

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well done Yurikolovsky you are on the right track as well and just need to tidy it up to look and behave like my original

  21. #21
    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)
    Uhh...what method...still stumped...target pseudo class...IE doesn't support....wtfack I don't get it at all lol. What method...................#.........stumped.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I have a correct solution from danNL - well done

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Uhh...what method...still stumped...target pseudo class...IE doesn't support....wtfack I don't get it at all lol. What method...................#.........stumped.
    Another clue:

    (Please don't read this if you want to solve it by yourself)


    <a href="#here">link</a>
    ...
    ...
    ...
    <li id="here">Somewhere else</li>


  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    im no reading any mor cluez, i already getting it to work

  25. #25
    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 figured that much Paul but I never done anything like that before :O
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •