SitePoint Sponsor

User Tag List

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

    Test Your CSS skills - Number 3

    Hi,

    This weeks quiz is a little tough because I'm not giving any clues this time and I'm only providing an image example for you as the real thing would give the game away.

    Your task is to produce the following rollover vertical list that would usually require javascript to accomplish:

    http://www.pmob.co.uk/temp/images/sp...zlistimage.gif

    Easy you may say - but wait where's the catch?

    The catch is that as you roll your mouse down the list each list item in turn will change its background and text to match the already highlighted item. No catch there you say - that's just a normal list! The real catch is that the already highlighted item (link 1) must also switch off as you scroll down the list.

    In a normal list the highlighted item usually stays highlighted while you scroll down so you in fact have 2 highlighted items. The original one and the one under the mouse. In this version there is only ever one highlighted item.

    When no cursor is over the list the list displays as the image above. When the cursor is over link1 the text turns black but the background stays yellow.

    When the cursor is over link2 then link 2 highlights with the yellow background colour and black text and link one reverts to black background and white text the same as all the other links.

    This behaviour is consistent when you move up and down the links and each link should highlihght in turn. Moving the cursor off the list results in link one being highlighted as per the original state.

    Hmmmm I think I've made it sound more complicated than it is

    The only difference between this and a normal rollover list is that the original highlighted item (link 1 in this case) switches off as you traverse the list.Wherever the mouse cursor is in the list only that item is to be highlighted until you mouse out and then the original highlighted link shows up again.

    The links must all be able to work correctly of course.
    Rules:
    • No frames or iframes
    • No javascript or scripting of any kind
    • NO TABLES
    • No images
    • No expressions or conditional comments
    • Use Valid CSS
    • Use Valid xhtml
    • No hacks, no child selectors, no universal selecors, no means of offering separate code to each browser. The same code must work for both browsers.
    • Must work in Firefox and ie6 exactly the same as my example above
    There are no prizes other than the self satisfaction of being the first to complete this. If you solve it then post a message here but PM me the solution so that other people can still have a go.

    Some basic code to give you colours etc.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    ul#navlist 
    {
     list-style-type: none;
     font-family: Arial, Helvetica, sans-serif;
     width:160px; 
    }
    ul#navlist a {
    width: 100%;
    text-align:center;
    background-color: #036;
    color: #EEE;
    text-decoration: none;
    }
    ul#navlist li.active a {background:#ffffcc;color:red;}
    ul#navlist li a:hover {background: #ffffcc;color:black;}
    </style>
    </head>
    <body>
    <ul id="navlist">
      <li class="active"><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
    </ul>
    </body>
    </html>
    You will probably need to make some changes to the html (unless you do it differently to me) and of course the css will need to be filled out.

    Have fun and shout if you're not sure what I mean .

    Paul

    PS If this is too hard I will offer clues after a couple of days

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow... you got a real hard one there.

    Hopefully, I am the first one to get it! heh

    I had it working in firefox, and tryed forcing it upon IE... but it just wouldn't go. So I had to wipe that, and start over. Once I had the idea though, I flew through it. Definitely a very clever one

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    This is interesting. I will give it a shot soon

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    We have a winner already

    Jamslam has given me the first correct entry and deserves to be congratulated at this test was quite hard.

    I was expecting this to last all week

    I won't give any answers or clues yet in case some others want to try their hand at this and I'd be interested to see if there are any different ways of doing this as jamslams code was very close to mine.

    I'll have to start making them harder now

    Paul

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Location
    Massachusetts
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, make'em harder

    I can't think of there being another way... although, you never know!

    Paul, if anyone gets something different, make sure you post it! (of course, when the contest is over )

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Is anybody else going to have a go?

    Or do you want some tips?

    Or shall I post the answer yet?

    Paul

  7. #7
    SitePoint Evangelist downloads_be's Avatar
    Join Date
    Apr 2004
    Location
    belgium
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This thread is interesting, good for testing your skills
    I didn't make it though, please post the answer

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

    I've PM'd you the answer so others can still participate.

    (Of course you won't be allowed now )

    Paul

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just seen the thread, so looks like I'm a little late
    Hello World

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by doug
    Just seen the thread, so looks like I'm a little late
    I'm sure you've worked this out already anyway Doug

    There were two others here that you missed as well
    http://www.sitepoint.com/forums/showthread.php?t=169710

    http://www.sitepoint.com/forums/showthread.php?t=168555

    Paul

  11. #11
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got something that works great in FF but not IE. It will work in IE if I use the .htc fix but I presume that would be cheating

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by fauxpas
    I presume that would be cheating
    Yes. I'm afraid it would

    There are no hacks needed as mentioned above and the same code works in both browsers.

    Keep trying - I'm sure you must be close

    Paul

  13. #13
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    i came, i saw, i tried, i failed

    too hard

    i console myself with the thought that nobody would design a nav list like this


    next question?
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  14. #14
    SitePoint Zealot Octal's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i console myself with the thought that nobody would design a nav list like this
    I love rudy's way of thinking

    I too have failed.

    These little quizzes are great though, if this is not too much trouble for you please keep them coming
    Octal - All your base-8 belong to us
    "Knowing is not enough, we must apply.
    Willing is not enough, we must do." - Bruce Lee

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    i console myself with the thought that nobody would design a nav list like this
    lol - I got the idea after trying to help fix the site in this thread :

    http://www.sitepoint.com/forums/showthread.php?t=169841

    (Look at his javascript menu )

    Paul

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by octal
    These little quizzes are great though, if this is not too much trouble for you please keep them coming
    Thanks for the support

    I have a couple more in the pipeline and if people still enjoy them I shall keep them coming. (I might alternate between easy one week and hard the next so that all levels can try (But not too easy )

    Paul

  17. #17
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Paul O'B
    (Look at his javascript menu )
    nothing happens

    oh, wait

    that's because i always have javascript turned off

    [grumble, grumble (turns on javascript)]

    ;yawn; what a boring nav bar

    [(turns javascript back off)]
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

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

    So you don't all get bored with this I'm going to post the solution (A few of you have PM'd me anyway because it was driving you mad lol.)

    If you still want to try this then visit the link to see it in action but don't peek at the code.

    Heres the basic version :

    http://www.pmob.co.uk/temp/disjointednavlist.htm

    And heres how it would work with linked pages.

    http://www.pmob.co.uk/temp/disjointednavlist1.htm

    Nothing special I know but at least Rudy will be able to see it with his javascript turned off

    Jamslam was the winner as his version was very close - well done ( I will post his code later ).

    Paul

  19. #19
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,216
    Mentioned
    58 Post(s)
    Tagged
    3 Thread(s)
    well, DUH!

    sorry paul, your solution uses a hack

    yes i know you said only ie6 and firephoenixbirdfox, and not necessarily all browsers, including text-only browsers

    but you should see your nav list with css turned off

    HACK!! you used a HACK, i say!!!
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rudy
    but you should see your nav list with css turned off
    You should see it without electricity - its even worse

  21. #21
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi all,

    So you don't all get bored with this I'm going to post the solution (A few of you have PM'd me anyway because it was driving you mad lol.)

    If you still want to try this then visit the link to see it in action but don't peek at the code.

    Heres the basic version :

    http://www.pmob.co.uk/temp/disjointednavlist.htm
    Aw man why did you have to post that! I was almost there

    It's good to know that I had basically the same solution as you anyway! Almost .. I am using the z-index property instead of visibility: hidden as you have done. I was almost there but having problems with the z-index's for IE. Works fine for Firefox and Opera though.

    -xDev

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

    Sorry

    You didn't have to peek though

    If you get your version working then PM it to me and I will post it with jamslams version in a day or so.

    Paul

  23. #23
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    <cheat>
    Here is what I had come up with
    </cheat>

  24. #24
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FauxPas
    <cheat>
    Here is what I had come up with
    </cheat>
    It think you mean... ul#navlist:hover li.active a {background:#036;color:white;}

    My solution was a "what you would do in real life" one. (That basically means I cheated too )

    Douglas
    Hello World

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Fauxpas
    <cheat>
    lol - No prizes but well done anyway

    Talking of cheating here's dougs (dougbtx) version that uses unobtrusive js. It actually degrades better than my css version and shows how js can be implemented quite safely.

    http://www.pmob.co.uk/temp/dougsjslist.htm

    Good work all

    Paul


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
  •