SitePoint Sponsor

User Tag List

Page 3 of 3 FirstFirst 123
Results 51 to 71 of 71
  1. #51
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stomme poes View Post

    Um, I would like to post something I think Gary posted on another forum long ago, it's VERY interesting and I've been revisiting it here for Quiz A; it has nothing to do with dropdowns but rather inline elements and their multiple, crazy boxes. May I post a link? It's Dave's Inline Box Model. I don't think it would quite count as a "hint" at all, yet so far I've used it for some stuff in the menu.

    It's valuable just in itself, if a little old. I'm glad I bookmarked it.
    Yes feel free to post a link to it.

  2. #52
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    David's Inline Box Model

    Written back when the specs of 2 were still in flux. A few things may no longer be true. The diagrams, however, show a lot. I've seen similar on more modern Brunildo pages.


    ...and I crashed and burned on Quiz A with just the top-level (didn't even get to the subs)... can't get IE or old Mozilla to work with me. Looks like I need a completely different technique.

  3. #53
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stomme poes View Post

    ...and I crashed and burned on Quiz A with just the top-level (didn't even get to the subs)... can't get IE or old Mozilla to work with me. Looks like I need a completely different technique.

    Here's a little clue FOR ONE METHOD so don't look if you don't want to spoil it.

    You can be more than a little negative and you will almost absolutely float your boat

  4. #54
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    thanks, I had started out in more of a Suckerfish setup but got hung up on the text itself... maybe I'll ignore it and do the dropdowns first and deal with alignment stuff last...

  5. #55
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B
    Here's a little clue FOR ONE METHOD so don't look if you don't want to spoil it.
    ill have a look as i already solved it my way (without use of clues)...
    [after a quick look]
    I KNEW IT, there was a million clues about that, but i had no idea on how to implement them, so i didn't.


    @Stomme poes
    i can't multi task at all, even eating and watching tv at once is hard.


    edit:
    oh my god, this is amazing, i just got it to work (without the styling), exactly like in erik's picture, i think i was supposed to solve it this way xD

    edit2:
    just found out what the * html hack is for in this quiz, not what i initially thought...

    edit3:
    HA!
    i finnaly figured out your way of doing it!

    edit4:
    i sent my 2nd solution to quiz 17A.
    yay 2 solutions.

    edit5:
    Congrats to erik.j and EricWatson for comming up with these quizzes.
    good job guys!
    was fun for me


    things that i noticed about them:

    both are harder than they look.

    quiz A, required a lot more thought initially, was a nightmare to figure out on my first solution, but after figuring out the trick involved, everything is pretty straightforward, but only with the help of another trick obviously
    (the hardest quiz i tried so far, until i found the trick)

    quiz B, had a ton of ie, ff inconsistencies that made life difficult, is very entertaining visually, is very annoying when using the menu itself, and the final "tada" was a nightmare to create!

    both are very satisfying to complete.


    i think this is good enough for my first try on css drop down menus, now that i conquered them, i can avoid them with dignity .
    Last edited by YuriKolovsky; Mar 11, 2009 at 18:42.

  6. #56
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Well done Yurikolovsky and thanks for your second entry which works well and glad that it all made sense in the end.

    You can learn a lot finding out all the bugs when doing these quizzes because we are always pushing the limits and exposing the problems. In the end what you have learned will make it so much easier to get browsers to do what you want.

    Normal dropdown menus should hold no surprises for you from now on

  7. #57
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    its amazing that i did it the first time without resorting to the necessary css.
    Paul O'B
    You can learn a lot finding out all the bugs when doing these quizzes because we are always pushing the limits and exposing the problems. In the end what you have learned will make it so much easier to get browsers to do what you want.

    Normal dropdown menus should hold no surprises for you from now on
    definitely


    @all who is trying, these quizzes both contain very valuable css arsenal.

    p.s. its amazing how you see pauls name on 50% of the css articles out there.

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I have an entry from iggyflo for quiz A so well done (It still needs a bit of work but well done anyway)

  9. #59
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Received revised entry from iggyflo which is getting closer to the answer

  10. #60
    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)
    Interesting... dropdowns... may have time if I finish this huge project this weekend ;p
    Cross browser css bugs

    Dan Schulz you will be missed

  11. #61
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Thanks for the link, it's amazing how complex something so seemingly simple on the surface can be. Learned quite a bit about line-height there.

  12. #62
    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)
    This quiz is dead...early answer posting?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #63
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    everyone was just working/relaxing on the weekend, haven't you noticed, the quizzes have always been very calm on weekends.

  14. #64
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I'll post the answers later today and post a new fun quiz tomorrow.

  15. #65
    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)
    Yay I'm off work all this week (gay though too..) I can work on it!!
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #66
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Solution Time.

    Thanks Erik J and Eric Watson for supplying these tough 2 quizzes and thanks to everyone who took part or commented or watched behind the scenes

    As the correct entries were limited in number the winners were easy to choose. The winner to Quiz A is Yurikolovsky and the Winner to Quiz B is Eric J. Well done to both and to all those that tried but failed

    Quiz A:
    Erik J original solution (
    which is commented in detail so that you can understand how it works).
    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">
    #nav{
        padding:5px 0 0 0;
        height:35px;                     /* container holding the main list background */
        background:#9cf;
    }
    #nav ul{
        position:relative;
        margin:0 0 -145px;               /* negative margin to stop the height extending the container */
        padding:0 0 0 5px;
        height:175px;                    /* "overflowing" height to allow the sublists */
        overflow:hidden;                 /* hide the main links on hover upwards overflowing background */
    }
    #nav ul li{                        /* this rule is also setting the sub link items */
        float:left;
        margin:0 20px 0 0;
        padding:0 0 0 15px;
        background:url(dcade1274e.gif) no-repeat 0 0;      /* gif with a transparent background and the two 240x30px states stacked */
        list-style:none;
    }
    * html #nav ul li{
        overflow:hidden;                 /* Ad hoc-fix to avoid IE6 showing the li background below the biggest main item. The sublist is RP so it will still be visible :-) */
    }
    #nav>ul>li>a:before{               /* good browsers, make the displayed main links whole area clickable */
        float:left;
        margin:-1em 0 0 -15px;
        padding:30px 0 1em 15px;
        content:" ";
    }
    #nav ul a{
        position:relative;               /* IE, render the negative margin area, also sublinks */
        float:left;
        margin:-.6em -15px 0 0;          /* pull the link up to vertically center the text and move the right end where no li background shows */
        padding:15px 15px .6em 0;        /* top padding sets the vertical center, extend the right end and the bottom to show the background */
        height:15px;
        background:url(dcade1274e.gif) no-repeat 100% .6em;      /* compensate top position for the pulled up top edge */
        color:black;
        line-height:1.2;                 /* set line-height to correspond with the half of line-height negative margin and bottom padding */
        white-space:nowrap;
        text-decoration:none;
    }
    * html #nav ul a{                  /* IE6 can't use the the default rule above because the links font-size grows the link height */
        margin:0 -15px 0 0;
        padding:0 15px 0 0;
        height:30px;
        background-position:100% 0;
        line-height:30px;                /* IE center text vertically by a fix line-height without shrinking/growing by user font-size changing */
    }
    #nav ul ul{                        /* IE6, the negative bottom margin applied before prevents the floated sublist from expanding its parent li */
        display:inline;                  /* IE6 fix, the double floated margin bug */
        clear:left;
        float:left;
        margin-left:-30000px;            /* hide the floated sub lists, Opera's safe limit is a total of -32000px */
        margin-right:-2000px;            /* stop the width interfering with next main item */
        padding:0 0 5px 5px;
        height:auto;
        background:#9cf;
    }
    #nav ul li:hover ul,
    #nav ul li.sfhover ul{
        margin-left:-20px;               /* move the sublist to its display position */
    }
    #nav ul li li{
        display:inline;                  /* IE6 fix, the double floated margin bug. Rarely happens; though floated left it here affects the right margin */
        clear:left;                      /* stack the floated sub items */
        margin:5px 20px 0 0;
        padding:0 0 0 15px;
        height:30px;
    }
    #nav ul li li a,
    #nav ul li:hover li a,
    #nav ul li.sfhover li a{
        margin:0 -15px 0 0;
        padding:15px 15px 0 0;
        height:15px;
        background-position:100% 0;      /* show the default state of the sub links */
    }
    #nav ul li li span{
        display:block;
        position:relative;               /* IE, render the negative margin area (IE6 does not) */
        margin:-.5em 0 0 -15px;          /* extend the left end of the sub links */
        padding:0 0 10px 15px;           /* add bottom space to the small text-sizes */
        background:url("");              /* all browsers, make the span space clickable (IE6 does not) */
        line-height:1;
    }
    #nav ul li:hover,
    #nav ul li.sfhover{
        background-position:0 100%;      /* li hover state */
    }
    #nav ul li:hover a,
    #nav ul ul li:hover a{
        background-position:100% 100%;   /* link hover state on li hover */
    }
    #nav ul li a:hover,
    #nav ul li:hover a:hover{
        color:white;                     /* link hover state only when the link is hovered */
    }
    #nav ul li.sfhover a,
    #nav ul ul li.sfhover a,
    #nav ul li.sfhover a:hover{
        overflow:hidden;
        background-position:100% -30px;  /* IE6, link hover state referring to top edge because the bottom grows with the font-size */
    }
    </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%"><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>
    Yurikolovsky's answer:
    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>YuriKolovsky CSS Quiz 17A</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    ul {
        list-style-type:none;
    }
    ul li a {
        float:left;
    }
    ul li {
        float:left;
    }
    ul {
        background-color:#99ccff;
        height:36px;
    }
    ul ul {
        height:auto;
        padding-bottom:4px;
    }
    li {
        width:4.4em;
    }
    * html li {
        overflow:hidden;
    }
    a {
        position:relative;
        white-space:nowrap;
        text-decoration:none;
        color:#000;
        text-align:center;
    }
    li {
        margin:2px 4px 2px 0;
        height:30px;
        z-index:1;
    }
    li li {
        margin:4px 4px 0px 0;
    }
    li a {
        height:30px;
        line-height: 30px;
    }
    li li a {
        width:auto;
        overflow:auto;
        line-height:normal;
        height:auto;
        height:30px;
        position:relative;
    }
    li li a span {
        line-height:30px;
        position:relative;
        display:block;
        overflow:visible;
    }
    ul ul {
        display:inline-block;
        position:relative;
        overflow:visible;
        width:auto;
    }
    ul ul li {
        overflow:visible;
        float:left;
    }
    ul ul a {
        position:relative;
        overflow:visible;
    }
    ul ul li {
        clear:both;
        width:auto;
    }
    li {
        border-left:4px solid #99ccff;
    }
    li ul {
        margin-left:-4px;
    }
    ul li {
        background:url(dcade1274e.gif) no-repeat top left #99ccff;
        padding-right:27px;
        cursor:pointer;
    }
    ul li a {
        background:url(dcade1274e.gif) no-repeat top right #99ccff;
        padding-right:15px;
        margin-left:16px;
    }
    ul li:hover, ul li.sfhover {
        background:url(dcade1274e.gif) no-repeat bottom left #99ccff;
    }
    ul li:hover a, ul li.sfhover a {
        background:url(dcade1274e.gif) no-repeat bottom right #99ccff;
    }
    * html ul li:hover, * html ul li.sfhover {
        background:url(dcade1274e.gif) repeat 0 30px #99ccff;
    }
    ul li:hover li a, ul li.sfhover li a {
        background:url(dcade1274e.gif) no-repeat top right #99ccff;
    }
    ul li:hover li:hover a, ul li.sfhover li.sfhover a {
        background:url(dcade1274e.gif) no-repeat bottom right #99ccff;
    }
    ul li li {
        padding:0;
    }
    ul li li a span {
        padding:0;
        background-color:#c9f1fc;
    }
    ul li li:hover a span, ul li li.sfhover a span {
        background-color:#3399cc;
    }
    a:hover {
        color:#fff;
    }
    ul li li {
        display:none;
    }
    ul li:hover li, ul li.sfhover li {
        display:block;
    }
    p {
        clear:both;
        margin-top:10px;
    }
    /*below is for ie7 fake fix*/
    ul ul {
        width:8.3em;
        padding-right:40px;
        padding-left:0;
        padding-bottom:4px;
    }
    * html ul ul {
        width:auto;
        padding-right:0;
    }
    ul:only-child ul {
        width:auto;
        overflow:hidden;
        padding-right:0;
    }
    ul:nth-child(1) ul {
     overflow:visible;
    }
    ul:nth-child(1) li {
     padding-right:26px;
    }
    ul:nth-child(1) li li {
     padding-right:0;
    }
    /*above is for ie7 fake fix*/
    </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%"><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>
    Yurikolovsky Quiz A - 2nd try
    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>YuriKolovsky - CSS QUIZ #17A - method 2</title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <style type="text/css">
    /*predef vars*/
    * {
      margin:0;
      padding:0;
    }
    a {
      color:#000;
      text-decoration:none;
    }
    /*positioning*/
    #nav {
      height:40px;
    }
    ul {
      list-style-type:none;    
      float:left;
      position:relative;
      margin-left:-101%;
      width:100%;
      left:101%;
      padding-left:3px;
    }
    ul li {
      float:left;
      margin:5px 2px 0 2px;
      height:30px;
    }
    ul li li {
      float:left;    /*remove later*/
    }
    ul li a {
      line-height:30px;
      position:relative;
      display:block;
    }
    ul li ul {
      position:relative;
      float:left;
      margin-left:-2000px;/*has to be much larger than the contents at all times*/
      left:1995px;         /*or the overlapping will show itself*/
      padding-left:2px;
      padding-right:2px;
      width:auto;
      overflow:hidden;
      padding-bottom:5px;
    }
    ul li ul li {
      float:left;
      clear:both;
      border:0;
      height:30px;
      line-height:30px;
    }
    
    /*coloring*/
    #nav, ul li ul {
      background-color:#99ccff;    
    }
    
    
    ul li:hover, ul li.sfhover {
      background:url(dcade1274e.gif) no-repeat bottom right #99ccff;
    }
    ul li:hover a, ul li.sfhover a {
      background:url(dcade1274e.gif) no-repeat bottom left #99ccff;
    }
    ul li {
      background:url(dcade1274e.gif) no-repeat top right #99ccff;
      cursor:pointer;
    }
    ul li a {
      background:url(dcade1274e.gif) no-repeat top left #99ccff;
      padding-left:15px;
      margin-right:15px;
    }
    ul li:hover li a, ul li.sfhover li a {
      background:url(dcade1274e.gif) no-repeat top left #99ccff;
    }
    ul li:hover li:hover a, ul li.sfhover li.sfhover a {
      background:url(dcade1274e.gif) no-repeat bottom left #99ccff;
    }
    ul li li a span {
      background-color:#c9f1fc;/*middle image visibility hider*/
    }
    ul li li:hover a span, ul li li.sfhover a span {
      background-color:#3399cc;
    }
    a:hover {
      color:#fff;    
    }
    
    /*hover thing*/
    ul li ul li {
      display:none;
    }
    ul li:hover ul li, ul li.sfhover ul li {
      display:block;
    }
    
    /*ie porprietary bug fixes*/
    /*below fixes the ie6, ie7 text-top dissapearing bug (white space bug)*/
    ul li a {
      float:left;
    }
    ul li ul {
      clear:left;    
    }
    ul li a {
      display:inline;
    }
    li li a span {
      display:block;
      position:relative;
    }
    /*ie6 double margin bug fix*/
    li ul {
      display:inline;
    }
    /*word wrap fix*/
    a span {
      white-space:nowrap;
    }
    /*more ie6 bug fixes*/
    * html #nav {
      /*easy ie6 height fix i discovered*/
      /*dont apply a positon to the parent, and do apply a position:relative; to the child, then add these overflow rules to the parent*/
      /*makes ie6 use proper height*/
      overflow:auto;
      overflow-y:hidden;
    }
    * html ul li {
      overflow:auto;
      overflow-y:hidden;
    }
    /*right edge dissapearing in ie6 bug fix*/
    * html ul li:hover, * html ul li.sfhover {
      background:url(dcade1274e.gif) repeat right 30px #99ccff;
    }
    </style>
    <!--[if lte IE 6]><script type="text/javascript">
    //ie6 hover function fix
    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%"><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>
    Answers to quiz B in next post.


  17. #67
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Answers to Quiz B:

    Eric Watson's original:
    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>{ visibility: inherit; } Drop Down</title>
    <style type="text/css">
    <!--
    * {
    margin:0;
    padding:0;
    }
    body {
    font-size:100%;
    background:#ccc;
    }
    #nav {
    list-style:none;
    background:#999;
    height:32px;
    border:1px solid #000;
    width:965px;
    margin:0 auto;
    }
    #nav li {
    position:relative;
    float:left;
    width:192px;
    background:#999;
    text-align:center;
    border-right:1px solid #000;
    }
    #nav li.last {
    border-right:0;
    }
    #nav li:hover {
    background:#777;
    min-height:0;
    cursor:pointer;
    }
    #nav a {
    display:block;
    color:#000;
    font-weight:bold;
    text-decoration:none;
    line-height:32px;
    height:32px;
    }
    #nav .br {
    position:absolute;
    bottom:-1px;right:0;
    border-left:12px dashed transparent;
    border-bottom:12px solid #000;
    }
    #nav .bl {
    position:absolute;
    bottom:-1px;left:0;
    border-right:12px dashed transparent;
    border-bottom:12px solid #000;
    }
    #nav .tl {
    position:absolute;
    top:0;left:0;
    border-right:12px dashed transparent;
    border-top:12px solid #000;
    }
    #nav .tr {
    position:absolute;
    top:0;right:0;
    border-left:12px dashed transparent;
    border-top:12px solid #000;
    }
    /* ------------ Drop Down ----------- */
    #nav ul {
    position:absolute;
    left:-999em;top:32px;
    list-style:none;
    border-top:1px solid #000;
    }
    #nav ul li {
    border:1px solid #000;
    border-top:0;
    }
    #nav li:hover ul {
    left:-1px;
    top:auto;
    }
    /* 2nd & 3rd Level Drop */
    #nav li:hover ul ul, #nav li:hover ul ul ul {
    left:-999em;
    }
    #nav ul li:hover ul, #nav ul ul li:hover ul {
    left:192px;
    top:-1px;
    }
    /* 4th & 5th Level Drop */
    #nav li:hover ul ul ul ul, #nav li:hover ul ul ul ul ul {
    left:-999em;
    }
    #nav ul ul ul li:hover ul, #nav ul ul ul ul li:hover ul {
    left:-194px;
    top:-1px;
    }
    /* 6th & 7th Level Drop */
    #nav li:hover ul ul ul ul ul ul, #nav li:hover ul ul ul ul ul ul ul {
    left:-999em;
    }
    #nav ul ul ul ul ul li:hover ul, #nav ul ul ul ul ul ul li:hover ul {
    left:-194px;
    top:-133px;
    width:194px;
    }
    /* 8th level Drop */
    #nav li:hover ul ul ul ul ul ul ul ul {
    left:-999em;
    }
    #nav ul ul ul ul ul ul ul li:hover ul {
    left:192px;
    top:-133px;
    }
    /* 9th level Drop */
    #nav li:hover ul ul ul ul ul ul ul ul ul {
    left:-999em;
    }
    #nav ul ul ul ul ul ul ul ul li:hover ul {
    left:193px;
    top:-34px;
    }
    #nav ul ul ul ul ul ul ul ul li:hover ul li {
    background:red;
    border-color:red;
    width:190px;
    font-size:140%;
    }
    #last {
    margin:-1px 0 0;
    }
    #left {
    position:absolute;
    left:-194px;top:0;
    height:32px;
    width:194px;
    background:red;
    }
    #right {
    position:absolute;
    left:190px;top:0;
    height:32px;
    width:194px;
    background:red;
    }
    -->
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    body{behavior:url("../code/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<b class="br"></b></a>
        <ul>
          <li><a href="#">GENERAL</a></li>
          <li><a href="#">BOOKS</a></li>
          <li><a href="#">FINE ART<b class="br"></b></a>
            <ul>
              <li><a href="#">PURCHASE</a></li>
              <li><a href="#">EDITOR</a></li>
              <li><a href="#">REVISION</a></li>
              <li><a href="#">AGENTS<b class="br"></b></a>
                <ul>
                  <li><a href="#">PLACES</a></li>
                  <li><a href="#">ORDER</a></li>
                  <li><a href="#">LOCATION</a></li>
                  <li><a href="#">MAPS<b class="bl"></b></a>
                    <ul>
                      <li><a href="#">PLACES</a></li>
                      <li><a href="#">ORDER</a></li>
                      <li><a href="#">LOCATION<b class="bl"></b></a>
                        <ul>
                          <li><a href="#">PLACES</a></li>
                          <li><a href="#">ORDER</a></li>
                          <li><a href="#">LOCATION<b class="tl"></b></a>
                            <ul>
                              <li><a href="#">PLACES</a></li>
                              <li><a href="#">ORDER<b class="tl"></b></a>
                                <ul>
                                  <li><a href="#">PLACES</a></li>
                                  <li><a href="#">ORDER<b class="tr"></b></a>
                                    <ul>
                                      <li><a href="#">PLACES</a></li>
                                      <li><a href="#">ORDER</a></li>
                                      <li><a href="#">LOCATION</a></li>
                                      <li><a href="#">MAPS</a></li>
                                      <li><a href="#">STORIES<b class="br"></b></a>
                                        <ul>
                                          <li><a href="#"></a></li>
                                          <li><a href="#"></a></li>
                                          <li><span id="left"></span><a href="#">TA-DA!</a><span id="right"></span></li>
                                          <li><a href="#"></a></li>
                                          <li id="last"><a href="#"></a></li>
                                        </ul>
                                      </li>
                                    </ul>
                                  </li>
                                  <li><a href="#">LOCATION</a></li>
                                  <li><a href="#">MAPS</a></li>
                                  <li><a href="#">STORIES</a></li>
                                </ul>
                              </li>
                              <li><a href="#">LOCATION</a></li>
                              <li><a href="#">MAPS</a></li>
                              <li><a href="#">STORIES</a></li>
                            </ul>
                          </li>
                          <li><a href="#">MAPS</a></li>
                          <li><a href="#">STORIES</a></li>
                        </ul>
                      </li>
                      <li><a href="#">MAPS</a></li>
                      <li><a href="#">STORIES</a></li>
                    </ul>
                  </li>
                  <li><a href="#">STORIES</a></li>
                </ul>
              </li>
              <li><a href="#">TIMES</a></li>
            </ul>
          </li>
          <li><a href="#">READING</a></li>
          <li><a href="#">WRITING</a></li>
        </ul>
      </li>
      <li><a href="#">SUPPORT</a></li>
      <li class="last"><a href="#">CONTACT</a></li>
    </ul>
    </body>
    </html>
    Erik J's solution:
    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"> 
    
    #nav{
        position:relative;
        float:left;
        margin:0;
        padding:0;
        height:25px;
        background:#ccc;
        font-size:82%;
    }
    #nav a{
        position:relative;
        float:left;
        border:1px solid #000;
        margin:-1px -1px 0 0;
        padding-top:4px;
        width:149px;
        height:19px;
        color:#000;
        text-align:center;
        text-decoration:none;
    }
    #nav li li a{
        display:block;
        float:none;
    }
    #nav li{
        position:relative;
        float:left;
        list-style:none;
    }
    #nav li li{
        clear:left;
    }
    #nav li:hover{
        background:#aaa;
    }
    #nav li:hover ul ul,
    #nav li li:hover ul ul,
    #nav li li li:hover ul ul,
    #nav li li li li:hover ul ul,
    #nav li li li li li:hover ul ul,
    #nav li li li li li li:hover ul ul,
    #nav li li li li li li li:hover ul ul,
    #nav li li li li li li li li:hover ul ul,
    #nav li li li li li li li li li:hover ul ul{
        margin-left:-999px;
    }
    #nav li:hover ul,
    #nav li li:hover ul,
    #nav li li li:hover ul,
    #nav li li li li:hover ul,
    #nav li li li li li:hover ul,
    #nav li li li li li li:hover ul,
    #nav li li li li li li li:hover ul,
    #nav li li li li li li li li:hover ul,
    #nav li li li li li li li li li:hover ul,
    #nav li li li li li li li li li li:hover ul{
        margin-left:0;
    }
    #nav ul{
        position:absolute;
        top:100%;
        left:0;
        margin-left:-999px;
        padding:0;
        width:150px;
        background:#ccc;
    }
    #nav ul ul,
    #nav ul ul ul{
        top:0;
        left:100%;
    }
    #nav ul ul ul ul{
        top:0;
        left:-100%;
    }
    #nav ul ul ul ul ul ul{
        top:auto;
        bottom:0;
        left:-100%;
    }
    #nav ul ul ul ul ul ul ul{
        left:-100%;
    }
    #nav ul ul ul ul ul ul ul ul{
        left:100%;
    }
    #nav ul ul ul ul ul ul ul ul ul{
        z-index:-1;
        top:-100%;
        bottom:auto;
        left:151px;
        width:149px;
        height:119px;
        background:#f33;
    }
    #nav ul ul ul ul ul ul ul ul ul li{
        display:inline;
        margin:48px -150px 0;
        background:#f33;
    }
    #nav ul ul ul ul ul ul ul ul ul li:hover{
        background:#f99;
    }
    #nav ul ul ul ul ul ul ul ul ul a{
        border:0;
        width:450px;
        height:20px;
    }
    .arrowdr{
        position:absolute;
        right:-1px;
        bottom:-1px;
        border:solid;
        border-width: 0 0 13px 13px;
        border-left-color:transparent;
        border-left-style:dotted;
        font-size:0;
    }
    .arrowdl{
        position:absolute;
        left:-1px;
        bottom:-1px;
        border:solid;
        border-width: 0 13px 13px 0;
        border-right-color:transparent;
        border-right-style:dotted;
        font-size:0;
    }
    .arrowul{
        position:absolute;
        top:-1px;
        left:-1px;
        border:solid;
        border-width: 13px 13px 0 0;
        border-right-color:transparent;
        border-right-style:dotted;
        font-size:0;
    }
    .arrowur{
        position:absolute;
        top:-1px;
        right:-1px;
        border:solid;
        border-width: 13px 0 0 13px;
        border-left-color:transparent;
        border-left-style:dotted;
        font-size:0;
    }
    </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="#"><span class="arrowdr"></span>DIRECTIONS</a>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#"><span class="arrowdr"></span>DIRECTIONS</a>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">DIRECTIONS</a></li>
                        <li><a href="#"><span class="arrowdr"></span>SUPPORT</a>
                            <ul>
                                <li><a href="#">HOME</a></li>
                                <li><a href="#">ABOUT</a></li>
                                <li><a href="#">DIRECTIONS</a></li>
                                <li><a href="#"><span class="arrowdl"></span>SUPPORT</a>
                                    <ul>
                                        <li><a href="#">HOME</a></li>
                                        <li><a href="#">ABOUT</a></li>
                                        <li><a href="#"><span class="arrowdl"></span>DIRECTIONS</a>
                                            <ul>
                                                <li><a href="#">HOME</a></li>
                                                <li><a href="#">ABOUT</a></li>
                                                <li><a href="#"><span class="arrowul"></span>DIRECTIONS</a>
                                                    <ul>
                                                        <li><a href="#">HOME</a></li>
                                                        <li><a href="#"><span class="arrowul"></span>ABOUT</a>
                                                            <ul>
                                                                <li><a href="#">HOME</a></li>
                                                                <li><a href="#"><span class="arrowur"></span>ABOUT</a>
                                                                    <ul>
                                                                        <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="#"><span class="arrowdr"></span>CONTACT</a>
                                                                            <ul>
                                                                                <li><a href="#">TA-DA!</a></li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li><a href="#">DIRECTIONS</a></li>
                                                                <li><a href="#">SUPPORT</a></li>
                                                                <li><a href="#">CONTACT</a></li>
                                                            </ul>
                                                        </li>
                                                        <li><a href="#">DIRECTIONS</a></li>
                                                        <li><a href="#">SUPPORT</a></li>
                                                        <li><a href="#">CONTACT</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#">SUPPORT</a></li>
                                                <li><a href="#">CONTACT</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#">SUPPORT</a></li>
                                        <li><a href="#">CONTACT</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">CONTACT</a></li>
                            </ul>
                        </li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </li>
                <li><a href="#">SUPPORT</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </li>
        <li><a href="#">SUPPORT</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
    
    </body></html>
    Yurikolovsky's solution:
    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">
    * {
      padding:0;
      margin:0;
    }
    #nav {
      height:25px;
      margin-left:1px;
      position:relative;
    }
    ul {
      list-style-type:none;
      text-align:center;
      height:27px;
      position:relative;
    }
    li {
      width:151px;
      height:25px;
      float:left;
      background-color:#ddd;
      border:solid #555 1px;
      width:150px;
      margin-left:-1px;
    }
    li a {
      color:#000;
      text-decoration:none;
      line-height:25px;
      display:block;
      margin-bottom:1px;
      overflow:visible;
      z-index:11;
      
    /*adjustments for the red thing*/
      position:absolute;
      width:150px;
      left:0;
      top:0;
      height:25px;
    /*/adjustments for the red thing*/
    }
    li li {
      margin-top:-1px;
      margin-left:-1px;
      width:150px;
    }
    /*hover thing*/
    li:hover {
      background-color:#999;
    }
    /*mini arrow*/
    b, i {
      border-right:10px solid black;
      border-top:10px dashed transparent;
      border-bottom:0;
      border-left:0;
      height:0;
      width:0;
      overflow:hidden;
      display:block;
      bottom:0;
      right:0;
      position:absolute;
      z-index:11;
    }
    i {
      bottom:0;
      left:0;
      border-right:0;
      border-top:10px dashed transparent;
      border-bottom:0;
      border-left:10px solid black;
    }
    /*ul's variations*/
    ul li {
      position:relative;
      z-index:10;
    }
    ul ul {
      position:absolute;
      top:0;
      left:0;
    }
    ul ul ul {
      left:151px;
      top:0;
    }
    ul ul ul li {
      top:0;
    }
    ul ul ul ul ul {
      right:150px;
      left:auto;
    }
    ul ul ul ul ul ul i, 
    ul ul ul ul ul ul b {
      top:0;
      border-top:0;
      border-bottom:10px dashed transparent;
    }
    ul ul ul ul ul ul ul ul ul b {
      top:auto;
      bottom:0;
      border-top:10px dashed transparent;
      border-bottom:0;
    }
    ul ul ul ul ul ul ul {
      top:auto;
      bottom:-1px;
      height:130px;
    }
    ul ul ul ul ul ul ul ul ul {
      right:auto;
      left:151px;
    }
    /*tada*/
    .tada {
      background-color:red;
      width:150px;
      top:-60px;
      bottom:auto;
      height:200px;
      z-index:1;
    }
    .tada li {
      background-color:red;
      padding:0;
      margin-top:0;
      border:0;
      margin-top:86px;
      margin-left:-151px;
      width:452px;
    }
    /*ie6 misbehaviour fix*/
    .blank {
      background:0;    
    }
    /*tada thing overflow fix*/
    .main {
     z-index:5;    
    }
    .main ul {
     z-index:2;
    }
    /*hovers, lots and lots of hovers...*/
    li ul, 
    li:hover li ul, 
    li:hover li:hover li ul, 
    li:hover li:hover li:hover li ul, 
    li:hover li:hover li:hover li:hover li ul,
    li:hover li:hover li:hover li:hover li:hover li ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li:hover li ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li:hover li:hover li ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li:hover li:hover li:hover li ul
    {
      display:none;    
    }
    
    li:hover ul, 
    li:hover li:hover ul, 
    li:hover li:hover li:hover ul, 
    li:hover li:hover li:hover li:hover ul,
    li:hover li:hover li:hover li:hover li:hover ul,
    li:hover li:hover li:hover li:hover li:hover li:hover ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li:hover ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li:hover li:hover ul,
    li:hover li:hover li:hover li:hover li:hover li:hover li:hover li:hover li:hover ul
    {
      display:block;        
    }
    
    </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 class="main"><a class="top" href="#">DIRECTIONS</a><b></b>
          
          <ul>
            <li class="blank"><a href="#">&nbsp;</a></li>
            <li><a href="#">GENERAL</a></li>
            <li><a href="#">BOOKS</a></li>
            <li class="main"><a href="#">FINE ART</a><b></b>
            
                <ul>
                    <li><a href="#">PURCHASE</a></li>
                    <li><a href="#">EDITOR</a></li>
                    <li><a href="#">REVISION</a></li>
                    <li class="main"><a href="#">AGENTS</a><b></b>
                    
                        <ul>
                            <li><a href="#">PLACES</a></li>
                            <li><a href="#">ORDER</a></li>
                            <li><a href="#">LOCATION</a></li>
                            <li class="main"><a href="#">MAPS</a><i></i>
                            
                                <ul>
                                    <li><a href="#">PLACES</a></li>
                                    <li><a href="#">ORDER</a></li>
                                    <li class="main"><a href="#">LOCATION</a><i></i>
                                    
                                        <ul>
                                            <li><a href="#">PLACES</a></li>
                                            <li><a href="#">ORDER</a></li>
                                            <li class="main"><a href="#">LOCATION</a><i></i>
                                            
                                                <ul>
                                                    <li><a href="#">PLACES</a></li>
                                                    <li class="main"><a href="#">ORDER</a><i></i>
                                                    
                                                        <ul>
                                                            <li><a href="#">PLACES</a></li>
                                                            <li class="main"><a href="#">ORDER</a><b></b>
                                                            
                                                                <ul>
                                                                    <li><a href="#">PLACES</a></li>
                                                                    <li><a href="#">ORDER</a></li>
                                                                    <li><a href="#">LOCATION</a></li>
                                                                    <li><a href="#">MAPS</a></li>
                                                                    <li class="main"><a href="#">STORIES</a><b></b>
                                                                    
                                                                        <ul class="tada">
                                                                            <li>UH! OH!</li>
                                                                        </ul>
                                                                    
                                                                    </li>
                                                                </ul>
                                                            
                                                            </li>
                                                            <li><a href="#">LOCATION</a></li>
                                                            <li><a href="#">MAPS</a></li>
                                                            <li><a href="#">STORIES</a></li>
                                                        </ul>
                                                    
                                                    </li>
                                                    <li><a href="#">LOCATION</a></li>
                                                    <li><a href="#">MAPS</a></li>
                                                    <li><a href="#">STORIES</a></li>
                                                </ul>
                                            
                                            </li>
                                            <li><a href="#">MAPS</a></li>
                                            <li><a href="#">STORIES</a></li>
                                        </ul>
                                    
                                    </li>
                                    <li><a href="#">MAPS</a></li>
                                    <li><a href="#">STORIES</a></li>
                                </ul>
                            
                            </li>
                            <li><a href="#">STORIES</a></li>
                        </ul>
                    
                    </li>
                    <li><a href="#">TIMES</a></li>
                </ul>
            </li>
            
            <li><a href="#">READING</a></li>
            <li><a href="#">WRITING</a></li>
        </ul>
          
      </li>
      <li><a href="#">SUPPORT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
    </body>
    </html>
    Well done to all who entered and look out for 2 more fun quizzes following shortly.


  18. #68
    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)
    Mind posting this quiz later today? I think all of us have had our rest over the past few days.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #69
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Mind posting this quiz later today? I think all of us have had our rest over the past few days.
    i got very little rest... xD

    you might have skipped this one, but i haven't, so for me these quizzes are appearing non stop.



    oh my, i know the next one aint gonna be easy.

  20. #70
    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 finished the quiz a long time ago so if you have gotten no rest it isn't because of teh quiz .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #71
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    New quiz posted.

    (No rush just take your time - I can always let them run longer if there is interest.)


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
  •