CSS - Test Your CSS Skills Number 27

**YuriKolovsky** · Sep 1, 2009 03:48

rochow
Which <ul>, the one with the sub items? You don't need too. Say you have 20000px bottom margin on <a class="target"> or whatever it is. This pushes the menu out of site (until you scroll that is ). Then, on hover, you make the margin 0. Pow, it's now visible as it's brought back up beneath the <a>. Though I haven't figured out how you'd hide it... like I said, quick theory

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

ryanhellyer
I sent an email to Stu Nicholls about this topic. Hopefully he'll chime in with some ideas too

i hope he doesn't steal it and say its his invention... i worked too much on it to have him take all the credit.

ryanhellyer
I guess I've always ruled out stuff like that since it's likely to mess up other code on the page.

note:
the dropdown does not break content on any page, its like an average dropdown and has no effect on the content around it.
although feel free to send any working version.

**ryanhellyer** · Sep 1, 2009 04:08

Originally Posted by YuriKolovsky

er 3rd way of doing this, although its not valid css

.
adding the ul to the a haha

I've beaten you to that one already unfortunately. I'm guessing a bunch of others have done it too.

I can see how this is possible now, but haven't quite got it working yet. Motivation isn't high either since it sounds like you have mastered it already

Stu Nicholls replied to my email, but I get the impression he's not convinced you guys are onto anything here. I guess you will prove him wrong soon

**ryanhellyer** · Sep 1, 2009 04:10

Originally Posted by YuriKolovsky

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

Heh, I hadn't thought of that. I've just been using overflow:none to get rid of the scroll bars.

Originally Posted by YuriKolovsky

note:
the dropdown does not break content on any page, its like an average dropdown and has no effect on the content around it.
although feel free to send any working version.

Are you like some sort of ninja god of CSS or something? I always thought that Paul O'B was the almighty of CSS but if you can pull this off I might have to relegate Paul to #2 status

If are indeed a CSS god we may need to sacrifice a small virtual goat in your honour to stop you striking our invalid CSS down with a bolt of lightning.

**YuriKolovsky** · Sep 1, 2009 04:28

Originally Posted by ryanhellyer

I've beaten you to that one already unfortunately. I'm guessing a bunch of others have done it too.

I can see how this is possible now, but haven't quite got it working yet. Motivation isn't high either since it sounds like you have mastered it already

Stu Nicholls replied to my email, but I get the impression he's not convinced you guys are onto anything here. I guess you will prove him wrong soon

guessing a bunch of others have done it too.

don't guess, because what if they haven't?

I can see how this is possible now, but haven't quite got it working yet. Motivation isn't high either since it sounds like you have mastered it already

if i had not done it, you wouldn't even be trying to do it!
plus its a quiz and the self satisfaction of figuring it out is always worth it,
means you could have done it too, and maybe you will learn a thing or two? or maybe you will come up with another original and better way of doing it? highly possible.

Stu Nicholls replied to my email, but I get the impression he's not convinced you guys are onto anything here. I guess you will prove him wrong soon

meh! xD i don't want to prove anything to stu, simply showing that its possible.

Are you like some sort of ninja god of CSS or something? I always thought that Paul O'B was the almighty of CSS but if you can pull this off I might have to relegate Paul to #2 status

hahah i have the highest respect for Paul, he is much much much more experienced in css that i am, but it just happened to "click" in my brain one day, its really not that complex, and has several solutions possible.

"everything is possible, but not everything is feasible"

If are indeed a CSS god we may need to sacrifice a small virtual goat in your honour to stop you striking our invalid CSS down with a bolt of lightning.

hahahahahahhaahahhaaha

**Paul O'B** · Sep 1, 2009 04:39

I have something working ... if you don't mind your site visitors needing to have ninja fast reflexes to click the link before it disappears from view :P

Making the menu appear is the easy part

Making it stay open while you navigate it is another question!!! One answer could be clear if you think hard enough about it relatively speaking.

**ryanhellyer** · Sep 1, 2009 05:31

Originally Posted by Paul O'B

Making the menu appear is the easy part

Making it stay open while you navigate it is another question!!! One answer could be clear if you think hard enough about it relatively speaking.

I was trying to do it absolutely speaking.

For some stupid reason it wasn't working though. I might have another bash tomorrow as I think I was just doing something demented as in principle it should have worked.

**ryanhellyer** · Sep 1, 2009 05:44

This is slightly off-topic, but YuriKolovsky would you be able to tell us a little about yourself? I hadn't heard of you until wandering into this topic. Do you have a personal website or blog?

I'm picturing something like this in my head:

Modified image borrowed from jewcy.com

**YuriKolovsky** · Sep 1, 2009 05:46

hahaha, i do have a beard, not long though oh and long hair.

Oh that "smite" button looks very nice.

**ryanhellyer** · Sep 1, 2009 05:56

Lol, I didn't see that, I thought it was just a SHIFT key!

**Stomme poes** · Sep 1, 2009 05:58

I didn't think Yuri was that ancient-looking either.

