CSS - Test Your CSS Skills Number 37 - Crosshair: Quiz now finished - see solutions in post #50.
To brighten up your day I have a nice little quiz to stretch your coding abilities. This one isn’t as difficult as some of my previous quizzes but it’s fun and is still a little tricky to get working.
Remember this is just for fun and there are no prizes.
Take a lot at the attachment (crosshair) and you will see a nice little list sitting in the window. The top screenshot (1) shows the menu in its standard state and there is nothing special here. Just a normal list that you’ve done hundreds of times.
The second and third screenshots (2 and 3) shows what happens when you rollover the menu and parallel horizontal and vertical lines appear (almost like a cross-hair) and stretch to the edges of the viewport.
As you run down the menu the lines follow accordingly but most importantly as soon as you leave the blue menu area the lines disappear.
Screenshot 4 just shows a full screen version so you can see what it looks like.
So that’s basically all you have to do.
Rules
There are always rules 
[B]Must work in IE8+, and modern Safari, Chrome, Firefox (don’t bother with ie6 and 7).
Valid html and css (css2.1 or 3) (but I am also interested in non valid approaches if its interesting).
No scripts of any kind.
No background images.
You can use whatever CSS rules you like but the html between the body tags must be untouched.[/B]
i.e. this portion must not change.
<body>
<ul class="guides">
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
</ul>
</body>
You can’t add elements or change the html above at all.
Here is a full starting point that gives you the basic html and css.
<!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">
ul.guides {
padding:0;
list-style:none;
margin:0;
border-top:1px solid #9cf;
border-bottom:1px solid #9cf;
}
ul.guides li {
}
ul.guides a {
border:1px solid #9cf;
background:#9ff;
display:block;
color:#000;
text-decoration:none;
}
ul.guides a:hover {
background:#9cc;
}
</style>
</head>
<body>
<ul class="guides">
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
<li><a href="#">testing</a></li>
</ul>
</body>
</html>
You can change the css or even remove the css and start again as you think fit.
I think that covers everything but if anything is still unclear or I have made an error in my logic then just shout. The winner won’t necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).
Remember this is just for fun and there are no prizes. Your reward will be knowing how smart you are.
Don’t post your answers in this thread but PM with the details instead so that all can have a go.
Have fun.
PS. : In case you missed the other tests you can find them all listed here:
PPS: A couple of you have sent me in some ideas for quizzes a while ago and I still haven’t forgotten them and I will get around to posting them so thanks for the support.
