CSS - Test Your CSS Skills Number 19

Quote:

---

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.

Quote:

---

Originally Posted by RyanReese

Answer PMd.

---

Yes that seems to work - well done :)

Quote:

---

Originally Posted by Paul O'B

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 :lol:

unlazyfication? xD

Couldn't think of the word ;)

Quote:

---

Originally Posted by 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).

---

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 :D

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

it might be faster, but it will probably need some tweaking before it can be used on a real website

Quote:

---

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.

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.

yay, congratulations to all who solved it, and will solve it in the future!

Next quiz time?

Quote:

---

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. :)

I need heads up so I'm on ;)

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!

Quote:

---

Originally Posted by danNL

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 :D.

Quote:

---

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 :D, 16B hehehehe)
some of my favorites are probably quiz 9 and 10, 12, 14, 18
while i do love most of them.

Hmm I wil go back and try 1-7 (or whereever I started)

whoever can do this is a genius.

i did this! :)




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

Yea it just took some thinking.

Can you post the quiz early Paul? I'm going crazy over here :(.

New Quiz posted

very good idea to test css skills

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

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.

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 ;).