SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 71
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)

    CSS - Test Your CSS Skills Number 17

    CSS - Test Your CSS Skills Number 17 : Quiz ended - solutions posted in post#61

    It's time to drop in, drop out and drop down.

    This weeks quizzes give you the chance to get to grips with the ubiquitous drop down menu and show us what you can do.

    There are again 2 quizzes this week and both are based on drop down menus.

    The first quiz (supplied by Erik J) is to create a drop down without using any absolute positioning at all!

    The second quiz (supplied by Eric Watson) is more straight forward but will still send you around in circles.

    QUIZ A - (Erik J)

    Take a look at the attachment called dropdown-no-abs.png to get a feel of what's required. There are also some browsershots of the layout so you can see various options. There is also an image attached which you must use for the round corners (dcade1274e.gif).

    This is more or less a normal drop down except that it uses no absolute positioning but still works in the same way and the drop downs overlaps following content without pushing it away.

    The top level menu items have no width and the submenu items will be as wide as the longest item in the submenu (see attachment for clarification).

    This needs to work in IE6, IE7 , FF2+ (and other modern browsers) and you are allowed to use the star-html-hack for IE6 and the drop down JS (supplied).

    General Rules.

    1) No absolute positioning -but the drop downs must have no effect on other content other than overlapping it.

    2) Both top level and submenu text are flexible in width and only as wide as the widest link. (check dropdown-no-abs.png)

    (The background of the submenu should be a solid color matched to the widest link of course.)

    3) Text is resizable but of course the round image is only resizable horizontally. The text should be perfectly centred vertically.

    4) No changes to the html or JS are required. Just add CSS.

    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>Untitled</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    /* enter your CSS here */
    </style>
    <!--[if lte IE 6]><script type="text/javascript">
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }    }    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script><![endif]-->
    </head><body>
    
    <div id="nav">
        <ul>
            <li style="font-size:50&#37;"><a href="#main">Text 50%</a>
                <ul>
                    <li><a href="#sub"><span>A Much Longer Link</span></a></li>
                    <li><a href="#sub"><span>A Longer Link</span></a></li>
                    <li><a href="#sub"><span>Short Link</span></a></li>
                    <li><a href="#sub"><span>Link</span></a></li>
                </ul>
            </li>
            <li style="font-size:70%"><a href="#main">Text 70%</a>
                <ul>
                    <li><a href="#sub"><span>A Much Longer Link</span></a></li>
                </ul>
            </li>
            <li style="font-size:100%"><a href="#main">Text 100%</a>
                <ul>
                    <li><a href="#sub"><span>A Longer Link</span></a></li>
                </ul>
            </li>
            <li style="font-size:140%"><a href="#main">Text 140%</a>
                <ul>
                    <li><a href="#sub"><span>Short Link</span></a></li>
                </ul>
            </li>
            <li style="font-size:200%"><a href="#main">Text 200%</a>
                <ul>
                    <li><a href="#sub"><span>Link</span></a></li>
                </ul>
            </li>
            <li style="font-size:270%"><a href="#main">Text 270%</a>
                <ul>
                    <li><a href="#sub"><span>Link</span></a></li>
                    <li><a href="#sub"><span>Short Link</span></a></li>
                    <li><a href="#sub"><span>A Longer Link</span></a></li>
                    <li><a href="#sub"><span>A Much Longer Link</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
    
    <p>This version does not use absolute positioning.</p>
    <p>In good browsers all of the displayed main and sub-links are actively linking in their whole widths.</p>
    
    </body></html>
    QUIZ B -(Eric Watson)

    This quiz is another drop down and if you look at the attachment dropround.png you will see a series of screenshots of what happens as each new menu is opened until finally the whole sequence is finished with a red message in the center.

    This quiz will test your ability on handling multiple nested lists and although it is quite straight forward you will still need to keep an eye on things.

    The little arrow effect in each corner is CSS and not an image and indicates where the next submenu will appear (see previous quizzes if you don't know how this arrow is created).

    This time instead of using the JS script for IE6 try using the csshover.htc file to allow IE6 to hover elements other than anchors.

    I dont think I need to explain any more than this (because some of you don't read it anyway ) but if you have questions then ask.

    I have only supplied the top level menu as a start but you can change the html to add all your nested lists as required. The html must remain valid of course and work in IE6 - 7 and other modern browsers.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> Drop Down</title>
    <style type="text/css">
    
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    body{behavior:url("csshover.htc");}
    </style>
    <![endif]-->
    </head>
    <body>
    <ul id="nav">
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">DIRECTIONS</a></li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
    </body>
    </html>
    If you have not tried a dropdown menu before then read the original suckerfish article to understand the concepts first.

    Solutions to both quizzes 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: 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
    test13:http://www.sitepoint.com/forums/showthread.php?t=598538
    test 14:http://www.sitepoint.com/forums/showthread.php?t=600332
    test 15:http://www.sitepoint.com/forums/showthread.php?t=601564
    test 16:http://www.sitepoint.com/forums/showthread.php?t=602808
    Attached Images Attached Images
    Last edited by Paul O'B; Mar 16, 2009 at 09:30.

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

    too bad both tricks use javascript.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    too bad both tricks use javascript
    Only for IE6 though

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quiz A is tricky! Off the top of my head, I don't see any way to do it? But I won't stop thinking (that's the problem!).

    For an added level of difficulty for Quiz B, you could try and make the containers (ul/li) height all fluid (in em). Going down is easy (that's how I originally had it), but coming up, and when you zoom in, it starts to get misaligned. I don't even know if that's possible (didn't even try)? But it would be cool if it was...

  5. #5
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ive never done drop down menus before...
    currently having trouble with the initial buttons

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    ive never done drop down menus before...
    currently having trouble with the initial buttons
    Neither had I (been avoiding them), until about 3 weeks ago.
    Last edited by PicnicTutorials; Mar 8, 2009 at 13:03.

  7. #7
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i don't understand how the javascript works in A.
    i see no effect in ie6.

    how does it enable the hover state for everything?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    i don't understand how the javascript works in A.
    i see no effect in ie6.
    You need to use the sfhover class that the JS adds to each list item on hover.

    For every instance where you style li:hover you would also need to duplicate it with li.sfhover.

    e.g.
    Code:
    #nav ul li:hover ul,
    #nav ul li.sfhover ul{
      /* styles to be activated on hover */
    }

  9. #9
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yay, now it works, thanks paul.

  10. #10
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    wait a minute, in quiz A are you allowed to use absolute positioning for internet explorer?

    here it says, this version does use absolute positioning?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    wait a minute, in quiz A are you allowed to use absolute positioning for internet explorer?

    here it says, this version does use absolute positioning?
    No don't use any absolute positioning. I left the example in the picture to show that the menu will act the same as an absolutely positioned menu.

    Originally, I was going to allow a normal absolute version for Quiz A but then I added Quiz B which allows you to do it the normal way anyway so it defeated the purpose to have more options on the first quiz.

  12. #12
    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)
    Quiz B, I can't get the hover on level three work in IE6. Works perfect in all other browsers.

    I have tried csshover.htc version 1.42 and 2 and 3 without getting passed second dropdown.

    Should I submit it as it is?
    Happy ADD/ADHD with Asperger's

  13. #13
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    im also having slight inconsistencies in both quizzes, i think ill move it to tomorrow.


  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Quiz B, I can't get the hover on level three work in IE6. Works perfect in all other browsers.

    I have tried csshover.htc version 1.42 and 2 and 3 without getting passed second dropdown.

    Should I submit it as it is?
    Funny, I ran across the same thing, on the 3rd drop, but in IE7. Fixed it though!

    Man this quiz A is tough (for me at least!). I've never done the single image swap thing before. Time for Google! "If" I ever figure that part out, then on to the no absolute drop that doesn't move anything below it. Not a clue? Yeah - tomorrow...

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by erik.j View Post
    Quiz B, I can't get the hover on level three work in IE6. Works perfect in all other browsers.

    I have tried csshover.htc version 1.42 and 2 and 3 without getting passed second dropdown.

    Should I submit it as it is?
    I have erics version working in IE6 using my local htc that was hanging around.

    Code:
    <attach event="ondocumentready" handler="parseStylesheets" />
    <script language="JScript">
    /**
     *    Pseudos - V1.30.050121 - hover & active
     *    ---------------------------------------------
     *    Peterned - http://www.xs4all.nl/~peterned/
     *    (c) 2005 - Peter Nederlof
     *
     *    Credits  - Arnoud Berendsen 
     *             - Martin Reurings
     *           - Robert Hanson
     *
     *    howto: body { behavior:url("csshover.htc"); }
     *    ---------------------------------------------
     */
    
    var currentSheet, doc = window.document, activators = {
        onhover:{on:'onmouseover', off:'onmouseout'},
        onactive:{on:'onmousedown', off:'onmouseup'}
    }
    
    function parseStylesheets() {
        var sheets = doc.styleSheets, l = sheets.length;
        for(var i=0; i<l; i++) 
            parseStylesheet(sheets[i]);
    }
        function parseStylesheet(sheet) {
            if(sheet.imports) {
                try {
                    var imports = sheet.imports, l = imports.length;
                    for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
                } catch(securityException){}
            }
    
            try {
                var rules = (currentSheet = sheet).rules, l = rules.length;
                for(var j=0; j<l; j++) parseCSSRule(rules[j]);
            } catch(securityException){}
        }
    
        function parseCSSRule(rule) {
            var select = rule.selectorText, style = rule.style.cssText;
            if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;
            
            var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
            var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
            var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];
            var affected = select.replace(/:hover.*$/, '');
            var elements = getElementsBySelect(affected);
    
            currentSheet.addRule(newSelect, style);
            for(var i=0; i<elements.length; i++)
                new HoverElement(elements[i], className, activators[pseudo]);
        }
    
    function HoverElement(node, className, events) {
        if(!node.hovers) node.hovers = {};
        if(node.hovers[className]) return;
        node.hovers[className] = true;
        node.attachEvent(events.on,
            function() { node.className += ' ' + className; });
        node.attachEvent(events.off,
            function() { node.className = 
                node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
    }
    
    function getElementsBySelect(rule) {
        var parts, nodes = [doc];
        parts = rule.split(' ');
        for(var i=0; i<parts.length; i++) {
            nodes = getSelectedNodes(parts[i], nodes);
        }    return nodes;
    }
        function getSelectedNodes(select, elements) {
            var result, node, nodes = [];
            var classname = (/\.([a-z0-9_-]+)/i).exec(select);
            var identify = (/\#([a-z0-9_-]+)/i).exec(select);
            var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
            for(var i=0; i<elements.length; i++) {
                result = tagName? elements[i].all.tags(tagName):elements[i].all; 
                for(var j=0; j<result.length; j++) {
                    node = result[j];
                    if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
                        classname[1] + '\\b').exec(node.className)))) continue;
                    nodes[nodes.length] = node;
                }
            }    return nodes;
        }
    </script>

  16. #16
    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)
    Wow I hate dropdowns :/. Ugh I guess I'll try quiz a right now...lemme post some on forums first...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    are we allowed to use expressions in quiz b for ie max width/height?

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    are we allowed to use expressions in quiz b for ie max width/height?
    Why would you need expressions?

    Or am I missing something?

    Quiz B uses fixed width and height elements to make everything match up but I think you must means something else

  19. #19
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    its just that if it was not for ie6 (as always), the whole B could be done with relative positioning as well.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Don't make it harder than it needs to be.

  21. #21
    SitePoint Enthusiast Apice Internet's Avatar
    Join Date
    Mar 2009
    Location
    Maringá - PR
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use a hack on ie6
    Ápice Internet - Web design Company. Website development (criação de sites) and SEO (otimização de site) services - Portuguese Language

  22. #22
    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)
    Hi Apice Internet welcome to Sitepoint

    The point of the quiz is to get this working with no hacks.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  23. #23
    SitePoint Enthusiast Apice Internet's Avatar
    Join Date
    Mar 2009
    Location
    Maringá - PR
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan! Thanks
    Ok, sorry for this incovenient..
    Ápice Internet - Web design Company. Website development (criação de sites) and SEO (otimização de site) services - Portuguese Language

  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i sent my attempt at B,
    it is my very first drop down menu, and i now remember why i avoided them for so long,
    they are very annoying when trying to select something!
    one level drop down menu is fine, but anything more is too much.

    so yeah, very hard quiz, my version is crappy, ill love to see the proper way of doing it (i just hope its not as messy as mine)

    now all i have to do, is quiz A, i just can't figure out how to get ie6 to not expand to the list's contents...

  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)
    So it is overflowing??? God I wish I could tell you haha.
    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
  •