SitePoint Sponsor

User Tag List

Results 1 to 25 of 71

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,546
    Mentioned
    183 Post(s)
    Tagged
    6 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


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
  •