**Paul O'B** · Sep 1, 2009 06:31

I'm picturing something like this in my head:
http://test.pixopoint.com/goats/god.png

lol

**YuriKolovsky** · Sep 1, 2009 07:01

hahah i made a little 50 fun facts about Yuri
just because you asked so nicely ryanhellyer

Fun facts about yuri
1. real name is not yuri but timo (yuri is an alias)
2. loves to chat
3. has a messy mind
4. wears no glasses
5. works with css for 2 years now
6. is a fast learner
7. was best in class, because was the only one in class taking math and physics
8. speaks about himself in 3rd person
9. is not old (doesn't believe in age in terms of time lived)
10. first web book read: "Build Your Own Web Site The Right Way Using HTML & CSS" by Ian
11. 2nd book read: Build.Your.Own.Database.Driven.Website.Using.PHP.&.MySQL
12. 3rd book read: CSS Reference by Paul and Tommy
13. lives in a place where the web is still in infancy
14. is Russian, but with a Finnish passport but lives in Spain
15. is good at everything that he does.
16. thinks that all you need to succeed is to know the basics, and know them good
17. thinks that everything is possible
18. believes in telekinesis
19. loves animals
20. loves plants
21. loves photography and art
22. loves to draw pencil art
23. never swears (i swear!)
24. loves paul’s css quizzes, thinks it’s the best thing since muesli's
25. learned a lot from pauls css quizzes, and will probably make a website dedicated to them (if paul doesen’t)
26. made websites from day 7 of starting to learn websites
27. has not had the time to make himself any website, too busy with making other relatively big websites.
28. asks stupid questions and answers stupid questions
29. fails at googling things
30. is good at hard things
31. fails at very easy things
32. sleeps 10 hours a day
33. is left handed but writes with the right hand (slightly ambidextrous)
34. has equal hemisphere brain processing
35. is nice to others (too nice), loves to help (too much)
36. 2nd website ever made was a one paged self adapting website with a AI (never released because was too complicated for real life use)
37. is a perfectionist
38. loves mind games and quizzes and puzzles
39. has an IQ of 156 according to http://iqtest.com/
40. uses the password… oh wait, not supposed to tell you this.
41. his name sounds similar to “time”, and sometimes “team-o”.
42. goes mountain climbing regularly
43. is honest and hardworking
44. speaks 4 different languages (and understands a 5th one)
45. has a skewed way of thinking, failing some exams because of this. (I give correct answers to questions, but the answers were not the ones they were looking for)
46. had a pet tomato bush (that gave 60 tomatoes!)
47. is easily impressed
48. knows lots of subjects to a small degree
49. trusts intuition
50. has a bad short term memory but a good long term memory

and an extra:
51. made his first blog one day before offering this quiz

after i finish these 2 projects, ill polish my blog, and add as much help to beginners to the webworld as i can, if its popular maybe ill make it into a proper dedicated website.

you haven't heard of me because i haven't been making any sound.

**Stomme poes** · Sep 1, 2009 07:42

46. had a pet tomato bush (that gave 60 tomatoes!)

Is it called FT?

30. is good at hard things
31. fails at very easy things

Time for Perl: making easy things easy and hard things possible : )

**YuriKolovsky** · Sep 1, 2009 07:47

Originally Posted by Stomme poes

Is it called FT?

no, not at all, the name was Tomat

Originally Posted by Stomme poes

Time for Perl: making easy things easy and hard things possible : )

but if perl makes easy things easy and hard things easier, doesn't it mean that i wont be able to do any of it?!? xD
haha, but seriously, i will look into perl as soon as i can although ive heard good stuff about python too.

**RyanReese** · Sep 1, 2009 10:38

Wow noone hasa got this yet? Now that I'm back from vacation I will indeed take a stab at this..

Kudos to a tough quiz..lemme post some and I'll devote time to this.

(If what I'm thinking is correct I think I kno the way you did it since you mentioned Opera doesn't work xD)

**YuriKolovsky** · Sep 1, 2009 12:21

Wow noone hasa got this yet?

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

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

**Paul O'B** · Sep 1, 2009 13:02

If no one offers anything close by tomorrow we'll drop some bigger hints.

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

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

**YuriKolovsky** · Sep 1, 2009 13:17

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.

**ryanhellyer** · Sep 1, 2009 15:25

Lol, ????

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.

**rochow** · Sep 1, 2009 19:50

Lol, ????

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

**YuriKolovsky** · Sep 1, 2009 23:27

Originally Posted by rochow

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

very true...no more tips! xD

**Paul O'B** · Sep 2, 2009 01:12

Lol, ????

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

**ryanhellyer** · Sep 2, 2009 02:00

Originally Posted by Paul O'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

Heh, reminds me of DeathShadow's habits

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

**Stomme poes** · Sep 2, 2009 02:11

Off Topic:

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.

**Paul O'B** · Sep 2, 2009 02:30

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

User Tag List

Thread: CSS - Test Your CSS Skills Number 27

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions