SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 52
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)

    CSS - Test Your CSS Skills Number 37 - Crosshair

    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

    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.


    i.e. this portion must not change.
    Code:
    <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.

    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">
    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.
    Attached Images Attached Images

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yay, a new quiz!

    edit:

    for some reason the starting point html list stretches all the way to the sides?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    Yay, a new quiz!

    edit:

    for some reason the starting point html list stretches all the way to the sides?
    Hi Timo

    Yes just add a width where you need to. I was just being awkward and not giving you one (or make it fluid content width if you want although that might be quite hard).

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Answer submitted!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quick work from Eric and Timo and they have entries that are close but not perfect yet.

    Good work anyway

  6. #6
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    YEAH! finally got IE8 to work!
    these quizzes are a great way to train common-sense, which I had trouble with while attempting this.

  7. #7
    SitePoint Member
    Join Date
    Sep 2007
    Location
    Germany
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will try to submit sth. later this day!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Well done Timo - That's what I was looking for.

    It's not quite as straight forward as it looks. Keep trying everybody else.

  9. #9
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    ... there are no prizes.
    What, not even a pony?


  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    lol - Alright the winner can have your picture of a pony

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Quick work from Eric and Timo and they have entries that are close but not perfect yet.

    Good work anyway
    I was afraid mine was a little off the mark. As for now, I'm out of ideas how to do it any different. I'll drink on it tonight...

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I'll drink on it tonight...
    Mines a beer thanks

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you want to make it harder then have a go at a widthless version

  14. #14
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    widthless? you must be kidding me! xD
    Now I'll stay up all night thinking about it...

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    widthless? you must be kidding me! xD
    Now I'll stay up all night thinking about it...
    lol - just trying to make it harder for you .

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Ok here's a fluid version that works in Firefox, Safari and IE8.

    The html I used was this.

    Code:
    <div class="guides"> Lorem ipsum dolor sit amet, <a href="#"><b>consectetur adipiscing elit</b></a>. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna.<a href="#"><b> Morbi condimentum massa</b></a> sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc <a href="#"><b>pulvinar</b></a>, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. <a href="#"><b>Aliquam</b></a> eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, <a href="#"><b>et fermentum</b></a> nisi. Suspendisse potenti. Ut pellentesque lorem <a href="#"><b>ut metus</b></a> convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, <a href="#"><b>rutrum</b></a> euismod nisl.</div>
    Had to use one extra element in the anchor unfortunately but it's a good effect.
    Attached Images Attached Images

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I drank on it. It didn't wobble anything loose. I can't think of anyway other way to do it other than the way I tried.

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I drank on it. It didn't wobble anything loose. I can't think of anyway other way to do it other than the way I tried.
    Never mind Eric - at least you tried

  19. #19
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    My solution is in your inbox.
    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.
    That seems to have been the tricky part. My version may not fully meet that requirement, it depends on how you leave the blue area.

    I don't have doubled up or jumpy borders on hover so that's a plus.

  20. #20
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Hi Paul,

    My solution is in your inbox.
    That seems to have been the tricky part. My version may not fully meet that requirement, it depends on how you leave the blue area.

    I don't have doubled up or jumpy borders on hover so that's a plus.
    Same here - mine stays open (bordered) depending on how you leave the li/ul.

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It sounds like we may have done the same thing then Eric

    I'll keep working on it and see if I can fix the "how you leave" part.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Ray,

    Yes you have the same problem as Eric although Eric used a different approach.

    You are on the right track though and not too many changes needed.

    Good effort all around though

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I have a solution from Raffles which is working in Firefox but is suffering from the IE8 bug that we mentioned earlier. I'm sure it will be fixed soon so well done.

    No answers yet for the fluid version I posted in post #16.

  24. #24
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,366
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Raffles has now solved both the examples - well done

  25. #25
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Yeah, no fluid version from me because I was away.
    Now I'm back, and having another look, my brain tells me it should be easy if there are extra tags, lets see if it's right... lol

    edit:
    yeah, I'm done, took 17 mins
    It was killing my brain to think of a way to do it without extra tags.


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
  •