SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 79
  1. #51
    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
    In my example tabbing causes the links to rise up from the bottom which is a little strange but still usable. Much better than a JS version where nothing would happen at all when you tabbed (like in the suckerfish menus).
    exactly the same thing happens with mine, and i just thought that if i rearrange the links order, then it might rise upside down as well, from top to bottom, then tweak it some... which would be less weird i guess, although to make it look proper in every way, then ill probably have to re-do the whole thing.

  2. #52
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Answer PMd.
    Yes that seems to work - well done

  3. #53
    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)
    Quote Originally Posted by Paul O'B View Post
    Yes that seems to work - well done
    Lol
    Quote Originally Posted by Paul O'B
    Quote Originally Posted by RyanReese
    [code]Got unlazy.

    lol -still a little bit lazy as you only included one item in each dropdown

    However you have the technique working properly now and you could easily have increased the containers height to allow for more elements.

    Well done anyway and thanks for taking part

    Paul
    I mean I got a little bit unlazier then I previously was
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

  5. #55
    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)
    Couldn't think of the word
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #56
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    In my example tabbing causes the links to rise up from the bottom which is a little strange but still usable. Much better than a JS version where nothing would happen at all when you tabbed (like in the suckerfish menus).
    I know you didn't mean that this cant be achieved with JavaScript, but you can tab through a drop down list that uses JavaScript providing the drop down list was programmed with tabbing in mind. (not suckerfish).

    www.littlegreenstep.com see

    of course using CSS would be require significantly less code, so I am sure it is much faster!

  7. #57
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    it might be faster, but it will probably need some tweaking before it can be used on a real website

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    but you can tab through a drop down list that uses JavaScript providing the drop down list was programmed with tabbing in mind. (not suckerfish).
    Yes, of course I was just referring to the suckerfish snippets. I believe the superfish menus have these enhancements.

  9. #59
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Solution Time

    Thanks to all those that took part in another interesting little quiz.

    This quiz was another one that sounded impossible at first but with a little lateral thought we have again shown that if you put your mind to it then most things are possible.

    The secret to this quiz was simply to use a fragment identifier on the href and have the browser scroll to an "in-page link" where the submenus were contained.

    The submenus were simply hidden in an an absolute element that had overflow:hidden applied and the submenus were placed below the fold of the absolute element. This meant a height needed to be set for the absolute element so that we could put the menus out of reach. The element then had overflow:hidden to hide the scrollbars and to therefore hide the content.

    When you clicked the link the browser scrolled the content to the top of the absolute element making them visible and accessible.

    The rest of the code was just ensuring that each menu was out of the way of the next and didn't interefere with the display.

    This technique could be used in many other scenarios such as simple hide and shows of blocks of content which would in fact be much easier than our menu because they could each occupy the same space. It could also be used for a simple image gallery that shows a larger image when clicked.

    Here is a live example of my original code.

    As mentioned this was mainly aimed at IE6 for quiz purposes but does work in most other browsers except in Opera. However Yurikolvsky added some extra divs and managed to get Opera to work as well (note the opera bug appears to be fixed in the next version according to Simon (zcorpan)).

    For that reason Yurikilovsky is the winner of this quiz so well done

    The other two entrants should also be commended for finding the solution and they are DanNl and Ryan.

    Well done to all those that took part and those that watched in awe.

    Here is the code to my original solution:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    h1, h2 {
        text-align:center;
        margin:.5em 0;
    }
    p {
        margin:1em 0;
    }
    ul {
        list-style:none;
    }
    #navtest {
        width:43em;
        margin:20px auto;
        position:relative;
    }
    ul#nav {
        margin:0 0 1em;
        float:left
    }
    ul#nav li {
        float:left;
        height:2em;
        line-height:2em;
        margin-right:-1px;
        width:7em;
        border:1px solid #000;
        text-align:center;
        position:relative;
    }
    ul#nav li a {
        white-space:nowrap;
        display:block;
        padding:0;
        height:2em;
        color:#000;
        text-decoration:none;
        background:#ffffcc;
    }
    #sub ul {
        position:absolute;
        height:30em;
    }
    #sub li {
        background:#ffffcc;
        border:1px solid #000;
        margin:-1px 0 0;
        float:none;
        height:auto;
        width:auto;
        position:relative;
    }
    #sub li a {
        white-space:nowrap;
        display:block;
        text-decoration:none;
        color:#000;
        position:relative;
        padding:6px 10px;
    }
    #navtest li a:hover {
        background:red;
        color:#fff;
    }
    ul#nav li.close a {
        background:#000;
        color:#fff;
        font-weight:bold
    }
    ul#one {
        margin-left:0px;
        top:30em
    }
    ul#two {
        margin-left:7.1em;
        top:60em
    }
    ul#three {
        margin-left:14.15em;
        top:90em
    }
    ul#four {
        margin-left:21.2em;
        top:120em
    }
    ul#five {
        margin-left:28.3em;
        top:150em
    }
    ul#blank {
        margin-left:0;
        top:180em
    }
    ul#blank {
        visibility:hidden
    }
    #navtest div {
        clear:both;
        position:absolute;
        left:0;
        top:2.1em;
        height:20em;
        width:50em;
        overflow:hidden
    }
    .intro {
        width:43em;
        margin:auto;
    }
    ul#nav li b {
        border-left:10px dashed transparent;
        border-right:10px dashed transparent;
        border-top:10px solid blue;
        position:absolute;
        right:10px;
        top:10px;
    }
    ul#nav li a:hover b {
        border-top:10px solid #fff
    }
    a:active, a:focus {
        background:green!important
    }
    </style>
    </head>
    <body>
    <div class="intro">
        <h1>Click Drop Down Menu For IE6 </h1>
        <h2>No Javascript - No conditional comments - <br />
            Valid CSS HTML - No Images</h2>
        <p>Click the menu to reveal the drop down and then you can select a link from the drop down. To close the menu click the close button at the end of the menu.</p>
    </div>
    <div id="navtest">
        <ul id="nav">
            <li><a href="#one">Link 1<b></b> </a></li>
            <li><a href="#two">Link 2<b></b></a></li>
            <li><a href="#three">Link 3<b></b></a></li>
            <li><a href="#four">Link 4<b></b></a></li>
            <li><a href="#five">Link 5<b></b></a></li>
            <li class="close"><a href="#blank">Close menus</a></li>
        </ul>
        <div id="sub">
            <ul id="one">
                <li><a href="http://www.google.co.uk/">Link to somewhere</a></li>
                <li><a href="http://uk.yahoo.com/?p=us">Somewhere else</a></li>
                <li><a href="http://www.google.co.uk/">Less Links </a></li>
                <li><a href="#">Just links </a></li>
                <li><a href="#">More links </a></li>
                <li><a href="#">Less Links </a></li>
                <li><a href="#">Just links </a></li>
            </ul>
            <ul id="two">
                <li><a href="http://www.pmob.co.uk">Link2 to somewhere</a></li>
                <li><a href="#">Link2 to somewhere else</a></li>
                <li><a href="#">More2 links </a></li>
                <li><a href="#">Less2 Links </a></li>
            </ul>
            <ul id="three">
                <li><a href="#">Link3 to somewhere</a></li>
                <li><a href="#">Link3 to somewhere else</a></li>
                <li><a href="#">More3 links </a></li>
                <li><a href="#">Less3 Links </a></li>
                <li><a href="#">Just3 links </a></li>
                <li><a href="#">Less Links </a></li>
                <li><a href="#">Just links </a></li>
                <li><a href="#">Less Links </a></li>
                <li><a href="#">Just links </a></li>
            </ul>
            <ul id="four">
                <li><a href="#">Link4 to here</a></li>
                <li><a href="#">Link4 to there</a></li>
                <li><a href="#">More4 links </a></li>
                <li><a href="#">Less4 Links </a></li>
                <li><a href="#">Just4 links </a></li>
                <li><a href="#">Less Links </a></li>
                <li><a href="#">Just links </a></li>
            </ul>
            <ul id="five">
                <li><a href="#">Link5 to somewhere</a></li>
                <li><a href="#">Link5 to somewhere else</a></li>
                <li><a href="#">More5 links </a></li>
                <li><a href="#">Less5 Links </a></li>
                <li><a href="#">Just5 links </a></li>
                <li><a href="#">Less Links </a></li>
                <li><a href="#">Just links </a></li>
                <li><a href="#">Less Links </a></li>
                <li><a href="#">Just links </a></li>
            </ul>
            <ul id="blank">
                <li>&nbsp;</li>
            </ul>
        </div>
        <p>This dropdown menu uses no javascript and uses valid css and html without the need for conditional comments and without the need for any hacks at all. The drop downs are removed from the flow and will overlap following content such as this.</p>
        <p>This is an experimental layout specially provided for my CSS quizzes at Sitepoint and is not meant to be anthng more than an example of what css can do. The code is not very semantic in this example but the techniques used could be used semantically for similar layouts. </p>
        <p>The links can be tabbed via the keyboard but the effect is rather strange</p>
        <h3>Works in IE5 - 8, Firefox 3, Safari 3 - Doesn't work in Opera</h3>
    </div>
    </body>
    </html>
    Yurikolvsky's entry:
    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>Clicking Dropdowns - YuriKolovsky - notcleaned xD</title>
    <style type="text/css">
    a {
        text-decoration:none;
        display:block;
    }
    ul {
        list-style-type:none;
        margin:0;
        padding:0;
        display:block;
    }
    .container {
        border:green 1px solid;
        position:relative;
        height:22px;
        width:915px;
    }
    .navigation {
        background-color:#999;
        overflow:hidden;
        z-index:2;
        position:relative;
    }
    .navigation li {
        float:left;
        background-color:#000;
        width:150px;
        text-align:center;
        border:solid white 1px;
        position:relative;
        height:20px;
    }
    .navigation li a {
        color:#fff;
    }
    .dropdowns {
        height:400px;/*this is needed in order to hide the opera horizontal scrollbar, it creates a limitation in terms of vertical drop down height, but is needed for opera*/
        width:1000px;
        position:relative;
    }
    #reset {
        display:block;
        height:1000px;
    }
    .reset a {
        background-color:#666;
    }
    .dropdowns ul {
        border:solid #000000 1px;
        position:absolute;
        top:1000px;
        border-bottom:0;
        border-top:solid green 1px;
    }
    .dropdowns ul li {
        padding:1px;
        border-bottom:1px solid #000000;
        background-color:#fff;
    }
    .dropdowns ul li a {
        color:#000;
        padding:4px;
    }
    .dropdowns ul li a:hover {
        color:#fff;
        background-color:#000;
    }
    /*below is the opera fix xD*/
    .operafix {
        position:relative;
        float:left;/*ie-operafix, ie stop showing the dropdowns fix*/
        border-top:0;
        overflow:hidden;/*the trick is here*/
    }
    .dropdowns {
        overflow:scroll;/*and here*/
        overflow-y:hidden;
        margin-bottom:-18px;/*and here*/
    }
    /*above is the opera fix*/
    .operafix {
        position:absolute;
        left:0;
        top:22px;
    }
    #two {
        left:152px;
        top:2000px;
    }
    #three {
        left:304px;
        top:3000px;
    }
    #four {
        left:456px;
        top:4000px;
    }
    #five {
        left:608px;
        top:5000px;
    }
    #spacer {
        top:6000px;
    }
    </style>
    </head>
    <body>
    <h1>Click DropDown Menu</h1>
    <p>text text text</p>
    <div class="container">
        <ul class="navigation">
            <li><a href="#one">link to 1</a></li>
            <li><a href="#two">link to 2</a></li>
            <li><a href="#three">link to 3</a></li>
            <li><a href="#four">link to 4</a></li>
            <li><a href="#five">link to 5</a></li>
            <li class="reset"><a href="#reset">Close menus</a></li>
        </ul>
        <div class="operafix">
            <div class="dropdowns"> <span id="reset">&nbsp;</span>
                <ul id="one">
                    <li><a href="#superspot">Link to super spot</a></li>
                    <li><a href="#someplace">Link to someplace</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                </ul>
                <ul id="two">
                    <li><a href="#">Generic Longer Unclickable Link</a></li>
                    <li><a href="#">Generic Longer Unclickable Link</a></li>
                    <li><a href="#">Generic Longer Unclickable Link</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                </ul>
                <ul id="three">
                    <li><a href="#whoops">Whoops</a></li>
                    <li><a href="#something">A Blob</a></li>
                    <li><a href="#">Myblog</a></li>
                    <li><a href="#">Myspace</a></li>
                    <li><a href="#">Mylife</a></li>
                    <li><a href="#">Mystuff</a></li>
                    <li><a href="#">Myland</a></li>
                    <li><a href="#">Myland???</a></li>
                </ul>
                <ul id="four">
                    <li><a href="#">LAzer Fiyring??</a></li>
                    <li><a href="#b">Underground Net Culture??!?</a></li>
                    <li><a href="#">internet rules? it rules!</a></li>
                    <li><a href="#">something werid</a></li>
                    <li><a href="#">things</a></li>
                    <li><a href="#">Mylife</a></li>
                    <li><a href="#">Mystuff</a></li>
                    <li><a href="#">Myland</a></li>
                    <li><a href="#someplace">Link to someplace</a></li>
                    <li><a href="#">Generic Unclickable Link</a></li>
                </ul>
                <ul id="five">
                    <li><a href="#">portfolio</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
                <ul id="spacer">
                </ul>
            </div>
        </div>
    </div>
    <p>text text text</p>
    </body>
    </html>

    DanNl

    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>Sitepoint's Paul O'B's CSS Quiz 19</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    body {
        font-size: 14px;
    }
    p {
        margin-bottom: 14px;
    }
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 22px;
    }
    h3 {
        font-size: 18px;
    }
    .blue {
        color:blue;
    }
    .link {
        margin-top:900px;
        padding-bottom:900px;
    }
    .clear_menu {
        clear:both;
        margin-bottom:60px;
    }
    .menu {
        position:absolute;
    }
    .menu li {
        list-style:none;
        float:left;
        width:85px;
        background-color:blue;
    }
    .menu li a {
        display:block;
        padding:5px 5px 0 5px;
        height:22px;
        border-top:solid 1px #000;
        border-right:solid 1px #000;
        border-bottom:solid 1px #000;
        background-color:#ffffcc;
        position:relative;
        text-decoration:none;
        color:#000;
    }
    .menu a.first_horizontal {
        border-left:solid 1px #000;
    }
    .menu a:active, .menu a:focus {
        outline:none;
        background-color:green;
    }
    .menu a.close_menu {
        background-color:#000;
        color:#fff;
    }
    #submenus {
        position: absolute;
        margin-top:29px;
        background-color:transparent;
        overflow:hidden;
        height:140px;
    }
    .submenu li {
        list-style: none;
        width:130px;
    }
    .submenu a {
        display:block;
        padding:5px 5px 0 5px;
        height:22px;
        background-color:#ffffcc;
        border-top:none;
        border-left:solid 1px #000;
        border-right:solid 1px #000;
        border-bottom:solid 1px #000;
        text-decoration:none;
        color:#000;
    }
    .submenu a:hover {
        background-color:red;
    }
    #nolink {
        height:140px;
    }
    #link2_submenu {
        margin-left:84px;
    }
    #link3_submenu {
        margin-left:169px;
    }
    #link4_submenu {
        margin-left:254px;
    }
    #link5_submenu {
        margin-left:339px;
    }
    </style>
    </head>
    <body>
    <div id="content_wrapper">
        <div>
            <h1>Click Drop Down Menu For IE6</h1>
            <h2>No Javascript - No conditional comments -<br>
                Valid CSS HTML - No Images</h2>
            <p>Click the menu to reveal the drop down and then you can select a link from the drop down. To close the menu click the close button at the end of the menu.</p>
            <ul class="menu">
                <li><a href="#link1_submenu" class="first_horizontal">link 1 <span class="blue">▼</span></a></li>
                <li><a href="#link2_submenu">link 2 <span class="blue">▼</span></a></li>
                <li><a href="#link3_submenu">link 3 <span class="blue">▼</span></a></li>
                <li><a href="#link4_submenu">link 4 <span class="blue">▼</span></a></li>
                <li><a href="#link5_submenu">link 5 <span class="blue">▼</span></a></li>
                <li><a href="#nolink" class="close_menu">close menus</a></li>
            </ul>
            <div id="submenus">
                <ul id="nolink" class="submenu">
                    <li></li>
                </ul>
                <ul id="link1_submenu" class="submenu">
                    <li><a href="#">menu 1 sublink 1</a></li>
                    <li><a href="#">sublink 2</a></li>
                    <li><a href="#">sublink 3</a></li>
                    <li><a href="#">sublink 4</a></li>
                    <li><a href="#">sublink 5</a></li>
                </ul>
                <ul id="link2_submenu" class="submenu">
                    <li><a href="#">menu 2 sublink 1</a></li>
                    <li><a href="#">sublink 2</a></li>
                    <li><a href="#">sublink 3</a></li>
                    <li><a href="#">sublink 4</a></li>
                    <li><a href="#">sublink 5</a></li>
                </ul>
                <ul id="link3_submenu" class="submenu">
                    <li><a href="#">menu 3 sublink 1</a></li>
                    <li><a href="#">sublink 2</a></li>
                    <li><a href="#">sublink 3</a></li>
                    <li><a href="#">sublink 4</a></li>
                    <li><a href="#">sublink 5</a></li>
                </ul>
                <ul id="link4_submenu" class="submenu">
                    <li><a href="#">menu 4 sublink 1</a></li>
                    <li><a href="#">sublink 2</a></li>
                    <li><a href="#">sublink 3</a></li>
                    <li><a href="#">sublink 4</a></li>
                    <li><a href="#">sublink 5</a></li>
                </ul>
                <ul id="link5_submenu" class="submenu">
                    <li><a href="#">menu 5 sublink 1</a></li>
                    <li><a href="#">sublink 2</a></li>
                    <li><a href="#">sublink 3</a></li>
                    <li><a href="#">sublink 4</a></li>
                    <li><a href="#">sublink 5</a></li>
                </ul>
            </div>
            <div class="clear_menu"></div>
            <p>This dropdown menu uses no javascript and uses valid css and html without the need for conditional comments and without the need for any hacks at all. The drop downs are removed from the flow and will overlap following content such as this.</p>
            <p>This is an experimental layout specially provided for my CSS quizes at Sitepoint and is not meant to be anything more than an example of what css can do. The code is not very semantic in this example but the techniques used could be used semantically for similar layouts.</p>
            <p>The links can be tabbed via the keyboard but the effect is rather strange.</p>
            <h3>Works in IE5 - 8, Firefox 3, Safari 3 - Doesn't work in Opera</h3>
        </div>
    </div>
    </body>
    </html>
    Ryan
    Code:
    <!doctype html>
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0}
    a
    {
        position:absolute;
        left:0;
        width:100px;
        text-align:center;
        text-decoration:none;
        color:#FFF;
        background:pink;
        height:30px;
        z-index:9999;
        border:1px solid #000;
        line-height:30px;
    }
    a.two
    {
        left:101px;
    }
    a.three
    {
        left:202px;
    }
    a.four
    {
        left:303px;
    }
    a.five
    {
        left:404px;
    }
    a.close
    {
        background:#000;
        color:#FFF;
        left:505px;
    }
    div
    {
        background:blue;
        color:#FFF;
        position:relative;
        width:102px;
        height:30px;
        top:0;
        left:0;
        text-align:center;
    }
    #link1
    {
        left:0;
    }
    #link2
    {
        left:101px;
    }
    #link3
    {
        left:201px;
    }
    #link4
    {
        top:1px;
        left:303px;
    }
    #link5
    {
        left:404px;
        top:2px;
    }
    #close
    {
        left:505px;
        visibility:hidden;
    }
    #ap
    {
        overflow:hidden;
        position:absolute;
        top:30px;
        width:600px;
        height:30px;
        background:white;
        left:0;
    }
    *+html #ap
    {
        width:100&#37;;
        left:-450px;
    }
    * html #ap
    {
        width:100%;
        left:-450px;
    }
    </style>
    </head>
    
    <body>
    <a href="#link1">Link 1</a>
    <a class="two" href="#link2">Link 2</a>
    <a class="three" href="#link3">Link 3</a>
    <a class="four" href="#link4">Link 4</a>
    <a class="five" href="#link5">Link 5</a>
    <a class="close" href="#close">Close</a>
    
    <div id="ap">
    <div id="link1">Submenu1</div>
    <div id="link2">Submenu2</div>
    <div id="link3">Submenu3</div>
    <div id="link4">Submenu4</div>
    <div id="link5">Submenu5</div>
    <div id="close"></div>
    </div>
    </body>
    </html>
    Thanks to all that took part and look out for the next quiz in about a weeks time.

  10. #60
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yay, congratulations to all who solved it, and will solve it in the future!

  11. #61
    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)
    Next quiz time?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #62
    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
    the next quiz in about a weeks time.
    so i think next Friday

    although its best to choose a time when the forums are most active.

  13. #63
    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 need heads up so I'm on
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #64
    SitePoint Addict
    Join Date
    May 2006
    Location
    Amsterdam
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Thanks again for the quiz ... I really enjoyed the challenge and I'm glad to see Ryan found a solution and that Yuri tackled Opera (at least 9.6 and higher) ...

    A couple of thoughts:

    1. This topic explores an interesting cross-over between CSS being a style mark-up language and a behavioral mark-up language, which seems to be coming across in CSS3, http://www.w3.org/TR/css3-hyperlinks/. I haven't had time to explore this thoroughly but it is defintiely interesting as I was wondering how XHTML was supposed to support the target attribute of the <a> tag when it's not considered valid markup in XHMTL.

    2. I love how Ryan's DOCTYPE passes the w3 validator ...

    3. I thought our CSS had to be 2.1 valid and HTML valid ... nothing major was found, just a few small issues.

    4. The tabbing issue is defintely interesting and I found that tabindex did help make it a bit better, but maybe the CSS3 solution would work in a more intuitive way ...

    5. Overall, I find this a great way to learn, thanks again Paul, and everyone else for your answers!

  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)
    Quote Originally Posted by danNL View Post
    Hey Paul,

    Thanks again for the quiz ... I really enjoyed the challenge and I'm glad to see Ryan found a solution and that Yuri tackled Opera (at least 9.6 and higher) ...

    A couple of thoughts:

    1. This topic explores an interesting cross-over between CSS being a style mark-up language and a behavioral mark-up language, which seems to be coming across in CSS3, http://www.w3.org/TR/css3-hyperlinks/. I haven't had time to explore this thoroughly but it is defintiely interesting as I was wondering how XHTML was supposed to support the target attribute of the <a> tag when it's not considered valid markup in XHMTL.

    2. I love how Ryan's DOCTYPE passes the w3 validator ...

    3. I thought our CSS had to be 2.1 valid and HTML valid ... nothing major was found, just a few small issues.

    4. The tabbing issue is defintely interesting and I found that tabindex did help make it a bit better, but maybe the CSS3 solution would work in a more intuitive way ...

    5. Overall, I find this a great way to learn, thanks again Paul, and everyone else for your answers!
    1) Very nice
    2) It is the HTML5 doctype. It is valid
    3) The basic point was to get IE6 working with this technique in place
    4) I wouldn't know
    5) Your welcome

    Also, I decided to do it once Paul siad Saturday was the last day. I wanted my name on the spotlight .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #66
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    3. I thought our CSS had to be 2.1 valid and HTML valid ... nothing major was found, just a few small issues.
    we scan the markup by "eye"

    (at least i do)

    danNL, i recommend you try some other quizzes that paul posted (one of them is even mine , 16B hehehehe)
    some of my favorites are probably quiz 9 and 10, 12, 14, 18
    while i do love most of them.

  17. #67
    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)
    Hmm I wil go back and try 1-7 (or whereever I started)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  18. #68
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whoever can do this is a genius.

  19. #69
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i did this!




    and ryan, DanNl too, and paul came up with it.

  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)
    Yea it just took some thinking.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #71
    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)
    Can you post the quiz early Paul? I'm going crazy over here .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #72
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)

  23. #73
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very good idea to test css skills

  24. #74
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've known about this technique for a few years, though I can't remember where I first saw it. (It was related to index-card-style tabbing between sections of an article, IIRC.) I was reminded of it again about a year ago when I saw an entire websited coded that way: one page, with a menu and a main content box in which the different "pages" appear.(*) I was very impressed by how it worked with JS off (which is my default way of browsing thanks to Fx+NoScript) and even more so by the way its author had carefully enhanced the presentation with JS by smooth-scrolling the next "page" into view instead of just jumping there directly. As Paul said, it is a technique with a lot of potential (such as photo galleries; no use for variable-sized content unfortunately, because of overflow:hidden) but I'd never got round to using it because of the lack of Opera support.

    Quote Originally Posted by danNL View Post
    This topic explores an interesting cross-over between CSS being a style mark-up language and a behavioral mark-up language, which seems to be coming across in CSS3, w3.org/TR/css3-hyperlinks/
    Absolutely, although that document itself is not the right place to explain the behaviour we're seeing, which is rather deeper than it looks at first glance. When visiting a URL which contains a fragment identifier, the browsers first ignore the fragment identifier and lay out the page as if the URL didn't contain it. Then they look at the fragment identifier and locate the target element in the document. Then they find the closest block formatting context (BFC) ancestor which contains the target element. Finally they scroll the content of that BFC to bring the target into view, leaving the content in all the other BFCs in the same position.

    Whilst this seems like sensible and desirable behaviour, it is not specified anywhere and so I'd be reluctant to exploit it in the real world for any content that is critical. Thus it would be great to get this behaviour specified!

    This method could also be extended so that if URLs were permitted to contain several fragment identifiers, all targets could be scrolled into view inside their containing BFCs. (This has similarity with the well-known FRAMESET problem in which browsers to date cannot bookmark the scroll state of the individual page in each frame, which is the reason why FRAMEs are generally frowned upon.)

    (*) In fact, I think I even bookmarked it somewhere. I'll add the URL to this post if I find it.

  25. #75
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HANDLE WITH CARE!

    I know Paul always warns that the techniques in these quizzes are just for exploring concepts and are not necessarily recommended for real-world sites, but I would like to reiterate this particularly for this quiz.

    This technique is definitely unsuitable for drop-down menus because the absolutely-positioned div lies on top of the content of the page, making the text content underneath unselectable with the mouse. This is a significant usability problem, because many browsers offer a context menu for selected content allowing users to perform various actions (search the web, load url, translate, look up in dictionary) etc. IE8 recently introduced this as a new feature called "accelerators" although of course other browsers have been doing it for years .


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
  •