CSS - Test Your CSS Skills Number 27

Wow noone hasa got this yet?

i don’t think anyone anywhere has done this yet.
makes finding the solution THIS much more interesting. :stuck_out_tongue:

edit:
Paul has just made a “fixed width links” example that uses only 1 extra element for every dropdown link in the html!!!

If no one offers anything close by tomorrow we’ll drop some bigger hints.:slight_smile:

However we were hoping that people would come up with their own new ways to do this now that they know it’s possible. There are a number of possible solutions (although some are better than others) and as yuri just mentioned a fixed with menu can be done with this minimal html (the css of which is based heavily from Yuris original idea and works in IE, Safari3+ and FF3+ using the same code with no hacks or forking of code).


<ul class="nav">
        <li><b></b><a class="main" href="#">Main 1</a>
            <ul>
                <li><a href="http://www.google.com">Google</a></li>
                <li><a href="http://www.yahoo.com">Yahoo</a></li>
                <li><a href="http://www.pmob.co.uk">pmob.co.uk</a></li>
                <li><a href="http:www.sitepoint.com">Sitepoint</a></li>
            </ul>
        </li>
</ul>

That’s enough help for today :slight_smile:

Paul O’B
However we were hoping that people would come up with their own new ways to do this now that they know it’s possible.

couldn’t agree more.

That’s enough help for today

i agree.
we have given plenty hints and tips and even a mini-guide.

Lol, <b></b>???

Yes a bad habit of mine to use a mainly non semantic element such as b instead of using a span because it is three characters shorter and can be uniquely identified without adding a class. Chances are there will be no other b elements in there unlike spans which would likely crop up everywhere.

Strictly speaking it is a misuse of the element but if it’s good enough for Eric Meyer then it’s good enough for me :slight_smile:

Lol, <b></b>???

I’m pretty sure if you leave this topic here for long enough someone will come up with the answer. You’ve already given quite a few hints already, just needs someone to put theory into practice.

Lol, <b></b>???

Setting a height, perhaps, to hold it open. I can’t see what else it would be used for structurally.

why don’t you pull it up? then it will not trigger any scrollbar.

Because it’s easy to get stuck in the 1 train of thought and overlook the obvious :stuck_out_tongue:

very true…no more tips! xD

Heh, reminds me of DeathShadow’s habits :stuck_out_tongue:

The difference between what you are doing and what Eric Myer is doing though is that he is wrapping actual content which already has some emphasis on it (ie: in a heading tag) with the <b> tags, so even though he’s not using for semantic purposes, it doesn’t look out of place, whereas in your situation it has no semantic relevance whatsoever since it doesn’t contain any content. This probably isn’t the place to go debating the pros and cons of minimal markup vs semantic markup though.

[ot]

whereas in your situation it has no semantic relevance whatsoever since it doesn’t contain any content.

Which makes me wonder why it would matter at all. : ) Empty vessel is an empty vessel, and a thirsty man doesn’t care if it’s made of silver or gold.[/ot]

Off Topic:

As Stomme said it’s an empty element and to my mind a span would be just as incorrect because a span infers that some inline mark up is about to appear and of course there isn’t any.

If you look at many of the round corner techniques they are all using <b> to save thousands of characters per page rather than using spans. As I said above it’s really a misues of the element but does make practical sense in some cases. (We could really do with a new element like <x> element that means nothing and should be ignored by all except css.)

Anyway back to the quiz and later on I will float in and drop you all a few more hints :slight_smile:

Ugh internet effed up.

Check your inbox, I have it stay open though not what readers might think-I need to know if I’m on the right track.

So far owrks everywhere but Opera.

I have tried solving this fantastic quiz. Two pretty lame 1/8 solutions came of it. The first attempt allowed the sublinks to stay open, but they wouldn’t close again upon moving away the mouse. The second attempt allowed only for the first two links on hover to work as intended where the other remaining links would shut down the entire sub menu again.

I haven’t a clue whether I have been right with either two methods, but I’m going to give it another try. I’m still waiting for it to “click” in my brain. So far, nothing has really clicked. My brain is suspiciously quiet. That is a common problem of mine. Hahaha. back to experimenting

Which had me stumped as I knew a different method would be needed

The second attempt allowed only for the first two links on hover to work as intended where the other remaining links would shut down the entire sub menu again.

Sounds like you were close…very close. If it worked for two you would probably just have to change a value or two and you would be good

Maybe. I can’t really tell. However, what has me even more suspicious is the fact that it doesn’t work in modern browsers. I have taken Paul’s advice to code this in IE6, and only occasionally looked at it in other browsers. Perhaps feeding modern browsers common methods will solve that issue, but I’m somewhat fixated on IE6 right now.

This is tons of fun but I am swimming in a sea of hair I’ve been tearing out for the last couple of hours. I am not going to give up this quickly though.

Perhaps once this quiz is done you can PM me that code, I’m a bit interested right now ;P.

People ask me why I have semi long hair-it’s for occassions like this where I lose some xD.

Well, I’ve got the hover effect to work for all sub links and the sub menu disappears when the mouse moves out of focus as intended. Not very stable though and lots of flickering. So back to the drawing board.

The fixed width version (that I supplied the html for a couple of posts back) works in all browsers without any hacks or forking of the code. Yuri’s original fluid width top level version does take a bit more work to do though and does need some different code for various browsers.

There is no flickering at all in the drop downs and you wouldn’t know that it wasn’t a normal drop down from using it.

If you are still struggling tomorrow I may offer a big clue to help but some people are still trying to solve it on their own.

I have littered a few clues throughout the posts.

Most of you can make the menus appear ok but can’t find a way to keep the menu open so that anything can be selected.

What you should be looking for is some mechanism where hovering on one sub link keeps all the other sub links visible. You have seen this effect many times in your layouts (and probably cursed it) so now its time to utilise it.

very nice work kohoutek, both of your solutions i have seen, and both of them can be made to work (at least one of them according to paul, as its similar to his first version).

Maybe. I can’t really tell. However, what has me even more suspicious is the fact that it doesn’t work in modern browsers. I have taken Paul’s advice to code this in IE6, and only occasionally looked at it in other browsers. Perhaps feeding modern browsers common methods will solve that issue, but I’m somewhat fixated on IE6 right now.

paul gave you excellent advice, stick to ie6.
although pauls simplified version works in all browsers using the same css.

This is tons of fun but I am swimming in a sea of hair I’ve been tearing out for the last couple of hours. I am not going to give up this quickly though.

:smiley:

Well, I’ve got the hover effect to work for all sub links and the sub menu disappears when the mouse moves out of focus as intended. Not very stable though and lots of flickering. So back to the drawing board.

that is very good, send me your current version, i would love to see what you have so far, sounds like you need to add a rule or two and your the first one to solve this.

Ryan
People ask me why I have semi long hair-it’s for occassions like this where I lose some xD.

i have very very long hair… xD

a question to those who are trying to solve this:
how many of you want a big hint from paul? and how many still want the challenge of solving it without help?

I have two versions (using completely different code), one that I can’t keep open, and one that stays open, but I can’t close. Both I’ve taken as far as my brain will allow.

Yuri, I will send you what I sent Paul. It is horrible code though and the hovers work badly. Very badly. Like I said, tons of flickering. Paul said it was the best entry so far (pride, pride!) but also that I’ve probably entered an impasse. Well, Paul is still alive after having seen the code. I hope you won’t drop dead either. So view the code at your own peril. I don’t want to be responsible for any possible ill effects. :eye:

Anyway, I want to continue to try and solve this. It hasn’t clicked yet, but I’m working on a new approach now, hopefully effectively being able to make use of IE6’s bugs.

As for hints, personally, I don’t want any more. More hints would defeat the joy in doing this. For me anyway. Maybe they could be put in spoiler tags or made so that those of us who don’t want any more aids can’t see them if we don’t want to?

This is so bizzare… there is so much work I have to do and yet I’m stuck with this quiz and don’t want to stop until I know. Pleasure before business. I’ve got it backwards. :slight_smile: